Vues de pile dans Xamarin.iOS

Cet article traite de l’utilisation du nouveau contrôle UIStackView dans une application Xamarin.iOS pour gérer un ensemble de sous-vues dans une pile horizontale ou verticale.

Le contrôle Stack View (UIStackView) tire parti de la puissance des classes de disposition et de taille automatiques pour gérer une pile de sous-vues, horizontalement ou verticalement, qui répond dynamiquement à l’orientation et à la taille d’écran de l’appareil iOS.

La disposition de tous les sous-affichages attachés à une vue pile est gérée par celle-ci en fonction des propriétés définies par le développeur, telles que l’axe, la distribution, l’alignement et l’espacement :

Lorsque vous utilisez une UIStackView application Xamarin.iOS, le développeur peut définir les sous-vues à l’intérieur d’un storyboard dans le Concepteur iOS, ou en ajoutant et en supprimant des sous-vues dans du code C#.

Ce document se compose de deux parties : un démarrage rapide pour vous aider à implémenter votre première vue de pile, puis quelques détails techniques supplémentaires sur son fonctionnement.

Vidéo UIStackView

Démarrage rapide UIStackView

En guise d’introduction rapide au UIStackView contrôle, nous allons créer une interface simple qui permet à l’utilisateur d’entrer une évaluation comprise entre 1 et 5. Nous allons utiliser deux vues stack : une pour organiser l’interface verticalement sur l’écran de l’appareil et une pour organiser horizontalement les icônes d’évaluation 1-5 sur l’écran.

Définir l’interface utilisateur

Démarrez un nouveau projet Xamarin.iOS et modifiez le fichier Main.storyboard dans le Générateur d’interface de Xcode. Tout d’abord, faites glisser une seule vue de pile verticale sur le contrôleur de vue :

Dans l’inspecteur d’attributs, définissez les options suivantes :

Où :

• Axe : détermine si l’affichage pile organise les sous-vues horizontalement ou verticalement.
• Alignement : contrôle la façon dont les sous-vues sont alignées dans la vue pile.
• Distribution : contrôle la taille des sous-vues dans la vue de pile.
• Espacement : contrôle l’espace minimal entre chaque sous-vue de la pile.
• Relative à la base de référence : si case activée ed, l’espacement vertical de chaque sous-vue est dérivé de sa base de référence.
• Marges de disposition relatives : place les sous-vues par rapport aux marges de disposition standard.

Lorsque vous utilisez une vue de pile, vous pouvez considérer l’alignement comme l’emplacement X et Y du sous-affichage et la distribution comme hauteur et largeur.

Continuez à mettre en page l’interface de l’application en ajoutant une étiquette, ImageView, deux boutons et une vue de pile horizontale afin qu’elle ressemble à ce qui suit :

Configurez l’affichage de pile horizontale avec les options suivantes :

Étant donné que nous ne voulons pas que l’icône qui représente chaque « point » de l’évaluation soit étirée lorsqu’elle est ajoutée à l’affichage de pile horizontale, nous avons défini l’alignement sur centre et la distribution pour remplir de manière égale.

Enfin, reliez les points de sortie et actions suivants :

Remplir un UIStackView à partir du code

Revenez à Visual Studio pour Mac et modifiez le fichier ViewController.cs et ajoutez le code suivant :

public int Rating { get; set;} = 0;
...

partial void IncreaseRating (Foundation.NSObject sender) {

    // Maximum of 5 "stars"
    if (++Rating > 5 ) {
        // Abort
        Rating = 5;
        return;
    }

    // Create new rating icon and add it to stack
    var icon = new UIImageView (new UIImage("icon.png"));
    icon.ContentMode = UIViewContentMode.ScaleAspectFit;
    RatingView.AddArrangedSubview(icon);

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });

}

partial void DecreaseRating (Foundation.NSObject sender) {

    // Minimum of zero "stars"
    if (--Rating < 0) {
        // Abort
        Rating =0;
        return;
    }

    // Get the last subview added
    var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

    // Remove from stack and screen
    RatingView.RemoveArrangedSubview(icon);
    icon.RemoveFromSuperview();

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });
}

Examinons en détail quelques éléments de ce code. Tout d’abord, nous utilisons des if instructions pour case activée qu’il n’y a pas plus de cinq « étoiles » ou moins de zéro.

Pour ajouter une nouvelle « étoile », nous chargeons son image et définissez son mode de contenu sur Scale Aspect Fit :

var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;

Cela empêche l’icône « étoile » d’être déformée lorsqu’elle est ajoutée à l’affichage Pile.

Ensuite, nous ajoutons la nouvelle icône « étoile » à la collection de sous-vues Stack View :

RatingView.AddArrangedSubview(icon);

Vous remarquerez que nous avons ajouté la UIImageView propriété à ArrangedSubviews la UIStackViewpropriété et non à la SubView. Toute vue que vous souhaitez que l’affichage pile contrôle sa disposition doit être ajouté à la ArrangedSubviews propriété.

