web-dev-qa-db-fra.com

Comment ajouter un espacement égal et une largeur égale pour le bouton dans la disposition automatique iOS

Suis nouveau dans les contraintes de mise en page automatique dans Xcode. J'ai une vue du bas comme UITabBar avec 6 UIButtons. Sans contraintes, j'ai aligné ces boutons avec un espace de 5 sur chaque bouton et chaque bouton a 50 largeur. Maintenant, j'essaie de le faire en utilisant la mise en page automatique pour prendre en charge toutes les tailles d'écran. 

Dans Storyboard contraint, je règle la même largeur pour 6 boutons et en fait 60 espace entre chaque boutons. Je mets le premier bouton 0 sur le premier espace et Je mets le dernier bouton 0 à la fin des contraintes.

Je veux le buttons with equal width and flexible spaces entre les vues dans toutes les tailles de périphériques. 

Quelqu'un peut-il m'aider? Chercher de l'aide. Merci d'avance.

 enter image description here

iosswiftautolayoutnslayoutconstraint
23
Yuvaraj.M

vérifiez cette image et faites vos contraintes comme ci-dessous ... 

 enter image description here

RESULT: - aperçu dans différentes tailles 

 enter image description here

Avec Stackview (pour iOS 9.0 et versions ultérieures)

 enter image description here

REMARQUE: Si vous devez créer une application pour iOS 9 et versions ultérieures, UIStackView est une autre option pour vous.

56
EI Captain v2.0

Avec iOS 9 et Xcode 7, vous pouvez maintenant avoir le résultat attendu avec UIStackView et seulement 3 ou 4 contraintes de disposition automatique.

L’étape suivante utilise Storyboard.

  1. Créez 6 UIButtons et 5 UIViews. Alignez-les horizontalement. Donnez de la couleur à vos points de vue.

 enter image description here

  1. Sélectionnez toutes vos vues et tous vos boutons, puis cliquez sur le bouton Stack. Tous vos boutons et vues colorées seront alignés dans une UIStackView.

 enter image description here

  1. Sélectionnez votre vue de pile, accédez au panneau Utilities et sélectionnez l'élément Attributes Inspector. Là, cliquez sur le bouton Distribution et sélectionnez "Remplir équitablement".

 enter image description here

  1. Pour l'instant, la hauteur de votre vue de pile dépend de la taille du contenu intrinsèque de vos boutons. Si cela vous convient, vous pouvez passer à l'étape 5. Toutefois, si nécessaire, vous pouvez imposer une contrainte de hauteur à votre vue de pile. Sélectionnez votre vue de pile, cliquez sur le bouton Pin, cochez le bouton Height, ajoutez la valeur requise et cliquez sur le bouton Add 1 Constraint.

 enter image description here

Si vous souhaitez que la hauteur de chaque élément de votre vue pile corresponde à sa largeur, sélectionnez le premier bouton de votre vue pile, cliquez sur le bouton Pin, sélectionnez Aspect Ratio et cliquez sur le bouton Add 1 Constraint.

 enter image description here

Vous pouvez vérifier que votre contrainte de format d'image est correcte dans votre Document outline (panneau de gauche) et, si vous en avez besoin, vous pouvez la modifier avec une contrainte différente dans le Attribute inspector (panneau de droite).

 enter image description here

  1. Maintenant, il est temps de donner des contraintes externes à votre vue de pile. Sélectionnez votre vue de pile. Cliquez sur le bouton pin, assurez-vous que le bouton Constrain to margin n'est pas sélectionné et définissez les contraintes de début, de fin et inférieure à zéro. Assurez-vous que la contrainte du bas est liée à la vue de votre contrôleur de vue. Ensuite, remplacez le bouton Update Frames par "Toutes les images dans le conteneur". Vous pouvez maintenant cliquer sur le bouton Add 3 Constraints.

 enter image description here

Votre vue de pile est maintenant définie.

 enter image description here

Autre remarque:

Si vous n'avez pas besoin que la largeur de vos vues colorées corresponde à celle de vos boutons, vous pouvez créer une vue de pile avec uniquement UIButtons et simplement ajouter un espacement à votre vue de pile dans le Attribute inspector. Cependant, vous devrez trouver un moyen d'ajouter une couleur d'arrière-plan derrière votre vue de pile. Apple en parle dans UIKit Framework Reference :

UIStackView est une sous-classe d'UIView non génératrice de rendu. Ce ne est pas fournir une interface utilisateur propre. Au lieu de cela, il gère simplement le fichier position et la taille de ses vues disposées. En conséquence, certaines propriétés (comme backgroundColor) n’ont aucun effet sur la vue de pile.

J'ai construit un projet Xcode avec 4 vues de pile différentes:

  • une avec des vues colorées et s’appuyant sur la taille intrinsèque du contenu intégré de UIButtons pour sa hauteur,
  • une avec des vues colorées et avec une contrainte UIButton "égale largeur et hauteur",
  • une avec des vues colorées et avec sa propre contrainte de hauteur,
  • une sans vue colorée mais avec espacement et intégrée dans une vue colorée.

Vous pouvez trouver ce projet sur ce GitHub repo .

8
Imanou Petit

iOS 9 a une nouvelle classe UIKit appelée UIStackView. C'est très utile pour empiler des vues horizontalement ou verticalement, comme vous le souhaitez. Vous devriez consulter ce tutoriel: Raywenderlich: Tutoriel UIStackView

0
Anand V

Sélectionnez tous les boutons et dans le menu Pin de Xcode 

  1. Créez une contrainte horizontale de la vue en haut à gauche à la vue en haut à droite en sélectionnant la ligne rouge du côté droit de la vue sélectionnée, le plus proche voisin.
  2. Créez une contrainte horizontale de la vue en haut à droite à la vue en haut à gauche en sélectionnant la ligne rouge du côté gauche de la vue sélectionnée, le plus proche voisin.
  3. Créez une contrainte verticale à partir de la vue de dessus en sélectionnant la ligne rouge jusqu'au bord supérieur de la vue sélectionnée, le plus proche voisin.
  4. Cochez la case en regard de Height, Equal Widths et cliquez sur " Ajouter 22 contraintes "
0
Manisha