Options de disposition dans Xamarin.iOS

Il existe deux mécanismes différents pour contrôler la disposition lorsqu’une vue est redimensionnée ou pivotée :

• Redimensionnement automatique : l’inspecteur de redimensionnement automatique dans le concepteur permet de définir les AutoresizingMask propriétés. Cela permet à un contrôle d’ancrer les bords de leur conteneur et/ou de corriger leur taille. Le redimensionnement automatique fonctionne dans toutes les versions d’iOS. Cette procédure est décrite plus en détail ci-dessous
• Disposition automatique : fonctionnalité introduite dans iOS 6 qui permet un contrôle affiné sur les relations des contrôles d’interface utilisateur. Elle permet de contrôler les positions des éléments par rapport à d’autres éléments sur l’aire de conception. Cette rubrique est abordée plus en détail dans la disposition automatique avec le guide du concepteur Xamarin iOS.

Redimensionnement automatique

Lorsqu’un utilisateur redimensionne une fenêtre, par exemple lorsque l’appareil est pivoté et que l’orientation change, le système redimensionne automatiquement les vues à l’intérieur de cette fenêtre en fonction de leurs règles de redimensionnement automatique. Ces règles peuvent être définies en C# à l’aide de la AutoresizingMask propriété du panneau Propriétés du concepteur iOS, comme illustré ci-dessous :UIView

Lorsqu’un contrôle est sélectionné, cela vous permet de spécifier manuellement l’emplacement et les dimensions du contrôle, ainsi que de choisir le comportement de redimensionnement automatique. Comme illustré dans la capture d’écran ci-dessous, nous pouvons utiliser les ressorts et les struts dans le contrôle de redimensionnement automatique pour définir la relation de la vue sélectionnée avec son parent :

L’ajustement d’un ressort entraîne le redimensionnement de la vue en fonction de la largeur ou de la hauteur de son affichage parent. L’ajustement d’un strut permet à la vue de maintenir une distance constante entre elle-même et sa vue parente, sur ce bord particulier.

Ces paramètres peuvent également être définis dans le code :

textfield1.Frame = new RectangleF(15, 277, 79, 27);
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleBottomMargin;

Pour tester les paramètres de redimensionnement automatique, activez différentes orientations d’appareil prises en charge dans les options du projet :

Dans le code-behind, nous pouvons utiliser le code suivant, ce qui entraîne le redimensionnement horizontal des deux contrôles de texte :

textview1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
imageview1.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleLeftMargin;

Nous pouvons également ajuster les contrôles à l’aide du Concepteur. La sélection des struts comme indiqué ci-dessous entraîne l’alignement de l’image sans être rognée en bas de la vue :

Ces captures d’écran montrent comment les contrôles redimensionnent ou se repositionnent quand l’écran est pivoté :

Notez que la vue de texte et le champ de texte s’étendent pour conserver les mêmes marges gauche et droite, en raison du FlexibleWidth paramètre. L’image a la marge supérieure et gauche flexible, ce qui signifie qu’elle conserve les marges inférieure et droite , en conservant l’image en vue lorsque l’écran est pivoté. Les dispositions complexes nécessitent généralement une combinaison de ces paramètres sur chaque contrôle visible pour maintenir la cohérence de l’interface utilisateur et empêcher les contrôles de se chevaucher lorsque les limites de la vue changent (en raison d’une rotation ou d’un autre événement de redimensionnement).