Pour supprimer un sous-affichage d’une vue de pile, nous obtenons d’abord la sous-vue à supprimer :

var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

Ensuite, nous devons le supprimer de la ArrangedSubviews collection et du Super View :

// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();

La suppression d’une sous-vue de la collection n’entraîne pas le contrôle de la ArrangedSubviews vue pile, mais ne la supprime pas de l’écran.

Test de l’interface utilisateur

Avec tous les éléments d’interface utilisateur et le code requis en place, vous pouvez maintenant exécuter et tester l’interface. Lorsque l’interface utilisateur s’affiche, tous les éléments de la vue Pile verticale sont également espacés du haut au bas.

Lorsque l’utilisateur appuie sur le bouton Augmenter l’évaluation, une autre « étoile » est ajoutée à l’écran (jusqu’à un maximum de 5) :

Les « étoiles » sont automatiquement centrées et distribuées de manière égale dans la vue de pile horizontale. Lorsque l’utilisateur appuie sur le bouton Réduire l’évaluation, une « étoile » est supprimée (jusqu’à ce qu’aucun ne soit laissé).

Détails de l’affichage pile

Maintenant que nous avons une idée générale de ce que le UIStackView contrôle est et comment il fonctionne, examinons plus en détail certaines de ses fonctionnalités et détails.

Classes de disposition et de taille automatiques

Comme nous l’avons vu ci-dessus, lorsqu’une sous-vue est ajoutée à une vue de pile, sa disposition est totalement contrôlée par cette vue stack à l’aide de la disposition automatique et des classes de taille pour positionner et dimensionner les vues organisées.

L’affichage pile épingle le premier et le dernier sous-affichage de sa collection aux bords supérieur et inférieur pour les vues de pile verticale ou les bords gauche et droit pour les vues de pile horizontale. Si vous définissez la LayoutMarginsRelativeArrangement propriété truesur , la vue épingle les sous-vues aux marges pertinentes au lieu du bord.

La vue Pile utilise la propriété de la sous-vue lors du IntrinsicContentSize calcul de la taille des sous-vues le long de la vue définie Axis (à l’exception de l’objet FillEqually Distribution). Les FillEqually Distribution sous-vues redimensionnent toutes les sous-vues de sorte qu’elles soient de la même taille, remplissant ainsi la vue pile le long du Axis.

À l’exception du Fill Alignment, la vue Pile utilise la propriété de IntrinsicContentSize la sous-vue pour calculer la taille de la vue perpendiculairement à l’élément donné Axis. Pour les Fill Alignmentsous-vues, toutes les sous-vues sont dimensionnées afin qu’elles remplissent la vue de pile perpendiculaire à l’élément donné Axis.

Positionnement et dimensionnement de la vue pile

Bien que l’affichage pile ait un contrôle total sur la disposition de n’importe quel sous-affichage (en fonction des propriétés telles que Axis et Distribution), vous devez toujours positionner l’affichage de pile (UIStackView) dans son affichage parent à l’aide de classes de disposition et de taille automatiques.

En règle générale, cela signifie l’épinglage d’au moins deux bords de la vue pile pour développer et contracter, ce qui définit sa position. Sans contraintes supplémentaires, la vue Pile est automatiquement redimensionnée pour s’adapter à toutes ses sous-vues comme suit :

• La taille le long de son Axis sera la somme de toutes les tailles de sous-vue plus tout espace défini entre chaque sous-vue.
• Si la LayoutMarginsRelativeArrangement propriété est true, la taille des vues de pile inclut également la place des marges.
• La taille perpendiculaire à celle-ci Axis sera définie sur la plus grande sous-vue de la collection.

En outre, vous pouvez spécifier des contraintes pour la hauteur et la largeur de l’affichage Pile. Dans ce cas, les sous-vues seront disposées (dimensionnées) pour remplir l’espace spécifié par l’affichage Pile, tel que déterminé par les propriétés et Alignment les Distribution propriétés.

Si la BaselineRelativeArrangement propriété est true, les sous-vues sont disposées en fonction de la base de référence du premier ou du dernier sous-affichage, au lieu d’utiliser la position Haut, Bas ou Y Centre- . Celles-ci sont calculées sur le contenu de la vue Pile comme suit :

• Une vue de pile verticale retourne la première sous-vue pour la première ligne de base et la dernière pour la dernière. Si l’une de ces sous-vues est elle-même des vues de pile, leur première ou dernière ligne de base sera utilisée.
• Une vue de pile horizontale utilise sa sous-vue la plus haute pour la première et la dernière ligne de base. Si la vue la plus haute est également une vue de pile, elle utilise la sous-vue la plus haute comme ligne de base.

Utilisations courantes de la vue de pile

Il existe plusieurs types de disposition qui fonctionnent correctement avec les contrôles Stack View. Selon Apple, voici quelques-unes des utilisations les plus courantes :

• Définissez la taille le long de l’axe : en épinglant les deux bords le long de la vue pile et l’un Axis des bords adjacents pour définir la position, la vue Pile s’agrandit le long de l’axe pour ajuster l’espace défini par ses sous-vues.
• Définissez la position du sous-affichage : en épinglant les bords adjacents de la vue pile à son affichage parent, l’affichage pile augmente dans les deux dimensions pour qu’il contienne des sous-vues.
• Définissez la taille et la position de la pile : en épinglant les quatre bords de la vue pile à l’affichage parent, l’affichage pile organise les sous-vues en fonction de l’espace défini dans l’affichage pile.
• Définissez la taille perpendiculaire à l’axe : en épinglant les deux bords perpendiculairement à l’affichage de pile et l’un des bords le long de l’axe Axis pour définir la position, la vue Pile se développe perpendiculairement à l’axe pour ajuster l’espace défini par ses sous-vues.

Gestion de l’apparence

Il UIStackView est conçu comme une vue de conteneur non rendu et, par conséquent, il n’est pas dessiné dans le canevas comme d’autres sous-classes de UIView. La définition de propriétés telles que BackgroundColor ou la DrawRect substitution n’a aucun effet visuel.

Il existe plusieurs propriétés qui contrôlent la façon dont un affichage stack organisera sa collection de sous-vues :

• Axe : détermine si l’affichage pile organise les sous-vues horizontalement ou verticalement.
• Alignement : contrôle la façon dont les sous-vues sont alignées dans la vue pile.
• Distribution : contrôle la taille des sous-vues dans la vue de pile.
• Espacement : contrôle l’espace minimal entre chaque sous-vue de la pile.
• Relative à la base de référence : si true, l’espacement vertical de chaque sous-vue est dérivé de sa base de référence.
• Marges de disposition relatives : place les sous-vues par rapport aux marges de disposition standard.

En règle générale, vous utiliserez un affichage pile pour organiser un petit nombre de sous-vues. Les interfaces utilisateur plus complexes peuvent être créées en imbrication d’une ou plusieurs vues stack les unes des autres (comme nous l’avons fait dans le guide de démarrage rapide UIStackView ci-dessus).

Vous pouvez affiner davantage l’apparence des interfaces utilisateur en ajoutant des contraintes supplémentaires aux sous-vues (par exemple, pour contrôler la hauteur ou la largeur). Toutefois, il convient de ne pas inclure de contraintes conflictuelles à celles introduites par la vue pile elle-même.

Maintenance des vues organisées et de la cohérence des sous-vues

La vue Pile garantit que sa ArrangedSubviews propriété est toujours un sous-ensemble de sa Subviews propriété à l’aide des règles suivantes :

• Si une sous-vue est ajoutée à la ArrangedSubviews collection, elle est automatiquement ajoutée à la Subviews collection (sauf si elle fait déjà partie de cette collection).
• Si une sous-vue est supprimée de la Subviews collection (supprimée de l’affichage), elle est également supprimée de la ArrangedSubviews collection.
• La suppression d’une sous-vue de la ArrangedSubviews collection ne la supprime pas de la Subviews collection. Il ne sera donc plus disposé par l’affichage Pile, mais sera toujours visible à l’écran.

La ArrangedSubviews collection est toujours un sous-ensemble de la Subview collection, mais l’ordre des sous-vues individuels au sein de chaque collection est séparé et contrôlé par les éléments suivants :

• L’ordre des sous-vues de la ArrangedSubviews collection détermine leur ordre d’affichage dans la pile.
• L’ordre des sous-vues de la Subview collection détermine leur ordre Z (ou superposition) dans l’affichage avant.

Modification dynamique du contenu

Une vue pile ajuste automatiquement la disposition des sous-vues chaque fois qu’une sous-vue est ajoutée, supprimée ou masquée. La disposition sera également ajustée si une propriété de l’affichage pile est ajustée (par exemple).Axis

Les modifications de disposition peuvent être animées en les plaçant dans un bloc d’animation, par exemple :

// Animate stack
UIView.Animate(0.25, ()=>{
    // Adjust stack view
    RatingView.LayoutIfNeeded();
});

La plupart des propriétés de la vue Pile peuvent être spécifiées à l’aide de classes de taille dans un storyboard. Ces propriétés seront automatiquement animées en réponse aux modifications de taille ou d’orientation.

Résumé

Cet article a abordé le nouveau UIStackView contrôle (pour iOS 9) pour gérer un ensemble de sous-vues dans une pile organisée horizontalement ou verticalement dans une application Xamarin.iOS. Il a commencé par un exemple simple d’utilisation des vues stack pour créer une interface utilisateur et a terminé avec un examen plus détaillé des vues stack et de leurs propriétés et fonctionnalités.

Liens associés

• Nouveautés d’iOS 9.0
• Référence UIStackView
• Présentation de UIStackView (vidéo)