Mise en page automatique iOS: deux boutons de largeur égale, côte à côte


92

J'ai actuellement des difficultés avec AutoLayout. J'utilise le générateur d'interface et j'essaie de positionner deux boutons de largeur égale côte à côte, comme illustré dans l'image suivante.

mise en page objective

À partir de l'image d'aperçu suivante, mon titleImage a été correctement contraint et s'affiche correctement, mais les boutons ne le sont pas. J'ai expérimenté en alignant le bouton 1 avec le bord avant de titleImage et le bouton2 avec le bord arrière de titleImage, mais la distribution de largeur entre les deux boutons devient biaisée à ce stade, comme illustré ci-dessous.

scénario de problème

Mon objectif est de comprendre quelles contraintes manquent et doivent être appliquées aux deux boutons pour conserver des largeurs égales quel que soit l'appareil. Si possible, j'aimerais y parvenir via le générateur d'interface plutôt que du code supplémentaire.


1
La maçonnerie est un moyen recommandé de le faire via un programme. Lien: github.com/Masonry/Masonry
Itachi

1
voici le lien ... vous pouvez vérifier ... stackoverflow.com/questions/29620409/…
EI Captain v2.0

Réponses:


246

Ajoutez les contraintes suivantes

  1. Attribuez une largeur égale de bouton1 à bouton2.
  2. Attribuez un espacement horizontal entre les deux boutons.
  3. Attribuez un espace de début de bouton1 à sa vue de supervision.
  4. Attribuez un espace de fin de bouton2 à sa vue de supervision.
  5. Attribuez un espace supérieur aux deux boutons.
    Dites-moi si cela marche pour vous.

7
Excellent - cela a fonctionné pour moi. Plus précisément le point n ° 2 - ajout d'un espacement horizontal.
Scratcha

WoW !!! Qu'est-ce que tu veux dire? Cela fonctionne vraiment comme un charme, et j'ai perdu environ 3 heures! :( Dans mon cas, j'avais deux vues de largeur égale dans la super vue qui la divisait. Cependant, cela m'a demandé à la fin quelque chose comme, "Besoin de contraintes pour Y ou Hauteur" J'ai choisi de faire "Ajouter des contraintes manquantes" et cela a été résolu.
Randika Vishman

@Abubakr: Cela ne fonctionne que pour une seule taille d'écran car les deux boutons ont la même largeur.
AG

1
Fonctionne également pour plus de 2 éléments d'interface utilisateur adjacents!
siege_Perilous

1
Eh bien merci mais j'ai trouvé la solution et c'est mieux dans le code. Donnez à l'un d'entre eux un alignement central sur le parent et donnez la moitié constante de la taille du contenu, vous pouvez calculer cela dans le code ou si le contenu est statique, vous pouvez simplement mettre à jour les cadres et mettre à jour la constante. avec cela, ajoutez également la moitié de l'espacement central entre deux boutons à cet alignement central. Et donnez simplement ce début ou cette fin à l'autre bouton. Corrige ça pour moi. Et si votre contenu est intrinsèque et doit être mis à jour, appelez simplement la méthode des mises à jour de la mise en page et calculez à nouveau la valeur constante.
Amber K

80

Suivez les étapes et les captures d'écran pour une solution simple


Étape 1)

  • Pour le bouton 1: définir les contraintes: (1) interligne, (2) haut ou bas selon vos besoins, (3) hauteur


Étape 2)

  • Pour le bouton 2: définir les contraintes: (1) arrière, (2) haut ou bas selon vos besoins, (3) hauteur

Étape 3)

  • Appuyez sur Ctrl + Faites glisser du bouton 1 au bouton 2

  • Sélectionnez l' espacement horizontal


Étape 4)

  • Sélectionnez les deux boutons (à l'aide de la commande) et ajoutez des contraintes de largeur égale


PRODUCTION

J'espère que cela vous aidera :)


1
La hauteur ne doit pas être fixée. Laissez la vue décider de la hauteur du bouton en fonction de la taille de l'écran.
Kunal Kumar

@KunalKumar cette hauteur de cas est fixe. pouvez-vous s'il vous plaît me dire ce que vous voulez?
Vvk

@Vvk ... perfect bro :)
Jaywant Khedkar

18

La mise en page de la pile dans iOS9 fera le travail vraiment bien. Ajoutez une vue de pile à votre vue et configurez-la comme suit:

entrez la description de l'image ici



0

Ma solution est de

  1. Placez une petite vue au milieu de deux boutons et placez-la au centre (centre horizontal dans le conteneur et centre vertical dans le conteneur comme 0).
  2. Ajoutez de la hauteur et de la largeur à la petite vue.
  3. Ajoutez des boutons aux contraintes et donnez des contraintes d'espace horizontal à la petite vue.
  4. Donnez à la petite vue la même couleur d'arrière-plan que les boutons ou la couleur de la vue.

Remarque: voir la capture d'écran.

entrez la description de l'image ici

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.