iOS Défilement du contenu avec mise en forme automatique activée


Exemple

Ce projet est un exemple autonome entièrement réalisé dans Interface Builder. Vous devriez pouvoir le parcourir en 10 minutes ou moins. Ensuite, vous pouvez appliquer les concepts que vous avez appris à votre propre projet.

gif animé montrant le défilement horizontal

Ici, j'utilise juste UIView s mais ils peuvent représenter n'importe quelle vue que vous aimez (c.-à-d. Bouton, étiquette, etc.). J'ai également choisi le défilement horizontal car les captures d'écran du storyboard sont plus compactes pour ce format. Les principes sont les mêmes pour le défilement vertical.

Concepts clés

  • UIScrollView ne doit utiliser qu'une seule sous-vue. Ceci est un 'UIView' qui sert de vue de contenu pour contenir tout ce que vous souhaitez faire défiler.
  • Rendre la vue du contenu et le parent de la vue de défilement avoir des hauteurs égales pour le défilement horizontal. (Largeurs égales pour le défilement vertical)
  • Assurez-vous que tout le contenu défilable a une largeur définie et est épinglé de tous les côtés.

Lancer un nouveau projet

Il ne peut s'agir que d'une application à vue unique.

Storyboard

Dans cet exemple, nous allons faire un défilement horizontal. Sélectionnez le View Controller, puis choisissez Freeform dans l'inspecteur de taille. Faites la largeur 1,000 et la hauteur 300 . Cela nous donne juste la place dans le storyboard pour ajouter du contenu qui défile.

capture d'écran des paramètres de taille simulés

Ajouter une vue de défilement

Ajoutez un UIScrollView et épinglez les quatre côtés à la vue racine du contrôleur de vue.

screenshot de défilement épinglé

Ajouter une vue de contenu

Ajoutez un UIView tant que sous-vue à la vue de défilement. Ceci est la clé. N'essayez pas d'ajouter beaucoup de sous-vues à la vue de défilement. Ajoutez simplement un seul UIView . Ce sera votre affichage de contenu pour les autres vues que vous souhaitez faire défiler. Épinglez la vue de contenu à la vue de défilement sur les quatre côtés.

contenu épinglé vue capture d'écran

Hauteurs égales

Désormais, dans la structure du document, la commande clique à la fois sur la vue du contenu et sur la vue parente de la vue de défilement afin de les sélectionner toutes les deux. Ensuite, définissez les hauteurs comme étant égales (contrôlez </ kbd faites glisser de l’affichage de contenu vers l’affichage de défilement>). C'est aussi la clé. Comme nous faisons défiler horizontalement, la vue du contenu de la vue de défilement ne saura pas à quelle hauteur elle doit être, sauf si nous la configurons de cette manière.

réglage de la hauteur égale screenshot

Remarque:

  • Si nous faisions défiler le contenu verticalement, nous définirions la largeur de la vue de contenu comme étant égale à la largeur du parent de la vue de défilement.

Ajouter du contenu

Ajoutez trois UIView s et donnez-leur toutes les contraintes. J'ai utilisé 8 marges de points pour tout.

Capture d'écran IB avec affichage du contenu ajouté

Contraintes:

  • Vue verte: épinglez les bords supérieur, gauche et inférieur. Faites la largeur 400.
  • Vue rouge: épinglez les bords supérieur, gauche et inférieur. Faites la largeur 300.
  • Vue violette: épinglez les quatre bords. Faites la largeur quel que soit l'espace restant (268 dans ce cas).

La définition des contraintes de largeur est également la clé pour que la vue de défilement connaisse la largeur de son affichage de contenu.

Fini

C'est tout. Vous pouvez exécuter votre projet maintenant. Il devrait se comporter comme l'image défilante en haut de cette réponse.

Une étude plus approfondie