Création d'une grille 3x3 avec des contraintes de disposition automatique
Xcode a dit qu'il n'y avait pas de problèmes de mise en page, mais comme vous pouvez le voir, il y en avait. J'ai tout essayé. Apple docs, YouTube, Google, etc. Il semble que je le fais bien, mais peut-être que l'ordre dans lequel je fais les choses ou quelque chose d'autre cause ces problèmes. add missing constraints Et c'est le meilleur résultat jusqu'à présent. J'ai 9 boutons sur 9 UIImages donc je dois faire la même chose que je fais avec les boutons comme je le fais avec les UIImages. J'ai placé temporairement les UIImages sur le dessus des boutons pour que je puisse voir ce que je fais plus facilement. J'ai 2 captures d'écran.
Début
C'est après avoir utilisé l'option add missing constraints De Xcode. Sorta ce que je veux mais pas de cigare.
iOS 9 ou version ultérieure
Si votre cible de déploiement est iOS 9 ou version ultérieure, il existe une solution plus simple utilisant UIStackView. Veuillez voir mon autre réponse .
iOS 8 ou version antérieure
Il existe plusieurs façons de créer cette mise en page avec des contraintes. En voici un.
Tout d'abord, un conseil: vous pouvez nommer vos vues dans le plan du document. Cela permet de comprendre plus facilement quelles vues sont auxquelles et à quoi vos contraintes sont connectées. Pour nommer une vue, cliquez dessus dans le plan, appuyez sur retour et tapez le nom. Le contour peut alors ressembler à ceci:
Si vous changez les noms, vous devrez peut-être fermer le fichier (barre de menus> Fichier> Fermer "Main.storyboard") et le rouvrir pour que tout soit mis à jour correctement.
(Notez que ces noms ne sont utilisés que lors de la modification du storyboard. Il n'y a aucun moyen d'obtenir ces noms au moment de l'exécution.)
OK, maintenant pour créer les contraintes. Commencez par contraindre tous les bords gauche-droit au plus proche voisin avec une valeur constante zéro:
Ensuite, contraignez les bords supérieur et inférieur de la ligne supérieure au plus proche voisin avec une valeur constante zéro. Si vous souhaitez limiter le bord supérieur de la vue d'ensemble, plutôt que le guide de mise en page supérieur, vous devez les faire un par un. Voici comment faire le premier:
Répétez l'opération pour les deux autres vues de la rangée supérieure.
Ensuite, contraignez les bords supérieur et inférieur de la ligne inférieure au plus proche voisin avec une valeur constante zéro. Encore une fois, si vous souhaitez limiter le bord inférieur de la vue d'ensemble, vous devez les faire un à la fois. Exemple:
Répétez l'opération pour les deux autres vues de la ligne inférieure.
Notez que vous n'avez pas à créer des contraintes de haut en bas pour la ligne du milieu, car les lignes du haut et du bas sont maintenant contraintes à la ligne du milieu.
Enfin, sélectionnez toutes vos vues et créez des contraintes de largeur et de hauteur égales:
Découvrez le résultat en utilisant Aperçu dans l'éditeur Assistant:
Si vous oubliez des contraintes, le contour du document affichera une flèche rouge en haut à droite. Cliquez dessus pour obtenir de l'aide afin d'identifier ce qui manque. Par exemple, si vous oubliez d'ajouter les contraintes supérieure et inférieure à la vue en haut au centre, vous obtenez une erreur comme celle-ci:
Si vous ciblez iOS 9 ou une version ultérieure, , vous pouvez créer une grille de n'importe quelle dimension beaucoup plus facilement à l'aide des vues de pile. Créez une vue de pile horizontale pour chaque ligne, puis placez toutes les vues de pile horizontale dans une seule vue de pile verticale. Définissez la distribution de toutes les vues de pile (horizontales et verticales) sur Remplir également. Définissez ensuite des contraintes sur la vue de pile verticale pour contrôler la taille globale de la grille.
Voici une démo. Je vais commencer par neuf vues d'image:
Je vais d'abord créer trois vues de pile horizontales, une pour chaque ligne de la grille. Étant donné que j'ai déjà organisé manuellement les vues d'image sous forme de grille approximative, Xcode est suffisamment intelligent pour utiliser automatiquement les vues de pile horizontales:
Ensuite, je vais sélectionner les trois vues de pile horizontales et définir la distribution des trois pour qu'elle se remplisse également en même temps:
Maintenant, je vais mettre toutes les vues de pile horizontales dans une vue de pile verticale et définir la distribution de la vue de pile verticale sur Remplir également. Encore une fois, puisque les vues de pile horizontales sont déjà disposées à peu près verticalement, Xcode est suffisamment intelligent pour utiliser automatiquement une vue de pile verticale:
Enfin, je vais mettre des contraintes sur la vue de la pile verticale pour qu'elle remplisse son conteneur (sauf pour la zone de la barre d'état). Ensuite, je dirai à Xcode de mettre à jour les images de toutes les vues, et j'aurai une grille 3x3 parfaite avec presque aucun travail:
