Dans mise en page automatique, comment puis-je avoir vue prendre la moitié de l'écran, indépendamment de l'orientation?

En mode portrait, j'ai un tableview sur le côté gauche, et une webview sur le côté droit. Ils ont tous deux prendre la moitié de l'écran. Je l'ai mise en page automatique activée.

Mais quand j'ai faites pivoter l'écran en mode paysage, la tableview la largeur d'prend moins de la moitié de la taille de l'écran, et la webview finit par prendre plus, au lieu que ce soit une répartition égale.

Pourquoi cela se produit? Comment puis-je avoir le point de vue, ne représentent que la moitié de l'écran en ce qui concerne leurs largeurs, indépendamment de l'orientation de l'écran?

Connexes: Comment puis-je réorganiser les points de vue lors de la autorotating avec mise en page automatique?

InformationsquelleAutor NYC Tech Engineer | 2014-11-12

73

La première moitié de la réponse de l'adresse de cas où l'on veut scinder la vue uniformément entre voir Une (bleu) et vue B (rouge). La deuxième moitié du cas dans lequel nous voulons avoir la vue d'Un prendre jusqu'à la moitié de l'écran, mais la vue de B n'existe pas.

Étape 1:

Configurer bleu de l'auto-contrainte de mise en page comme sur la photo. En haut, à gauche, en bas de 0 à la superview. Droit de 0 pour le rouge vue.

Étape 2:

Les mêmes, mais en miroir, les contraintes pour le rouge en vue.

Si vous avez effectué les deux premières étapes correctement, vous devriez avoir une mise en page automatique des erreurs et des avertissements:

Nous avons besoin d'un plus contrainte de corriger ces erreurs/avertissements et obtenir ce dont nous avons besoin.

Étape 3:

Gardez la touche ctrl enfoncée, cliquez et faites glisser à partir d'une vue à l'autre et sélectionnez "égalité des largeurs". Maintenant, nos points de vue conservera toujours la même largeur. L'ensemble de nos mise en page automatique des avertissements et des erreurs disparaissent, et nos points de vue sera toujours la moitié de l'écran, peu importe l'orientation ou de l'appareil.

Pour ajouter ces contraintes dans le code en utilisant le VFL, nous avons besoin de les contraintes suivantes:
```
@"H:|[blueView(==redView)][redView]|"
@"V:|[blueView]|"
@"V:|[redView]|"
```
Maintenant, supposons le cas où nous voulons une vue unique de prendre la moitié de l'écran, mais nous n'avons pas une vue de l'autre moitié. Nous pouvons toujours faire cela avec mise en page automatique, mais c'est un peu différent mis en place. Dans cet exemple, notre point de vue est bleu, et sa vue parent est vert.

Étape 1:

Ceci est similaire à l'étape 1 ci-dessus, sauf que nous n'ajoutons pas un droit de contrainte du côté de l' (cela va évidemment varier si nous voulons que notre point de vue pour prendre une autre moitié).

Étape 2:

Comme avant, nous voulons attribuer une "égalité des largeurs de" contrainte. Dans ce cas, de notre point de vue à la vue parent. Encore une fois, gardez la touche ctrl enfoncée et cliquer glisser de l'un à l'autre.

À ce stade, nous avons une disposition automatique d'avertissement. Mise en page automatique veut notre cadre pour correspondre à l'un de ses parents largeur. En cliquant sur l'avertissement et choisir "mettre à Jour les contraintes" va mettre une valeur codée en dur dans. Nous ne voulons pas de cette.

Étape 3:

Sélectionnez la vue et aller à sa taille inspecteur. Ici, nous allons être en mesure de modifier les contraintes.

Cliquez sur "Modifier" à côté de la "Largeur Égale à:" la contrainte. Nous avons besoin de changer la valeur du multiplicateur.

Nous avons besoin de changer la valeur du multiplicateur de 2.

La contrainte devient une "Largeur Proportionnelle à:", et l'ensemble de notre mise en page automatique des avertissements et des erreurs disparaissent. Maintenant notre point de vue, toujours exactement la moitié de la super vue.

