À quoi sert la propriété UIScrollView contentInset?

158

Quelqu'un peut-il m'expliquer à quoi sert la propriété contentInset dans une UIScrollViewinstance? Et peut-être donner un exemple?

ÉtrangerBR
la source

Réponses:

240

Il définit la distance de l'encart entre la vue de contenu et la vue de défilement englobante.

Obj-C

aScrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 7.0);

Swift 5.0

aScrollView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 7.0)

Voici un bon article de la bibliothèque de référence iOS sur les vues de défilement qui a une capture d'écran informative (fig 1-3) - je vais le répliquer via le texte ici:

  _|←_cW_→_|_↓_
   |       | 
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
  _|_______|___ 
             ↑


   (cH = contentSize.height; cW = contentSize.width)

La vue de défilement englobe la vue de contenu ainsi que le remplissage fourni par les encarts de contenu spécifiés.

jball
la source
est-il utilisé pour ajouter un remplissage à l'UIScrollView alors? Sinon, pourriez-vous me donner un exemple pratique. Mon problème n'est pas de savoir comment le mettre en œuvre mais quand le mettre en œuvre.
ForeignerBR
28
Oui, il remplit le contenu à l'intérieur de la vue de défilement. Cela s'apparente à la paddingpropriété CSS .
Marc W
Désolé de me servir de cela, je peux lui poser sa propre question, mais sur cette base, que se passe-t-il réellement si vous définissez chaque valeur contentInset sur 0 autre que contentHeight par exemple? Cela force-t-il l'ensemble de la vue de défilement à être à la hauteur que vous l'avez définie?
jakev
@jakev Non, la propriété .frame contrôle les dimensions du scrollview dans son parent (voir cette réponse: stackoverflow.com/questions/5361369/… ). La définition de contentInsets sur 0 pour tous les côtés signifie simplement que le contenu ne sera pas du tout rempli dans la vue de défilement. Ainsi, lorsque vous faites défiler vers le haut, le contenu se trouve juste contre le haut de la vue de défilement. Si vous faites défiler vers le bas, le contenu atteint le bas de la vue de défilement.
Jeremy Wiebe
est-il possible de garder contentInset toujours même lors du défilement gardez toujours marin en haut (contenInset) de scrollView
Chlebta
86

Bien que la réponse de jball soit une excellente description des encarts de contenu, elle ne répond pas à la question de savoir quand l'utiliser. Je vais emprunter à ses schémas:

  _|←_cW_→_|_↓_
   |       | 
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
   |content|    
-------------↑-

C'est ce que vous obtenez lorsque vous le faites, mais son utilité ne s'affiche que lorsque vous faites défiler:

  _|←_cW_→_|_↓_
   |content| ← content is still visible
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
  _|_______|___ 
             ↑

Cette ligne supérieure de contenu sera toujours visible car elle se trouve toujours dans le cadre de la vue de défilement. Une façon de penser au décalage supérieur est de savoir "combien de décaler le contenu vers le bas de la vue de défilement lorsque nous faisons défiler tout le chemin vers le haut"

Pour voir un endroit où cela est réellement utilisé, regardez l'application Photos intégrée sur l'iPhone. La barre de navigation et la barre d'état sont transparentes et le contenu de la vue de défilement est visible en dessous. C'est parce que le cadre de la vue de défilement s'étend aussi loin. Mais sans l'encart de contenu, vous ne pourrez jamais faire en sorte que le haut du contenu soit effacé de cette barre de navigation transparente lorsque vous irez jusqu'en haut.

Fabien
la source
La bonne chose ici est que vous pouvez utiliser les encarts pour créer l'effet "défilement sous la barre d'état avec flou".
TheEye
L'exemple sur l'application de photos était facile à comprendre.
abhimuralidharan le
8

Les encarts de contenu résolvent le problème d'avoir un contenu qui passe sous d'autres parties de l'interface utilisateur tout en restant accessible à l'aide des barres de défilement. En d'autres termes, le but de l'encart de contenu est de rendre la zone d'interaction plus petite que sa zone réelle.

Prenons le cas où nous avons trois zones logiques de l'écran:

TOP BUTTONS

TEXT

BOTTOM TAB BAR

et nous voulons que le TEXTE n'apparaisse jamais de manière transparente sous les BOUTONS SUPÉRIEURS, mais nous voulons que le texte apparaisse sous la BARRE DE TABLES INFÉRIEURES tout en permettant le défilement afin que nous puissions mettre à jour le texte de manière transparente sous la BARRE DE TABLES INFÉRIEURES.

Ensuite, nous définirions l'origine du haut pour qu'elle soit en dessous des BOUTONS SUPÉRIEURS, et la hauteur pour inclure le bas de la BARRE DE TABLES INFÉRIEURES. Pour accéder au texte placé sous le contenu de la BARRE DE TABLES INFÉRIEURES, nous définirions l'encart inférieur à la hauteur de la BARRE DE TABLES INFÉRIEURES.

Sans l'encart, la molette de défilement ne vous permettrait pas de faire défiler suffisamment le contenu pour le saisir. Avec l'encart, c'est comme si le contenu avait un "CONTENU BLANC" supplémentaire de la taille de l'encart de contenu. Le texte vierge a été "incrusté" dans le "contenu" réel - c'est ainsi que je me souviens du concept.

Faisal Memon
la source
4

Il est utilisé pour ajouter un rembourrage dans UIScrollView

Sans contentInset, une vue de table est comme ceci:

entrez la description de l'image ici

Puis réglez contentInset:

tableView.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)

L'effet est comme ci-dessous:

entrez la description de l'image ici

Semble être meilleur, non?

Et j'écris un blog pour étudier le contentInset, les critiques sont les bienvenues.

fujianjin6471
la source
2

Excellente question.

Prenons l'exemple suivant ( scrollerest un UIScrollView):

float offset = 1000;
[super viewDidLoad];
for (int i=0;i<500; i++) {
    UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(i * 100, 50, 95, 100)] autorelease];
    [label setText:[NSString stringWithFormat:@"label %d",i]];
    [self.scroller addSubview:label];
    [self.scroller setContentSize:CGSizeMake(self.view.frame.size.width * 2 + offset, 0)];
    [self.scroller setContentInset:UIEdgeInsetsMake(0, -offset, 0, 0)];
}

Les inserts sont le SEUL moyen de forcer votre scroller à avoir une "fenêtre" sur le contenu où vous le souhaitez. Je suis toujours en train de jouer avec cet exemple de code, mais l'idée est là: utilisez les encarts pour obtenir une "fenêtre" sur votre UIScrollView.

Dan Rosenstark
la source