En mode autolayout, comment puis-je avoir la vue occuper la moitié de l'écran, quelle que soit l'orientation?

Question

En mode portrait, j'ai une vue de table à gauche et une vue Web à droite. Ils prennent tous les deux la moitié de l'écran. J'ai l'autolayout activé.

Mais lorsque je fais pivoter l'écran en mode paysage, la largeur de la vue table prend moins de la moitié de la taille de l'écran et la vue Web en prend plus, au lieu d'être divisée de manière égale.

Pourquoi cela arrive-t-il? Comment faire pour que les vues occupent seulement la moitié de l'écran en ce qui concerne leur largeur, quelle que soit leur orientation?

Answer 1

La première moitié de la réponse aborde le cas dans lequel nous voulons diviser la vue de manière uniforme entre la vue A (en bleu) et la vue B (en rouge). La seconde moitié abordera le cas dans lequel nous voulons que la vue A occupe la moitié de l'écran, mais la vue B n'existe pas.

Étape 1:

Configurez les contraintes de mise en page automatique de blue comme illustré. En haut, à gauche, en bas de 0 jusqu'à la vue d'ensemble. Droit de 0 à la vue rouge.

Étape 2:

Définissez les mêmes contraintes, mais en miroir, pour la vue rouge.

Si vous avez correctement exécuté les deux premières étapes, des erreurs de mise en page automatique et des avertissements devraient apparaître:

Nous avons besoin d’une contrainte supplémentaire pour corriger ces erreurs/avertissements et obtenir ce dont nous avons besoin.

Étape 3:

Tenez le contrôle, cliquez et faites glisser d'une vue à l'autre et sélectionnez "largeurs égales". Maintenant, nos vues conserveront toujours la même largeur. Tous nos avertissements et erreurs de mise en page automatiques disparaissent et nos vues ne représentent toujours que la moitié de l'écran, peu importe l'orientation ou le périphérique.

Pour ajouter ces contraintes dans le code à l'aide de VFL, nous avons besoin des contraintes suivantes:

@"H:|[blueView(==redView)][redView]|"
@"V:|[blueView]|"
@"V:|[redView]|"

---

Supposons maintenant que nous voulions qu'une seule vue occupe la moitié de l'écran, mais que nous n'ayons pas de vue pour l'autre moitié. Nous pouvons toujours le faire avec la mise en page automatique, mais la configuration est légèrement différente. Dans cet exemple, notre vue est bleue et sa vue parent est verte.

Étape 1:

Ceci est similaire à l’étape 1 ci-dessus, sauf que nous n’ajoutons pas de contrainte de droite (cela variera évidemment si nous voulons que notre point de vue prenne une moitié différente).

Étape 2:

Comme auparavant, nous voulons assigner une contrainte "à largeur égale". Dans ce cas, de notre point de vue à la vue parent. Encore une fois, maintenez le contrôle et cliquez sur glisser de l'un à l'autre.

À ce stade, nous avons un avertissement de mise en page automatique. La disposition automatique veut que notre cadre corresponde à la largeur de son parent. En cliquant sur l'avertissement et en choisissant "Mettre à jour les contraintes", une valeur codée en dur sera insérée. Nous ne le voulons pas.

Étape 3:

Sélectionnez la vue et accédez à son inspecteur de taille. Ici, nous pourrons éditer les contraintes.

Cliquez sur "Modifier" en regard de la contrainte "Equal Width to:". Nous devons changer la valeur du multiplicateur.

Nous devons changer la valeur du multiplicateur à 2.

La contrainte passe désormais à "Largeur proportionnelle:", et tous nos avertissements et erreurs de mise en page automatiques disparaissent. Maintenant, notre vue occupera toujours exactement la moitié de la super vue.

Pour ajouter ces contraintes dans le code, nous pouvons en ajouter à l'aide de VFL:

@"H:|[blueView]"
@"V:|[blueView]|"

Mais la contrainte de largeur proportionnelle ne peut pas être ajoutée avec VFL. Il faut l'ajouter comme tel:

NSLayoutConstraint *constraint =
    [NSLayoutConstraint constraintWithItem:blueView
                                 attribute:NSLayoutAttributeWidth 
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superView
                                 attribute:NSLayoutAttributeWidth
                                multiplier:2.0
                                  constant:0.0]; 

Answer 2

Créer une UIView dans XIB ou Storyboard

1. Définir les contraintes supérieure et gauche
2. Définir une contrainte de hauteur
3. Définissez la contrainte de largeur sur la largeur de la super vue * Important
4. Editez la largeur de la contrainte en la convertissant en décimal 

 

5. Réglez la décimale sur la largeur souhaitée (dans mon cas, 0,5 ou la moitié)

 

Answer 3

Liez-les tous les deux aux arêtes de la vue de dessus (vue tabulaire au bord d'attaque, vue Web au bord de fuite) et définissez la contrainte pour qu'ils aient la même largeur.

Answer 4

Le système de contrainte ne peut pas lire dans vos pensées. Tu dois dire ce que tu veux. La moitié est la moitié. Si vous voulez la moitié, dites la moitié. Pour créer une vue de la moitié de la largeur de son superview, définissez une contrainte de largeur ayant un multiplicateur de .5 par rapport à la largeur de son superview.

Answer 5

Par programme dans Swift 4:

import UIKit

class ViewController: UIViewController {

    let halfScreenViewLeft: UIView = {
        let view = UIView()
        view.backgroundColor = .blue
        return view
    }()

    let halfScreenViewRight: UIView = {
        let view = UIView()
        view.backgroundColor = .red
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(halfScreenViewLeft)
        view.addSubview(halfScreenViewRight)

        //Enable Autolayout
        halfScreenViewLeft.translatesAutoresizingMaskIntoConstraints = false

        //Place the top side of the view to the top of the screen
        halfScreenViewLeft.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

        //Place the left side of the view to the left of the screen.
        halfScreenViewLeft.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true

        //Set the width of the view. The multiplier indicates that it should be half of the screen.
        halfScreenViewLeft.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5).isActive = true

        //Set the same height as the view´s height
        halfScreenViewLeft.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true

        //We do the same for the right view

        //Enable Autolayout
        halfScreenViewRight.translatesAutoresizingMaskIntoConstraints = false

        //Place the top side of the view to the top of the screen
        halfScreenViewRight.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

        //The left position of the right view depends on the position of the right side of the left view

        halfScreenViewRight.leadingAnchor.constraint(equalTo: halfScreenViewLeft.trailingAnchor).isActive = true

        //Place the right side of the view to the right of the screen.
        halfScreenViewRight.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true

        //Set the same height as the view´s height
        halfScreenViewRight.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true


    }

}