Articles

UIScrollView autolayout sur un storyboard. Un guide étape par étape.

  1. Nous commençons par ajouter un UIScrollView à la vue principale (qui pourrait être la vue entière ou une autre, petite, que vous avez. Quoi qu’il en soit, à partir de maintenant, je me référerai à cela comme à la « vue principale ») et nous ajoutons des contraintes de haut, bas, gauche et droite.

Contraintes de haut, bas, gauche et droite (concernant la vue principale)

2. Après cela, nous ajoutons une UIView à l’intérieur de l’UIScrollView (cette vue est une étape essentielle pour que l’autolayout fonctionne correctement). Je l’ai appelé ‘Content View’ et j’ai ajouté des contraintes en haut, en bas, à gauche et à droite par rapport à la vue de défilement. En plus de cela, j’ai également ajouté des hauteurs et des largeurs égales par rapport à la vue principale.

Haut, Bas , Contraintes gauche et droite (concernant le scrollview)

Largeurs et hauteurs égales (concernant la vue principale)

3. L’étape suivante dépend si vous voulez avoir un défilement vertical ou horizontal. Si vous avez besoin d’un défilement vertical, vous devrez définir la priorité ‘Contrainte d’égalité des hauteurs’ sur 250. D’autre part, si un défilement horizontal est ce que vous recherchez, vous devrez définir la priorité ‘Contrainte de largeurs égales’ à 250.

Autorise un défilement vertical.

Autorise un défilement horizontal.

4. La vue de défilement est maintenant toute configurée et prête à être utilisée ! Vous pouvez maintenant commencer à ajouter votre contenu mais vous devez garder à l’esprit que la hauteur de la ‘Content View’ ne peut pas être ambiguë. Cela signifie que chaque vue que vous aviez doit avoir une contrainte de hauteur définie (hauteur égale à X ou inférieure ou égale à X) et que tous les composants (ou au moins vous devriez avoir une ligne continue de composants de haut en bas) doivent avoir un espacement vertical défini entre eux.

De plus, les composants les plus hauts et les plus bas doivent avoir un espacement supérieur et un espacement inférieur, respectivement, à la ‘Vue du contenu’.

5a) ScrollView vertical – Exemple de configuration des composants

.