web-dev-qa-db-fra.com

Utilisation de la mise en page automatique en mode portrait et paysage

La disposition automatique, aussi bonne soit-elle, me rend fou de contraintes. J'ai le mode portrait conçu dans IB mais je n'arrive pas à faire fonctionner l'orientation paysage souhaitée.

layout

Notez que lorsque l'orientation change en paysage, l'espacement entre les blocs UIImageView diminue et l'alignement du texte de SAMPLE TEXT passe à droite.

Actuellement, j'ai ajouté quelques contraintes pour que cela fonctionne. Cependant, je dois garder l'espace entre les blocs UIImageView fixe, à la suite de quoi il semble à l'étroit en portrait et fin en paysage. J'ai besoin qu'il soit réparti uniformément en portrait et compressé en paysage (comme dans l'image ci-dessus). De même, actuellement mes contraintes font apparaître le texte mais il ne le garde pas au centre de l'écran et aligné à droite.

Est-ce possible avec la mise en page automatique? Si c'est le cas, comment? Aide grandement appréciée.

iosobjective-cxcodeautolayout
26
Gaurav Wadhwani

Il existe plusieurs façons d'aborder cela. Une façon consiste à enfermer vos 3 vues d'image dans une UIView. Donnez les contraintes de vues d’image du haut et du bas respectivement au haut et au bas, et donnez à celle du milieu une contrainte centerY. Donnez à cette vue englobante une hauteur et une largeur fixes et une contrainte en haut de la vue du contrôleur. Créez un IBOutlet à la contrainte de hauteur pour cette vue englobante et modifiez-la en rotation. Dans l'exemple ci-dessous, je lui ai donné une hauteur de 350 en portrait:

-(void)updateViewConstraints {
    [super updateViewConstraints];
    if (self.view.bounds.size.height < self.view.bounds.size.width) {
        self.heightCon.constant = self.view.bounds.size.height;
    }else{
        self.heightCon.constant = 350;
    }
}

En ce qui concerne l'étiquette, la manière la plus simple est de supprimer les contraintes que vous avez (bottom et centerX), et d'ajouter la fin et le centerY lors de la rotation.

12
rdelmar

Oui, cela peut être fait avec la mise en page automatique. Si vous souhaitez que l'espacement entre les vues augmente et/ou diminue en fonction de l'orientation, vous pouvez utiliser la relation Inférieur ou Égal ou Supérieur à ou Égal (au lieu de Égal) pour la contrainte, ce qui permet d'augmenter ou de réduire une distance:

enter image description here

Jouez avec cela et vous devriez pouvoir obtenir ce que vous voulez.

6
mluisbrown

Oui, il est certainement possible de le faire avec la mise en page automatique. Grâce à une série d'étapes qui, je pense, pourraient être trop longues pour être publiées en tant que réponse, vous pouvez conserver l'espacement entre vos images et conserver l'alignement du texte.

Essentiellement, vous devrez épingler un coin de chaque ImageView et supprimer certaines contraintes afin qu'il ne comprime pas automatiquement l'espacement lorsque vous modifiez l'orientation.

Explication complète sur la façon de faire cela (à peu près exactement ce que vous demandez) est expliqué dans ce tuorial . Vous pouvez le trouver au milieu de la page.

J'espère que c'est ce que vous cherchiez.

2
CaptJak