Share
Auto Layout est disponible depuis quelques années maintenant, mais avec les iPhone 6 et 6 Plus, il est devenu une nécessité pour les projets. Bien qu’il n’ait pas toujours été facile à utiliser, Xcode a régulièrement constaté des améliorations dans Interface Builder pour simplifier l’intégration de la disposition automatique. Dans ce didacticiel, vous apprendrez à utiliser le langage Visual Format à l’aide de Swift pour créer des contraintes de mise en forme automatique dans le code..
Ce tutoriel suppose que vous maîtrisiez la mise en page automatique. Si vous êtes nouvelle mise en page automatique, alors je vous encourage à lire l'introduction de Joyce Echessa en premier.
le Langage de format visuel est un langage déclaratif utilisé pour définir les contraintes de mise en forme automatique pour les vues. Sa syntaxe est expressive et facile à comprendre lorsque vous parcourez du code. Les contraintes prévues doivent être immédiatement claires à la lecture d'une instruction Visual Format Language et elles se déroulent comme une phrase..
Les contraintes de disposition automatique avec différentes priorités, dispositions verticales, espacement et dimensions peuvent être créées à l'aide de la syntaxe Visual Format Language. Il est défini à l'intérieur d'une variable de chaîne, puis transmis aux méthodes de niveau classe. contraintesWithVisualFormat: options: métriques: vues: et
constraintWithItem: attribut: relatedBy: toItem: attribut: multiplier: constant: du NSLayoutConstraint classe.
Le langage de formatage visuel peut être particulièrement utile lorsque Interface Builder n'est pas une option permettant d'ajouter des contraintes de mise en forme automatique, par exemple lorsqu'une partie de l'interface utilisateur de votre application doit être créée par programme..
Créons un nouveau projet dans Xcode pour voir comment le langage Visual Format est utilisé et comment vos projets peuvent en tirer parti.
Ouvrez Xcode et sélectionnez Nouveau> Projet… du Fichier menu. Choisir Application à vue unique de la liste des Application iOS modèles et cliquez Suivant.
Ensuite, nommez votre projet et entrez le nom et l'identifiant de votre organisation. Choisir Universel du Dispositifs liste, cliquez Suivant, et choisissez un emplacement pour enregistrer le projet. Sélectionner Rapide comme langage de programmation.
Pour commencer, créez trois variables de type UIView. Ouvrir ViewController.swift et ajoutez le code suivant au-dessus du viewDidLoad méthode:
var vwBlue: UIView! var vwRed: UIView! var vwGreen: UIView!
Créez une fonction appelée initViews au bas du contrôleur de vue vide comme son type de retour. Cette fonction initialisera les vues et les ajoutera à la hiérarchie des vues. Assurez-vous d'appeler cette fonction dans viewDidLoad après avoir appelé la superclasse viewDidLoad méthode.
func initViews () -> Void // Initialize vwRed = UIView () vwBlue = UIView () vwGreen = UIView () // Préparer la mise en page automatique vwRed. / Coloring vwRed.backgroundColor = UIColor.redColor () vwBlue.backgroundColor = UIColor.blueColor () vwGreen.backgroundColor = UIColor.greenColor () // Ajoutez-les à la vue self.view.addSubview (vwRed) self.view.addSubview (vwRed) vwBlue) self.view.addSubview (vwGreen)
Lors de l'utilisation de la disposition automatique sur les vues créées dans le code, il convient de tenir compte de certaines mises en garde. Le premier est lié à la valeur de la propriété traduitAutoresizingMaskIntoConstraints. Cette propriété est vrai par défaut, ce qui signifie que les contraintes de disposition automatique seront créées en fonction de la vue. masque autorisant. Nous voulons que la vue respecte les contraintes de mise en page automatique que nous allons ajouter. Cette propriété doit donc être définie sur faux.
La deuxième chose à garder à l'esprit est le cycle de vie de la vue. Avant que les contraintes de disposition automatique puissent être ajoutées à une vue, elle doit être ajoutée à superview. Sinon, une exception d'exécution est levée. Rappelez-vous que la disposition automatique définit l'emplacement où les vues sont positionnées en fonction des relations. Si une vue ne possède pas de vue d'ensemble, le système d'exploitation n'a pas de point de référence permettant de relier les contraintes de disposition automatique à.
Commençons par un exemple simple du langage de formatage visuel. Pour la vue rouge, vwRed, nous allons ajouter des contraintes de disposition automatique qui lui donnent la même taille que son aperçu. Ceci est utile dans le cas où vous ajoutez une image d'arrière-plan..
Avant que le langage de formatage visuel puisse être utilisé, toutes les vues dont nous avons besoin doivent être référencées dans un dictionnaire. Voici comment les vues seront identifiées par le langage de formatage visuel.
Créez une fonction appelée createConstraints avec un vide Type de retour au bas de la classe du contrôleur de vue. Ne vous inquiétez pas de la syntaxe. Nous allons revoir la mise en œuvre de la createConstraints fonctionner dans un moment.
Accentsconagua
func createConstraints () -> Void // Vues pour ajouter des contraintes afin de laisser views = Dictionary (dictionaryLiteral: ("red", vwRed), ("blue", vwBlue), ("green", vwGreen)) // Contraintes horizontales let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | [red] |", options: nil, métriques: nil, views: views) self.view.addConstraints (horizontalConstraints) // Contraintes verticales laissé à verticalConstraints = NSLayoutConstraint.const. : | [red] | ", options: nil, métriques: nil, vues: vues) self.view.addConstraints (verticalConstraints)Appelez cette fonction à la fin de la initViews fonction que nous avons créée plus tôt. Construisez et exécutez le projet en appuyant sur Commande + R ou en cliquant sur le bouton de lecture en haut à gauche. Le simulateur iOS s'exécutera en affichant la vue rouge occupant tout l'écran comme prévu..
Lorsque vous utilisez le langage de format visuel, les contraintes de disposition automatique sont définies horizontalement ou verticalement. Vous pouvez également définir la hauteur ou la largeur d'une vue lorsque vous déclarez une contrainte verticale et horizontale, respectivement. Regardons de plus près la première chaîne que nous avons utilisée pour créer la contrainte horizontale.
"H: | [rouge] |"
Tout d'abord, nous identifions qu'il s'agira d'une contrainte horizontale en commençant la chaîne par la lettre H. Horizontal est la valeur par défaut, mais il est judicieux de l'inclure pour le rendre plus évident. La direction de la contrainte est suivie de deux points.
le | ou le symbole de pipe symbolise la vue d'ensemble de la vue. Pour ajouter un espace entre deux éléments, le - ou un tiret est utilisé et des valeurs entières peuvent être placées entre eux pour créer un espacement fixe ou variable. Les vues sont référencées par les clés fournies dans le dictionnaire passé à contraintesWithVisualFormat. Chaque vue est entourée de crochets.
Remarquez comment toute la chaîne correspond visuellement à l'image du simulateur. Il est écrit comme une phrase qui se lirait comme suit: "Horizontalement, la vue rouge doit s’étendre sur toute la largeur de son aperçu sans remplissage."
Maintenant que vous avez une compréhension de base de la syntaxe, nous allons éditer le createConstraints fonction pour ajouter des contraintes de mise en page automatique à deux vues.
dans le createConstraints fonction, éditer le contraintes horizontales variable comme indiqué ci-dessous.
// Les contraintes horizontales laissent horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [red (> = 100,<=200)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraints)Cet extrait de code montre vraiment la flexibilité du langage de formatage visuel. L'instruction ci-dessus crée un certain nombre de contraintes de mise en forme automatique pour nous. À côté du nom de la vue, les tailles horizontales sont définies entre parenthèses. Pour la vue rouge, la taille doit être supérieure ou égale à 100 points, mais inférieure ou égale à 200 points..
La vue bleue indique qu'elle doit avoir la même taille horizontale que la vue rouge en utilisant == rouge entre parenthèses. C'est un moyen pratique de spécifier que plusieurs vues doivent avoir la même taille. Générez et exécutez l'application dans le simulateur iOS. Le résultat devrait ressembler à la capture d'écran ci-dessous.
Avec l'application exécutée dans le simulateur iOS, appuyez sur Commande + flèche gauche modifier l'orientation du simulateur iOS en paysage. Tandis que l'application fonctionne toujours correctement, un avertissement est apparu dans la console de Xcode. L'avertissement nous indique que certaines contraintes de disposition automatique n'ont pas pu être satisfaites. Bien que cela ne plante pas votre application, cela peut entraîner des résultats inattendus dans l'interface utilisateur de votre application..
Cela est dû au fait que les deux vues que nous avons créées ne peuvent pas avoir une largeur de 200 points et ne sont pas espacées entre elles lorsque le périphérique ou le simulateur iOS est en mode paysage. La mise en page automatique résout ces types de scénarios à l'aide de priorités. Le langage de format visuel vous permet de définir des priorités à l'aide du @ symbole. Modifier le contraintes horizontales variable à lire comme ceci:
// Les contraintes horizontales laissent horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [red (> = 100,<=200@20)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views)Parce que les vues rouge et bleue ont maintenant une priorité basse sur leur contrainte de largeur, indiquée par @ 20, le système de mise en page automatique supprimera ces contraintes et leur fournira la valeur correcte au moment de l'exécution. Exécutez à nouveau l'application et modifiez l'orientation en paysage. Les vues occupent maintenant l'espace supplémentaire et Xcode ne génère aucun avertissement..
Ensuite, nous allons créer des contraintes pour la vue verte. Mettre à jour la mise en œuvre de la createConstraints fonctionne comme indiqué ci-dessous.
func createConstraints () -> Void // Vues pour ajouter des contraintes afin de laisser views = Dictionary (dictionaryLiteral: ("red", vwRed), ("blue", vwBlue), ("green", vwGreen)) // Contraintes horizontales let horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [rouge (> = 100,<=200@20)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraintsRedBlue) let horizontalConstraintsGreen = NSLayoutConstraint.constraintsWithVisualFormat("H:|[green]|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraintsGreen) //Vertical constraints let verticalConstraintsRed = NSLayoutConstraint.constraintsWithVisualFormat("V:|[red]-10-[green(40)]|", options: nil, metrics: nil, views: views) self.view.addConstraints(verticalConstraintsRed) let verticalConstraintsBlue = NSLayoutConstraint.constraintsWithVisualFormat("V:|[blue]-10-[green(40)]|", options: nil, metrics: nil, views: views) self.view.addConstraints(verticalConstraintsBlue) Parce que le horizontalConstraintsGreen La contrainte ne définit pas une largeur ou un espacement spécifique par rapport à sa vue d'ensemble, elle s'étendra sur toute la longueur. La contrainte verticale garantit une hauteur de 40 points avec un espacement de 10 points entre les vues rouge et bleue..
Si vous exécutez l'application une fois de plus, la vue verte s'étend sur toute la largeur de l'écran et les vues rouge et bleue restent au-dessus de ce qu'elles étaient auparavant. Lorsque le simulateur iOS est pivoté en mode paysage, les vues conservent leur position et sont redimensionnées correctement..
Pour que tout soit plus lisible, nous utiliserons un dictionnaire de métriques dans les déclarations de contraintes. Créez un dictionnaire comme indiqué ci-dessous, immédiatement après la déclaration du vues dictionnaire.
let metrics = Dictionary (dictionaryLiteral: ("spacing", 10), ("lowWidth", 100), ("highWidth", 200), ("priorité", 20), ("redBlueSpacing", 0), ("greenHeight ", 40))Maintenant, au lieu d'utiliser des valeurs codées en dur, nous pouvons utiliser les valeurs de métrique dictionnaire, ce qui rend les déclarations des contraintes beaucoup plus lisibles. Modifier le createConstraints fonctionner une dernière fois en utilisant le nouveau métrique dictionnaire.
func createConstraints () -> Void // Views pour ajouter des contraintes afin de laisser views = Dictionary (dictionaryLiteral: ("red", vwRed), ("blue", vwBlue), ("green", vwGreen)) // Metrics for Format visuel chaîne let metrics = Dictionary (dictionaryLiteral: ("espacement", 10), ("lowWidth", 100), ("highWidth", 200), ("priorité", 20), ("redBlueSpacing", 0), ("greenHeight", 40)) // Les contraintes horizontales laissent horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -spacing- [red (> = lowWidth,<=highWidth@priority)]-redBlueSpacing-[blue(==red)]-spacing-|", options: nil, metrics: metrics, views: views) self.view.addConstraints(horizontalConstraintsRedBlue) let horizontalConstraintsGreen = NSLayoutConstraint.constraintsWithVisualFormat("H:|[green]|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraintsGreen) //Vertical constraints let verticalConstraintsRed = NSLayoutConstraint.constraintsWithVisualFormat("V:|[red]-spacing-[green(greenHeight)]|", options: nil, metrics: metrics, views: views) self.view.addConstraints(verticalConstraintsRed) let verticalConstraintsBlue = NSLayoutConstraint.constraintsWithVisualFormat("V:|[blue]-spacing-[green(greenHeight)]|", options: nil, metrics: metrics, views: views) self.view.addConstraints(verticalConstraintsBlue) Vous vous demandez peut-être pourquoi la hauteur de la vue verte a été définie deux fois. Cela est dû au fait que le langage de formatage visuel fonctionne en lignes et en colonnes. Lorsque vous utilisez le langage de format visuel, pensez à ajouter des contraintes de gauche à droite sur une "ligne" de la vue pour les contraintes horizontales. Pour les contraintes verticales, vous devez penser en termes de colonnes.
La plupart des contraintes de mise en page automatique que vous utiliserez peuvent être exprimées avec le langage de format visuel. Il y en a quelques-uns qui ne peuvent pas, cependant. Par exemple, une contrainte de format d'image fixe ne peut pas être créée à l'aide du langage de formatage visuel. Cela ne peut pas être accompli avec la syntaxe Visual Format Language, car la chaîne suivante ne peut pas être analysée:
H: | imageView.width = 2 * imageView.height |
Vous pouvez toujours utiliser la disposition automatique dans votre code pour obtenir ces types de contraintes à l'aide de la méthode traditionnelle. constraintWithItem méthode.
Le langage de formatage visuel peut être très utile lorsque vous devez créer des contraintes de mise en forme automatique dans le code. Au lieu de créer des contraintes une à une, le langage de formatage visuel vous permet de créer un certain nombre de contraintes avec une seule ligne de code..
Avant que la disposition automatique ne soit disponible pour les développeurs, il était très fastidieux de savoir comment redimensionner les vues pour différentes catégories de périphériques. Avec la mise en page automatique et le langage de format visuel, cela est maintenant plus intuitif, ce qui facilite la maintenance des interfaces utilisateur sur tous les appareils..
