Auto layout arranger 6 carrés max dynamiquement dans une vue
Bonjour,
je suis débutant en Auto-layout et je me prends bien la tête pour arranger 6 ImageViews carrées dans un conteneur.
Les ImageViews seront ajoutées dynamiquement au chargement de la vue en car certains modules seront activés ou pas...
Liste des items de la vue : un logo en haut, une bannière en bas et les 6 carrés pour accéder aux modules de l'application (la vue jaune peut être retirée, je me suis dit a priori que ça pouvait aider pour le layout)
J'ai établi un design de base sans ajouter de contraintes sur les carrés. Ceux-ci devront être ajoutés dynamiquement mais pour l'instant je n'arrive déjà pas à les arranger statiquement :-(
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
[1] [2] [3]
[4] [5] [6]
[2] doit être centré horizontalement dans sa superview. Ses hauteurs et largeurs sont fixes.
Les autres carrés ont la même taille.
[2] a son top à 10 points de sa superview.
Ensuite, aligne les autres carrés sur [2], c'est relativement direct.
Mettre la vue jaune intermédiaire est une bonne idée, ça va te simplifier la vie pour la réflexion sur les contraintes à positionner en effet.
Est-ce que, sans parler des carrés rouges encore, tu arrives au moins à placer le reste avec AutoLayout ? (Header/Logo en haut, bannière en bas, vue jaune au milieu) ? Ca ça ne devrait pas être trop compliqué déjà .
Pour le contenu de la vue jaune centrale (comme pour le reste d'ailleurs, en fait), le truc c'est déjà de te poser la question de ce que tu veux comme contrainte :
- Est-ce que tu veux que chaque carré rouge ait une taille fixe et soit espacé de N pixels par rapport à ses voisins " N étant une valeur fixe ? Et du coup les marges tout à gauche et à droite du bloc de 6 carrés vont s'adapter en fonction de la largeur de la vue jaune ?
- Ou est-ce que tu veux que chaque carré soit espacé de N pixels, mais que la taille de tes carrés rouges dépendent de la hauteur de la vue jaune (si ta vue jaune fait 200px de haut, et que tu veux 10px entre chaque carré, ça va donc te donner (200-3*10)/2 = 85px de haut pour chaque ligne de carrés rouge) ? Et donc que la largeur de chaque carré rouge soit égale à sa hauteur (pour qu'il soit carré, donc) ?
- Ou est-ce que tu veux que chaque carré ait une taille fixe, et que l'espace soit réparti sur toute la largeur de la vue jaune ? (Si tes carrés font 60 de large et de haut, et que la vue jaune fait 320 de large, (320-3*60)/4 = 35px de marge entre chaque, et aussi entre les carrés et les bords de la vue jaune)
Bref, en fonction de ce que tu veux exactement comme contraintes / layout, tu vas mettre des contraintes différentes évidemment. D'ailleurs si tu te poses les bonnes questions, les contraintes vont venir toutes seules.- Tu veux des carrés de taille fixe ? Tu mets des contraintes sur la taille (largeur et hauteur, ou largeur et aspect ratio = 1, par exemple) de tes carrés.
- Tu veux que tes carrés s'adaptent à la taille disponible, et que ce soit tes marges qui soient fixes ? Tu vas mettre des contraintes sur les marges entre tes carrés, et pas sur la taille des carrés.
- Tu veux que ton carré rouge du milieu soit centré par rapport à ta vue jaune ? Tu peux mettre une contrainte pour centrer ce carré là dans ta vue jaune horizontalement. Puis partir de là pour aligner les autres ([EDIT] cf réponse de Céroce)
etc.Je ne comprends pas trop le dessin que tu présentes, c'est le résultat que tu veux ou celui que tu obtiens ?
Les carrés rouges qui te serve de module sont créé par le storyboard ou par le code ? Le carré jaune te sert de containerView donc c'est une bonne idée.
Le plus simple si tu as toujours besoin des six carrés, c'est de les créer avec le storyBoard. Si tu les ajoute par le code et que tu comprends mal autoLayout, l'idéal est de commencer par créer les vues avec le storyboard et d'ajouter les contraintes en les ctrl-drag histoire de voir quelles sont les effet produits par les NSLayoutConstraint. Ensuite dans le code ça te permettrait de voir comment se structurent les contraintes. Sur des cas comme le tiens ce ne devrait pas être extrêmement sorcier.
à‰dit :
- Sinon en effet comme le disent AliGator et Céroce, une collectionView peut aussi permettre d'arriver à faire ça.
- sur-grillé par Ali et Céroce.
Encore une fois c'est en exprimant clairement tes contraintes / souhaits verbalement que tu vas savoir quelles contraintes AutoLayout mettre, ca depend de ce que tu veux ;-)
Je vais finalement adopter l'approche du UICollectionView car elle est la plus simple à mettre en place, ne maitrisant pas encore autolayout...
Merci pour vos réponses