Comment organiser UIButtons en utilisant Autolayout

Pour disposer plusieurs vues proportionnellement espacées en fonction de l'orientation d'un périphérique, créez des vues d'espacement entre les vues visibles. Définissez correctement les contraintes de ces vues d'espacement pour vous assurer que les vues visibles peuvent restr espacées en fonction de l'orientation de l'appareil

Pas:

1. Créez les vues visibles.

2. Créez les vues d'espacement égales au nombre de vues visibles plus un.

3. Alterner placer vos vues, en commençant par une vue d'entretoise.

4. Pour espacer deux vues visibles, placez toutes les vues dans le model suivant, en commençant par le côté gauche de l'écran et en déplaçant vers la droite:

spacer1 | view1 | spacer2 | vue2 | spacer3.

5. Contraindre les vues d'espacement de sorte que leurs longueurs soient égales les unes aux autres.

6. Créez une contrainte principale de la première vue de l'espaceur à la vue du conteneur.

7. Créez une contrainte de fin à partir de la dernière vue d'espacement dans la vue de conteneur.

8. Créez des contraintes entre les vues d'espacement et les vues visibles.

L'exemple suivant utilise les étapes de la tâche ci-dessus pour montrer comment positionner deux vues proportionnellement espacées. Les vues d'espacement sont annotées pour l'exemple, mais sont normalement laissées vides sans arrière-plan. Commencez par créer les deux vues et placez-les dans le storyboard.

Ajoutez les trois vues d'espacement, l'une à gauche de la vue la plus à gauche, l'autre entre les deux vues et l'autre à droite de la vue la plus à droite. Les vues d'espacement ne doivent pas nécessairement avoir la même taille à ce moment car leur taille sera définie par des contraintes.

Créez les contraintes suivantes pour les vues d'espacement:

1. Contraindre la largeur de la vue d'entretoise 2 et la vue d'entretoise 3 pour être égale à la largeur de la vue d'entretoise 1.
2. Contraindre la largeur de la vue d'espacement 1 à être supérieure ou égale à la largeur minimale désirée.
3. Créez une contrainte Conduire l'espace vers le conteneur à partir de la vue d'espacement 1 vers le conteneur.
4. Créez une contrainte d'espacement horizontal à partir de la vue d'espacement 1 pour afficher 1. Définissez cette contrainte comme étant une contrainte inférieure ou égale à avec une priorité de 1000.
5. Créez des contraintes d'espacement horizontal à partir de la vue d'espacement 2 pour afficher 1 et afficher 2. Définissez ces contraintes comme étant une contrainte inférieure ou égale à avec une priorité de 999.
6. Créez une contrainte d'espacement horizontal à partir de la vue d'espacement 3 pour afficher 2. Définissez cette contrainte comme étant une contrainte inférieure ou égale à avec une priorité de 1000.

7. Créez une contrainte de l'espace à la fin du conteneur à partir de la vue d'espacement 3 vers le conteneur.

   Ces contraintes créent deux vues visibles et trois vues invisibles (vues d'espacement). Ces vues d'espacement se redimensionnent automatiquement lorsque l'orientation de l'appareil change, en conservant les vues visibles proportionnellement espacées, comme illustré dans les deux figures suivantes:

C'est la façon dont Apple suggère également de faire dans cet exemple

En plus de cela, vous faites ces choses dans une vue de conteneur de buttons qui possède ces buttons et aligne cette vue de conteneur de buttons dans votre vue et maintient les contraintes de début et de fin avec la même valeur constante. Et ajoutez les contraintes supérieures et inférieures restantes, si nécessaire.

J'ai donné les mêmes étapes de l'exemple ici, car la réponse en fonction des liens n'est peut-être pas préférable.

Si vous ajoutez ces buttons depuis xib, supprimez la layout automatique et réglez le ressort et les entretoises du réglage xib sous la section autoresizing