Mise en page automatique – 5 buttons au centre

J'essaie d'entrer dans le secteur de l'Auto Layout, mais je trouve ça un peu difficile.

J'essaie d'afficher 5 vues de l'image l'une à côté de l'autre au centre de la vue. Ils ont besoin de se resize pour augmenter leur hauteur / largeur.

Voici à quoi cela ressemble dans IB (et un peu comme il faut le faire quand vous utilisez l'application): IB De vues

J'ai donc les contraintes suivantes:

  • Ajout d'un rapport d'aspect de 1: 1 pour qu'ils soient toujours au carré
  • Le premier button "étreint" le côté gauche de la vue, il sera donc affiché sur le côté.
  • Les 4 buttons suivants ont un espacement horizontal par rapport au button à côté d'eux
  • Chaque button a une contrainte en haut et en bas de l'écran, de sorte qu'ils seront plus gros si vous redimensionnez l'écran.

Cependant, quand je l'exécute, cela ressemble à ceci: Résultats

Et je suis juste un peu perplexe ici. Qu'est-ce que je fais mal?

Merci d'avance, Cordialement – / JBJ

** EDIT ** J'ai ajouté une contrainte de fin au dernier button. Cela garantit qu'ils sont tous dans l'écran, mais est un peu problématique en pensant à la taille de celui-ci, donc cela ne l'a pas résolu non plus. ajout du dernier bouton

* EDIT EDIT * Essayé de supprimer les contraintes du haut et du bas car ce sont elles qui forcent la taille. Ajout d'une contrainte de centre vertical à tous. Cela ne fonctionnera pas non plus. Les afficher très petit (bien alignés, mais trop petit) et vient aussi avec des avertissements: Dans IB

En simulateur

OK, voilà …

  1. Ajoutez 5 buttons à la vue … Aucune contrainte.

entrez la description de l'image ici

  1. Ajouter des contraintes d'espace horizontales entre eux tous. Ajoutez également des contraintes de la première et de la dernière vue à la vue supérieure. J'ai également changé la dernière contrainte à 0 (remarquez le +306 qui me dit que c'est actuellement hors de propos).

entrez la description de l'image ici

  1. Sélectionnez tous les buttons et (en utilisant le button Ajouter une contrainte) entrez la description de l'image ici ajoutez "Largeurs égales" à tous. Remarquez le contour en pointillé orange qui me dit qu'ils auront tous des largeurs égales.

entrez la description de l'image ici

  1. Maintenant, alignez-les dans le centre vertical de la vue avec ce button …

entrez la description de l'image ici

entrez la description de l'image ici

  1. La dernière chose à faire est d'aller à chacun et d'append le rapport d'aspect 1: 1. Vous devrez append la contrainte et l'éditer à un ratio de 1.

entrez la description de l'image ici

Assurez-vous de mettre à jour les frameworks une fois que vous avez terminé de repositionner les buttons à leurs nouvelles contraintes …

entrez la description de l'image ici

L'écran d'aperçu montre cela fonctionnant à toutes les tailles différentes …

entrez la description de l'image ici

Pour les placer au centre de l'écran, utilisez verticalement

NSLayoutConstraint *constraintHorizontal = [NSLayoutConstraint constraintWithItem:self atsortingbute:NSLayoutAtsortingbuteCenterY relatedBy:NSLayoutRelationEqual toItem:self.superview atsortingbute:atsortingbute multiplier:1.0f constant:0.0f]; 

Pour les placer horizontalement Largeur du button = (largeur de l'écran) – (dimension de l'espacement des buttons) – (distance à gauche) – (distance correcte) / 5;

Idem pour la hauteur. La contrainte initiale initiale pour la première vue d'image sera la distance gauche.

Ce que je fais toujours dans une telle situation, c'est simplement penser. De combien de contraintes ai-je besoin pour définir le design à 100%? Que dois-je écrire pour dire à quelqu'un au téléphone à quoi il ressemble?

Dans votre cas, voici les contraintes suivantes (j'espère que je n'en oublierai pas une)

  • Ils sont tous des carrés (hauteur égale largeur, pas une valeur)
  • Ils ont la même taille, il suffit de le mettre à égalité, pas à une valeur
  • Espacement horizontal entre les éléments et le bord, définissez-le sur une taille fixe
  • Verticalement centré
  1. Placez 5 buttons verticalement et horizontalement au centre dans UIView

  2. Sélectionnez-les tous et intégrez-les dans une vue de stack

  3. Changez la dissortingbution pour remplir également.

  4. Ajustez l'espacement dans l'inspecteur d'attributes pour faire de l'espace entre les buttons.

  5. Ajoutez l'espace de début et de fin et la contrainte de hauteur à la vue de la stack. Aussi verticalement l'aligner.

entrez la description de l'image ici