Contraintes de disposition programmatiques dans Xamarin.iOS

Article
07/13/2023

Ce guide présente l’utilisation des contraintes de disposition automatique iOS dans du code C# au lieu de les créer dans le Designer iOS.

La disposition automatique (également appelée « disposition adaptative ») est une approche de conception réactive. Contrairement au système de disposition transitoire, où l’emplacement de chaque élément est codé en dur à un point à l’écran, la disposition automatique concerne les relations - les positions des éléments par rapport à d’autres éléments sur l’aire de conception. Au cœur de la disposition automatique se trouve l’idée de contraintes ou de règles qui définissent le placement d’un élément ou d’un ensemble d’éléments dans le contexte d’autres éléments à l’écran. Étant donné que les éléments ne sont pas liés à une position particulière à l’écran, les contraintes permettent de créer une disposition adaptative qui s’affiche bien sur différentes tailles d’écran et orientations d’appareil.

En règle générale, lorsque vous utilisez la disposition automatique dans iOS, vous utilisez 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 Designer iOS. Pour les moments où vous devez créer vos contraintes par programmation, vous avez le choix entre trois options :

Ancres de disposition : cette API permet d’accéder aux propriétés d’ancre (telles que TopAnchor, BottomAnchor ou HeightAnchor) des éléments d’interface utilisateur contraints.
Contraintes de disposition : vous pouvez créer des contraintes directement à l’aide de la NSLayoutConstraint classe .
Langage de mise en forme visuelle : fournit une méthode d’art ASCII pour définir vos contraintes.

Les sections suivantes passent en détail sur chaque option.

Ancres de disposition

En utilisant la NSLayoutAnchor classe, vous disposez d’une interface Fluent pour créer des contraintes basées sur les propriétés d’ancre des éléments d’interface utilisateur contraintes. Par exemple, les repères de disposition supérieur et inférieur d’un contrôleur d’affichage exposent les TopAnchorpropriétés d’ancre et BottomAnchor , HeightAnchor tandis qu’une vue expose les propriétés edge, center, size et baseline.

Important

En plus de l’ensemble standard de propriétés d’ancre, les vues iOS incluent également les LayoutMarginsGuides propriétés et ReadableContentGuide . Ces propriétés exposent des UILayoutGuide objets pour travailler avec les marges de l’affichage et les guides de contenu lisibles respectivement.

Les ancres de disposition fournissent plusieurs méthodes pour créer des contraintes dans un format compact et facile à lire :

ConstraintEqualTo : définit une relation où first attribute = second attribute + [constant] avec une valeur de décalage éventuellement fournie constant .
ConstraintGreaterThanOrEqualTo : définit une relation où first attribute >= second attribute + [constant] avec une valeur de décalage éventuellement fournie constant .
ConstraintLessThanOrEqualTo : définit une relation où first attribute <= second attribute + [constant] avec une valeur de décalage éventuellement fournie constant .

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 sous la forme d’une expression linéaire. Prenons l’exemple suivant :

Qui serait converti en la ligne suivante de code C# à l’aide des 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
Item 1	PurpleView
Attribut 1	LeadingAnchor
Relation	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 nécessaires 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 qui leur sont passés. Par conséquent, les ancres de contrainte horizontale telles que LeadingAnchor ou ne TrailingAnchor peuvent être utilisées qu’avec d’autres types d’ancres horizontales et les multiplicateurs sont fournis uniquement pour dimensionner les contraintes.

Contraintes de disposition

Vous pouvez ajouter manuellement des contraintes de disposition automatique en construisant directement un NSLayoutConstraint dans le code C#. Contrairement à l’utilisation d’ancres de disposition, vous devez spécifier une valeur pour chaque paramètre, même si cela n’aura aucun effet sur la contrainte en cours de définition. 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 où l’énumération NSLayoutRelation définit la relation qui sera créée entre les attributs donnés comme 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 de chaînes d’art ASCII 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 vers la console à l’aide du langage de format visuel 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 du 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 l’exhaustivité de la visualisation, certains types de contraintes ne peuvent pas être créés avec lui (tels que les ratios).

Vous effectuez les étapes suivantes lorsque vous utilisez visual Format Language pour créer une contrainte :

Créez un NSDictionary qui contient les objets View et les repères de disposition, ainsi qu’une clé de chaîne qui sera utilisée lors de la définition des formats.
Créez éventuellement un NSDictionary qui définit un ensemble de clés et de valeurs (NSNumber) utilisés comme valeur constante pour la contrainte.
Créez la chaîne de format pour mettre en page une colonne ou une seule ligne d’éléments.
Appelez la FromVisualFormat méthode de la NSLayoutConstraint classe pour générer les contraintes.
Appelez la ActivateConstraints méthode de la NSLayoutConstraint classe pour activer et appliquer les contraintes.

Par exemple, pour créer à la fois une contrainte de début et une contrainte de fin dans le langage de format visuel, 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 visual Format Language 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 où il spécifie l’aligne AlignAllTopNSLayoutFormatOptions toutes les vues 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 la grammaire des chaînes de format visuel.

Résumé

Ce guide a présenté la création et l’utilisation des contraintes de disposition automatique en C# au lieu de les créer graphiquement dans le Designer 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, il a été présenté à l’aide du langage de format visuel pour la disposition automatique.