iOS ScrollView avec mise en forme automatique


Exemple

Étapes simples pour utiliser scrollview avec autolayout.

  • Créer un nouveau projet avec une application à vue unique
  • Sélectionnez le viewcontroller par défaut et changez sa taille d'écran en iPhone-4inch à partir de l'inspecteur d'attributs.
  • Ajoutez une vue de défilement à la vue de votre viewcontroller comme suit et définissez la couleur d'arrière-plan sur bleu

entrer la description de l'image ici

  • Ajoutez des contraintes comme indiqué ci-dessous image

entrer la description de l'image ici

Qu'est-ce que cela va faire, il suffit de coller tous les bords de scrollview à la vue de viewcontroller

Scénario 1:

Maintenant, disons que notre contenu est énorme, et nous voulons qu'il défile horizontalement aussi bien que verticalement.

Pour ça,

  • Ajoutez un UIView à la vue de défilement du cadre (0,0,700,700). Donnez-lui une couleur de fond orange pour l'identifier différemment.

entrer la description de l'image ici

Vient ensuite la partie importante, il faut la faire défiler horizontalement et verticalement.

  • Sélectionnez la vue orange et ajoutez les contraintes suivantes

    entrer la description de l'image ici

Laissez-moi vous expliquer ce que nous avons fait dans l'étape ci-dessus.

  • Nous avons fixé la hauteur et la largeur à 700.
  • Nous définissons un espace à scrollview = 0 qui indique à la vue de défilement que le contenu est défilable horizontalement.
  • Nous définissons l'espace du bas sur scrollview = 0 qui indique à la vue de défilement que le contenu est défilable verticalement.

Maintenant, lancez le projet et vérifiez.

Scénario 2: considérons un scénario où nous savons que la largeur du contenu sera identique à la largeur de défilement, mais que la hauteur est supérieure à celle de scrollview.

Suivez les étapes pour faire défiler le contenu verticalement.

  • Supprimez la contrainte de largeur dans le cas ci-dessus.
  • Modifiez la largeur de la vue orange pour qu'elle corresponde à la largeur de la vue de défilement.
  • Faites glisser Ctrl depuis la vue orange pour faire défiler la vue et ajouter une contrainte de largeur égale .

entrer la description de l'image ici

  • Et fait!!! Il suffit de lancer et de vérifier s'il défile verticalement

Scénario 3:

Maintenant, nous voulons faire défiler uniquement horizontalement et non verticalement.

Suivez les étapes pour faire défiler horizontalement le contenu.

  • Annuler toutes les modifications pour obtenir des contraintes comme ci-dessous (c.-à-d. Restaurer les contraintes d'origine qui ont atteint le défilement vertical et horizontal )

entrer la description de l'image ici

  • Vérifiez l'image de la vue orange, qui devrait être (0,0,700,700)
  • Supprimer la contrainte de hauteur de la vue orange.
  • Modifiez la hauteur de la vue orange pour qu'elle corresponde à la hauteur de défilement.
  • Tout en maintenant la touche Ctrl enfoncée, faites glisser la vue orange pour faire défiler la vue et ajouter une contrainte de hauteur égale .

entrer la description de l'image ici

  • Et fait!!! Il suffit de lancer et de vérifier s'il défile verticalement