Contraintes de disposition programmatiques dans Xamarin.iOS
Ce guide présente l’utilisation des contraintes de disposition automatique iOS dans le code C# au lieu de les créer dans le Concepteur iOS.
La disposition automatique (également appelée « disposition adaptative ») est une approche de conception réactive. Contrairement au système de disposition transitionnelle, où l’emplacement de chaque élément est codé en dur à un point sur l’écran, la disposition automatique concerne les relations : les positions des éléments par rapport à d’autres éléments de l’aire de conception. Au cœur de la disposition automatique est l’idée de contraintes ou de règles qui définissent le positionnement d’un élément ou d’un ensemble d’éléments dans le contexte d’autres éléments sur l’écran. Étant donné que les éléments ne sont pas liés à une position particulière sur l’écran, les contraintes permettent de créer une disposition adaptative qui semble correcte sur différentes tailles d’écran et orientations de l’appareil.
En règle générale, lorsque vous utilisez la disposition automatique dans iOS, vous allez utiliser le Générateur d’interface de Xcode pour placer graphiquement des contraintes de disposition sur vos éléments d’interface utilisateur. Toutefois, il peut arriver que vous deviez créer et appliquer des contraintes dans le code C#. Par exemple, lors de l’utilisation d’éléments d’interface utilisateur créés dynamiquement ajoutés à un UIView.
Ce guide vous montre comment créer et utiliser des contraintes à l’aide de code C# au lieu de les créer graphiquement dans le Générateur d’interface de Xcode.
Création de contraintes par programmation
Comme indiqué ci-dessus, vous allez généralement utiliser des contraintes de disposition automatique dans le concepteur iOS. Pour ces moments où vous devez créer vos contraintes par programmation, vous avez trois options à choisir :
- Ancres de disposition : cette API permet d’accéder aux propriétés d’ancrage (par
TopAnchorexemple,BottomAnchorouHeightAnchor) des éléments d’interface utilisateur contraints. - Contraintes de disposition : vous pouvez créer des contraintes directement à l’aide de la
NSLayoutConstraintclasse. - Langage de mise en forme visuelle : fournit une méthode ascii telle que la méthode pour définir vos contraintes.
Les sections suivantes passent en détail à chaque option.
Ancres de disposition
À l’aide de la NSLayoutAnchor classe, vous disposez d’une interface Fluent pour créer des contraintes en fonction des propriétés d’ancrage des éléments d’interface utilisateur en cours de contrainte. Par exemple, les repères de disposition supérieure et inférieure d’un contrôleur de vue exposent les TopAnchorpropriétés d’ancrage, BottomAnchor tandis HeightAnchor qu’une vue expose les propriétés de périphérie, de centre, de taille et de base.
Important
Outre l’ensemble standard de propriétés d’ancre, les vues iOS incluent également les propriétés et ReadableContentGuide les LayoutMarginsGuides propriétés. Ces propriétés exposent respectivement UILayoutGuide des objets pour utiliser les marges de la vue et les repères de contenu lisibles.
Les ancres de disposition fournissent plusieurs méthodes pour créer des contraintes dans un format facile à lire et compact :
- ConstraintEqualTo : définit une relation où
first attribute = second attribute + [constant]avec une valeur de décalage éventuellement fournieconstant. - ConstraintGreaterThanOrEqualTo : définit une relation où
first attribute >= second attribute + [constant]avec une valeur de décalage éventuellement fournieconstant. - ConstraintLessThanOrEqualTo : définit une relation où
first attribute <= second attribute + [constant]avec une valeur de décalage éventuellement fournieconstant.
Par exemple :
// Get the parent view's layout
var margins = View.LayoutMarginsGuide;
// Pin the leading edge of the view to the margin
OrangeView.LeadingAnchor.ConstraintEqualTo (margins.LeadingAnchor).Active = true;
// Pin the trailing edge of the view to the margin
OrangeView.TrailingAnchor.ConstraintEqualTo (margins.TrailingAnchor).Active = true;
// Give the view a 1:2 aspect ratio
OrangeView.HeightAnchor.ConstraintEqualTo (OrangeView.WidthAnchor, 2.0f);
Une contrainte de disposition classique peut être exprimée simplement en tant qu’expression linéaire. Prenons l’exemple suivant :
Ce qui serait converti en ligne de code C# suivante à l’aide d’ancres de disposition :
PurpleView.LeadingAnchor.ConstraintEqualTo (OrangeView.TrailingAnchor, 10).Active = true;
Où les parties du code C# correspondent aux parties données de l’équation comme suit :
| Équation | Code |
|---|---|
| Élément 1 | PurpleView |
| Attribut 1 | LeadingAnchor |
| Relationship | ConstraintEqualTo |
| Multiplicateur | Par défaut, la valeur 1.0 n’est donc pas spécifiée |
| Élément 2 | OrangeView |
| Attribut 2 | TrailingAnchor |
| Constant | 10.0 |
En plus de fournir uniquement les paramètres requis pour résoudre une équation de contrainte de disposition donnée, chacune des méthodes Layout Anchor applique la sécurité de type des paramètres passés à eux. Par conséquent, les ancres de contrainte horizontale telles que LeadingAnchor ou TrailingAnchor ne peuvent être utilisées qu’avec d’autres types d’ancres et multiplicateurs horizontaux sont fournies uniquement aux contraintes de taille.
Contraintes de disposition
Vous pouvez ajouter manuellement des contraintes de disposition automatique en construisant directement un NSLayoutConstraint code C#. Contrairement à l’utilisation des ancres de disposition, vous devez spécifier une valeur pour chaque paramètre, même s’il n’aura aucun effet sur la contrainte définie. Par conséquent, vous allez finir par produire une quantité considérable de code difficile à lire et réutilisable. Par exemple :
//// Pin the leading edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.LeadingMargin, 1.0f, 0.0f).Active = true;
//// Pin the trailing edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.TrailingMargin, 1.0f, 0.0f).Active = true;
//// Give the view a 1:2 aspect ratio
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, OrangeView, NSLayoutAttribute.Width, 2.0f, 0.0f).Active = true;
Où l’énumération NSLayoutAttribute définit la valeur des marges de la vue et correspond aux LayoutMarginsGuide propriétés telles que Left, RightTop et Bottom l’énumération NSLayoutRelation définit la relation qui sera créée entre les attributs donnés en tant que Equal, LessThanOrEqual ou GreaterThanOrEqual.
Contrairement à l’API Layout Anchor, les NSLayoutConstraint méthodes de création ne mettent pas en évidence les aspects importants d’une contrainte particulière et aucune vérification du temps de compilation n’est effectuée sur la contrainte. Par conséquent, il est facile de construire une contrainte non valide qui lève une exception au moment de l’exécution.
Langage de format visuel
Le langage de format visuel vous permet de définir des contraintes à l’aide d’images ASCII telles que des chaînes qui fournissent une représentation visuelle de la contrainte en cours de création. Cela présente les avantages et inconvénients suivants :
- Le langage de format visuel applique uniquement la création de contraintes valides.
- La disposition automatique génère des contraintes sur la console à l’aide du langage Visual Format afin que les messages de débogage ressemblent au code utilisé pour créer la contrainte.
- Le langage de format visuel vous permet de créer plusieurs contraintes en même temps avec une expression très compacte.
- Étant donné qu’il n’existe aucune validation côté compilation des chaînes de langage visual Format, les problèmes ne peuvent être détectés qu’au moment de l’exécution.
- Étant donné que le langage de format visuel met l’accent sur la visualisation sur l’exhaustivité, certains types de contraintes ne peuvent pas être créés avec celui-ci (tels que les ratios).
Vous effectuez les étapes suivantes lors de l’utilisation du langage Visual Format pour créer une contrainte :
- Créez un
NSDictionaryélément qui contient les objets View et les repères de disposition et une clé de chaîne qui sera utilisée lors de la définition des formats. - Si vous le souhaitez, créez un
NSDictionaryjeu de clés et de valeurs (NSNumber) utilisé comme valeur constante pour la contrainte. - Créez la chaîne de format pour mettre en page une seule colonne ou ligne d’éléments.
- Appelez la
FromVisualFormatméthode de laNSLayoutConstraintclasse pour générer les contraintes. - Appelez la
ActivateConstraintsméthode de laNSLayoutConstraintclasse pour activer et appliquer les contraintes.
Par exemple, pour créer une contrainte de début et de fin dans le langage Visual Format, vous pouvez utiliser les éléments suivants :
// Get views being constrained
var views = new NSMutableDictionary ();
views.Add (new NSString ("orangeView"), OrangeView);
// Define format and assemble constraints
var format = "|-[orangeView]-|";
var constraints = NSLayoutConstraint.FromVisualFormat (format, NSLayoutFormatOptions.AlignAllTop, null, views);
// Apply constraints
NSLayoutConstraint.ActivateConstraints (constraints);
Étant donné que le langage de format visuel crée toujours des contraintes de point zéro attachées aux marges de la vue parente lors de l’utilisation de l’espacement par défaut, ce code produit des résultats identiques aux exemples présentés ci-dessus.
Pour les conceptions d’interface utilisateur plus complexes, telles que plusieurs vues enfants sur une seule ligne, le langage de format visuel spécifie à la fois l’espacement horizontal et l’alignement vertical. Comme dans l’exemple ci-dessus, il spécifie l’alignement AlignAllTop NSLayoutFormatOptions de tous les affichages d’une ligne ou d’une colonne sur leurs sommets.
Consultez l’annexe du langage de format visuel d’Apple pour obtenir des exemples de spécification de contraintes courantes et de grammaire de chaîne de format visuel.
Résumé
Ce guide a présenté la création et l’utilisation de contraintes de disposition automatique en C# plutôt que de les créer graphiquement dans le Concepteur iOS. Tout d’abord, il a examiné l’utilisation des ancres de disposition (NSLayoutAnchor) pour gérer la disposition automatique. Ensuite, il a montré comment utiliser les contraintes de disposition (NSLayoutConstraint). Enfin, elle s’est présentée à l’aide du langage visual format pour la disposition automatique.