Pour ajouter ces contraintes dans le code, on peut ajouter un peu de l'aide de VFL:
```
@"H:|[blueView]"
@"V:|[blueView]|"
```
Mais proportionnelle à la largeur de la contrainte ne peut pas être ajouté avec le VFL. Nous devons l'ajouter en tant que tel:
```
NSLayoutConstraint *constraint =
    [NSLayoutConstraint constraintWithItem:blueView
                                 attribute:NSLayoutAttributeWidth 
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superView
                                 attribute:NSLayoutAttributeWidth
                                multiplier:2.0
                                  constant:0.0]; 
```
- Incroyable réponse, j'aime beaucoup l'effort que vous y mettez. Maintenant que je sais à propos de l'égalité des largeurs, voulez-vous savoir comment le configurer par programmation? Serait-ce de travailler? @"[leftView][rightView][leftView(==rightView)]"
- Pour définir une égalité des largeurs de contrainte avec le VFL est aussi simple que @"[leftView(==rightView)]". Mais vous voulez également les autres contraintes. Si vous voulez: @"|[leftView(==rightView)][rightView]|" (et vous auriez encore besoin de la contrainte verticale)
- (Rappelez-vous aussi vous pouvez modifier la accepté de répondre.)
- Ça me donne de l'égalité des largeurs de deux points de vue, mais empilés les uns sur les autres, au lieu de côté par côté comme de l'original. C'est ce que tu entend par la contrainte verticale?
- Mettre un H: en face de cette chaîne. Si vous souhaitez créer ces contraintes: @"H:|[leftView(==rightView)][rightView]|" à l'horizontale et de la verticale que vous souhaitez créer: @"V:|[leftView]|" et @"V:|[rightView]|"
- Grand. J'ai été à la recherche pour le second scénario. Sur la chose n'a pas fonctionné pour moi. J'ai dû mettre le multiplicateur de 0,5 au lieu de 2. IB le temps envie de la largeur de mon demi-vue à deux fois la largeur de la vue parent. Changement à 0,5 m'a obtenu les résultats attendus.
- Grande réponse. Mais la même mise en page ne fonctionne pas dans Xcode 8. Quelqu'un a une idée de comment résoudre ce problème?
- Excellente solution, je suis en utilisant le "Multiplicateur" == 2 pour mettre en œuvre ma demande. je vous remercie.
InformationsquelleAutor nhgrif
5

Créer un UIView dans XIB ou Storyboard
1. Ensemble en haut et à gauche de contraintes
2. Définir une hauteur contrainte
3. Définir la largeur de la contrainte à l'égalité de la largeur de la super vue *Important
4. Modifier la largeur de la contrainte par la conversion au format décimal
1. Définir la virgule à la largeur que vous souhaitez (Dans mon cas, de 0,5 ou la moitié)
InformationsquelleAutor Michael
4

Se lier à la fois à la superview bords (vue de table à la pointe de la technologie, le web pour le bord de fuite) et le jeu de la contrainte pour eux d'avoir la même largeur.
- Vous aussi, vous avez besoin d'un espacement horizontal de contrainte entre l'affichage de la table et l'affichage web.
- Donc, pour l'instant, en mode portrait, ils ont une largeur de 384. Suffit de leur donner à la fois une largeur de contrainte avec cette valeur de courant?
- Pas de. Sélectionnez les deux d'entre eux et de créer de la contrainte, ce serait de dire "de Largeur Égale'. Et comme @rdelmar mentionné - assurez-vous d'avoir de contrainte entre le bord droit de la table, la vue et le bord gauche de l'affichage web
- Je pense que j'ai un espacement horizontal de contrainte entre les deux points de vue, j'ai aussi mis de la largeur des contraintes. Mais en mode paysage, la tableview prend les deux tiers de l'écran.
- Supprimer toutes les contraintes qui spécifient codé en dur largeur
InformationsquelleAutor sha

Par programmation 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
}
}

InformationsquelleAutor Fernando Cardenas

0

La contrainte d'un système ne peut pas lire dans votre esprit. Vous devez dire ce que vous voulez. La moitié est à moitié. Si vous voulez de la moitié, disons la moitié. Pour rendre une vue moitié de la largeur de son superview, lui donner une largeur de contrainte qui a un multiplicateur de .5 par rapport à son superview de largeur.
- Vous pourriez avoir laissé de côté vos 4 premières phrases du dernier on est, où l'on a donné de l'information utile.
- Cool, merci. - Je l'utiliser avec de l'information utile. "Donnez-lui une largeur de contrainte qui a un multiplicateur de 5 par rapport à son superview de largeur."
- Ouais c'est super réponse ...exactement ce que je cherchais. Malheureux sur le ton condescendant.
InformationsquelleAutor matt

Vous devez vous connecter pour publier un commentaire.

Étape 1:

Étape 2:

Étape 3:

Étape 1:

Étape 2:

Étape 3: