48 votes

AutoLayout pour que la taille des vues reste proportionnelle

J'essaie d'obtenir ce qui suit :

  • J'ai deux vues dans mon xib qui doivent rester à 20 pixels du bord (sur les côtés et en haut).
  • Les deux vues qui doivent être redimensionnées n'ont pas la même taille.
  • Ils doivent être séparés de 20 pixels
  • Leur largeur doit rester relative à la largeur de la vue parente.

J'ai lu un tutoriel sur la façon de procéder et cela fonctionne, mais le problème est que les deux vues doivent avoir la même largeur et le même axe. Widths equally ce que je ne veux pas.

Voici ce que j'ai essayé :

  • Ajout d'une contrainte d'espace de tête de 20 pixels pour la vue de gauche
  • Ajouter une contrainte d'espace supérieur de 20 pixels à la vue de gauche
  • Ajouter une contrainte d'espace supérieur de 20 pixels à la vue de droite
  • Ajouter une contrainte d'espace de queue de 20 pixels à la vue de droite
  • Ajout d'une contrainte d'espacement horizontal de 20 pixels pour les deux vues.

Le problème que je rencontre est que la vue de gauche ne se redimensionne pas et que la vue de droite remplit l'espace pour conserver l'espace horizontal de 20 pixels.

Y a-t-il un moyen de faire en sorte que les deux vues soient redimensionnées proportionnellement à l'espace qu'elles devraient occuper ?

Voici les captures d'écran de ma mise en page et de mes contraintes :

xib LayoutConstraints definitions

Merci !

EDITAR

Je reçois l'avertissement suivant lorsque j'essaie de faire pivoter mon appareil :

2012-10-11 08:59:00.435 AutolayoutTest[35672:c07] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want.
    Try this: (1) look at each constraint and try to figure out which you don't expect;
    (2) find the code that added the unwanted constraint or constraints and fix it. (Note:  
    If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x8a6b2b0 H:[UIView:0x8a6b1d0(170)]>",
    "<NSLayoutConstraint:0x8a68ad0 H:[UIView:0x8a69430(90)]>",
    "<NSLayoutConstraint:0x8a6ba40 H:[UIView:0x8a69430]-(20)-[UIView:0x8a6b1d0]>",
    "<NSLayoutConstraint:0x8a6ba00 H:[UIView:0x8a6b1d0]-(20)-|   (Names: '|':UIView:0x8a6b7e0 )>",
    "<NSLayoutConstraint:0x8a6b940 H:|-(20)-[UIView:0x8a69430]   (Names: '|':UIView:0x8a6b7e0 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x7199aa0 h=--& v=--& V:[UIView:0x8a6b7e0(568)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x8a6b2b0 H:[UIView:0x8a6b1d0(170)]>

75voto

Benjamin Points 21

Je suis probablement en retard pour trouver une solution, mais cela peut être fait. très facilement en IB .

Tout d'abord, ajoutez un UIView et l'épingler aux quatre bords de la vue supérieure.

Ensuite, ajoutez votre première sous-vue et le positionner en conséquence (ig : x = 0, y = 0, height = hauteur fixe, width = la largeur que vous souhaitez par rapport au UIView que nous avons épinglé aux quatre bords).

Sélectionnez à la fois le UIView y el première sous-vue et ajouter un Largeurs égales contrainte. Bien sûr, cela vous montrera une erreur de positionnement dans l'autolayout, mais ce n'est pas grave car ce n'est pas (encore) ce que vous voulez.

Maintenant vient le tour : sélectionnez le Largeurs égales et modifiez la contrainte Multiplicateur pour être le ratio que vous voulez (par exemple : 1:4 si vous voulez que la première sous-vue soit 1/4 de la UIView). Répétez les étapes pour la deuxième sous-vue et Tadaaaaaa !

enter image description here

10voto

Ian L Points 3822

Je suis novice en matière d'autolayout, mais je suis tombé sur votre question et j'ai pensé que ce serait un bon défi. (C'est ma mise en garde au cas où ce ne serait pas la solution idéale).

Vous devrez ajouter les contraintes de largeur dans le code. J'y suis parvenu en ajoutant tout d'abord les deux vues dans le NIB sans contraintes de largeur. Ce sont les contraintes pour la première vue (gauche) :

enter image description here

Ce sont les contraintes que j'avais pour la deuxième vue (droite) :

enter image description here

Cela laisse une contrainte supplémentaire que vous ne voulez pas sur la deuxième vue - l'espace principal entre la vue supérieure et la deuxième vue comme indiqué ci-dessous :

enter image description here

Vous ne pouvez pas supprimer cette contrainte dans l'IB, car cela donnerait lieu à une mise en page ambiguë (puisque nous n'avons pas de largeur pour les vues secondaires). Cependant, vous pouvez la supprimer dans le code. Tout d'abord, configurez une sortie pour cette dernière et connectez-la dans IB :

@property (nonatomic, strong) IBOutlet NSLayoutConstraint *view2superviewLeadingConstraint;

Ensuite, dans le contrôleur de vue viewDidLoad vous pouvez l'enlever en utilisant :

[self.view removeConstraint:self.view2superviewLeadingConstraint];

Enfin, ajoutez les contraintes de largeur. La clé ici est le paramètre multiplicateur pour indiquer le pourcentage que vous voulez que les largeurs soient basées sur la largeur de la vue supérieure. Notez également que vous devez définir les paramètres constants pour qu'ils soient égaux aux totaux de tête et de queue définis dans IB :

NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.3 constant:-20];
[self.view addConstraint:constraint1];

NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.7 constant:-40];
[self.view addConstraint:constraint2];

10voto

Yatheesha Points 1645

Cela peut être résolu en ajoutant une vue factice supplémentaire( dummyView ) dont les contraintes sont fixées à Fixed width, height et alignées sur centerX de Superview. Ensuite, ajoutez la contrainte d'espacement horizontal de la vue gauche et de la vue droite à dummyView .

enter image description hereenter image description here

9voto

Rémy Virin Points 1351

Il suffit de sélectionner le rapport d'aspect :

enter image description here

6voto

JiBB Points 181

Comme d'autres l'ont mentionné, la clé est de définir un multiplicateur sur la contrainte "Pin Widths Equally" afin que les largeurs des vues soient un multiple les unes des autres. XCode 5.1 devrait ajouter la possibilité de définir ce paramètre dans Interface Builder, mais en attendant, vous avez une autre option que de le définir dans le code. Si vous créez la contrainte "Pin Widths Equally", allez dans l'inspecteur d'identité dans le panneau Utilitaires à droite, puis recherchez "User Defined Runtime Attributes". Ajoutez un nouvel attribut avec le chemin de clé "multiplicateur", le type "nombre", et la valeur égale à votre ratio souhaité.

Multiplier set as a runtime attribute, as described above.

Ceci ne sera pas reflété dans Interface Builder, mais s'appliquera lorsque votre vue sera utilisée.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X