web-dev-qa-db-fra.com

Création d'une disposition iOS basée sur un pourcentage

J'essaie de reproduire une mise en page que j'ai actuellement dans une Android, mais je ne sais pas comment procéder dans iOS, en particulier en raison de la taille de l'iPhone 5.

Je sais comment expliquer cela en termes "Android", mais j'essaie depuis quelques jours de le faire dans iOS, mais je n'arrive pas à le faire fonctionner.

Meilleure façon de l'expliquer:

  1. Je veux deux dispositions. La disposition du haut doit représenter 40% et celle du bas, 60%.
  2. Dans la disposition supérieure, ils doivent être constitués de trois boutons qui remplissent tout l'espace possible (essentiellement 1/3 de l'espace)
  3. Dans la disposition du bas, je veux une imageView, puis une textView en plus de cela.

Ceci est une maquette de peinture. Est-ce possible de le faire dans iOS? Je pense que les mises en page sont beaucoup plus difficiles à créer qu'Android.

enter image description here

iosinterface-builderiphone-5
48
EGHDK

À l'aide de Xcode 6.0, vous pouvez désormais spécifier une largeur ou une hauteur proportionnelle dans Interface Builder. Étapes pour le pourcentage de hauteur à partir de la vue d'ensemble:

Pendant que la vue enfant et sa vue d'ensemble sont sélectionnées, ajoutez une contrainte de "hauteur égale" (ou "largeur égale" si vous souhaitez avoir une largeur proportionnelle).

enter image description here

Modifiez ensuite le "multiplicateur" de la contrainte que vous venez d'ajouter à la proportion dont vous avez besoin. Par exemple, pour 50%, remplacez-le par 2.

Si vous souhaitez spécifier la vue intérieure en pourcentage de la vue d'ensemble, vous pouvez inverser les éléments de la contrainte:

enter image description here

Vous pouvez maintenant utiliser un multiplicateur de 0,5 (ou toute autre proportion dont vous avez besoin):

enter image description here

Dans votre cas spécifique, vous pouvez définir une contrainte de "hauteur égale" entre les 2 vues enfant et modifier le multiplicateur à 1,5 (le bas étant 1,5 de la taille du haut) ou 0,6667 si les éléments sont inversés.

71
GK100

Contrairement aux autres réponses, je pense que vous devriez au moins envisager le système de mise en page automatique. Il a été créé pour faciliter la création de mises en page prévisibles comme celle que vous avez décrite. La mise en page automatique est régie par les contraintes que vous placez sur les vues dans la mise en page. Vous pouvez créer ces contraintes visuellement ou par programme. Visuellement, votre première vue ressemblerait à ceci:

visual constraints

Les lignes bleues que vous voyez là sont un certain nombre de contraintes qui spécifient l'espacement inter-bouton, l'espace autour des boutons et les hauteurs et largeurs des boutons. Vous pouvez voir quelques contraintes qui ont un = sur eux - J'ai sélectionné les trois boutons et leur ai donné une contrainte de "hauteur égale".

Il y a une belle syntaxe de format visuel qui vous permet de décrire les contraintes comme des chaînes. Prenez une minute pour regarder le document lié - cela ne prendra pas beaucoup plus de temps que d'en apprendre suffisamment pour que vous puissiez lire les chaînes. Par exemple, votre disposition supérieure peut être spécifiée comme ceci:

V:[button1]-[button2(==button1)]-[button3(==button1)]

La parenthèse ==button1 indique au système de mise en page de faire button2 et button3 la même hauteur que button1. Le - indique que l'espacement standard doit être utilisé entre les boutons; vous pouvez spécifier un espacement différent si vous le souhaitez. Pour un espacement de 10 points, procédez comme suit:

V:|-10-[button1]-10-[button2(==button1)]-10-[button3(==button1)]-10-|

Une fois que vous avez une telle chaîne, vous pouvez la transformer en contrainte en utilisant la méthode: +[NSLayoutConstraint constraintsWithVisualFormat:options:metrics:views:]

Certaines contraintes ne peuvent pas être spécifiées visuellement ou avec les chaînes décrites ci-dessus. Parmi ceux-ci, les plus importants sont ceux où vous souhaitez définir une relation constante (mais inégale) entre deux vues, comme avec vos dispositions supérieure et inférieure. Vous voulez que l'un d'eux occupe 40% de l'espace vertical disponible et l'autre 60%. Pour ce faire, utilisez la méthode: +[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:]. Par exemple:

NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:bottomView
                                                     attribute:NSLayoutAttributeHeight
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:topView
                                                    multiplier:1.5
                                                      constant:0];

Cela vous donne une contrainte qui définit la hauteur de bottomView à 1,5 fois la hauteur de topView (ce que vous voulez, car 60/40 = 1,5).

Si vous créez des contraintes par programme, vous pouvez les ajouter à la vue appropriée lorsque vous créez (ou chargez) la hiérarchie de vues. Votre contrôleur de vue -viewDidLoad la méthode est un bon endroit pour le faire.

37
Caleb

Je ne sais pas comment utiliser la mise en page automatique car je ne l'utilise pas, mais dans le code sans, vous pouvez créer deux UIViews et définir leurs cadres sur:

CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height * 0.4f);
CGRectMake(0, self.view.frame.size.height * 0.4f, self.view.frame.size.width, self.view.frame.size.width * 0.6f);

Et puis dans la vue de dessus, vous pouvez ajouter les boutons avec des cadres (en supposant que la vue s'appelle view1):

CGRectmake(0, 0, self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
CGRectmake(0, view1.frame.size.height * (1.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
CGRectmake(0, view1.frame.size.height * (2.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
2
Jsdodgers

Vous devez ajouter quelques contraintes pour que cela fonctionne. Voici donc une brève description de ce dont vous avez besoin:

  1. Vous aurez besoin de contraintes d'espacement horizontal. Un si pour la vue de dessus, car il n'a aucune distance vers le haut. Un autre pour la vue de dessous, car sa distance au fond est nulle. Une contrainte de plus entre les deux vues, car elles ont également un espacement nul entre elles.

  2. Le même principe sera appliqué aux boutons à l'intérieur de la vue de dessus. Placez vos boutons avec la taille correcte dans la vue de dessus et ajoutez des contraintes similaires, mais vous avez maintenant trois éléments (au lieu de deux). Donc contraintes pour un espacement nul en haut, en bas et entre les boutons.

Lorsque vous ajoutez des composants à votre vue, cela crée pour vous quelques contraintes. En ajoutant un un en haut et l'autre en bas, cela créera à la fois un espacement vers le haut et un espacement entre eux. Pour les éditer, il suffit d'aller dans l'inspecteur, cinquième onglet (règle) et vous verrez la liste des contraintes. Enfin, vous voudrez peut-être essayer le menu des contraintes (je ne sais pas s'il y a un nom bien connu pour cela). Il se trouve dans le coin inférieur droit du canevas d'Interface Builder. Voir l'image:

enter image description here

S'il vous plaît, faites-moi savoir si vous avez besoin d'aide supplémentaire.

1
rocir

Cela peut être fait automatiquement lors de l'utilisation de Storyboards (vous devrez peut-être modifier un paramètre ou deux ici et là). Lorsque vous créez votre interface graphique, vous pouvez basculer entre les tailles d'écran (3,5 et 4 pouces) pour vous assurer qu'elle sera bonne sur les deux. Voir la réponse à cette question .

Vous pouvez également voir ce tutoriel . Cela devrait vous donner une idée sur la façon de travailler avec les dispositions de l'interface graphique.

0
CaptJak