Si vous lisez Dot.Blog vous connaissez le nom, j’en ai déjà parlé, mais le connaissez-vous ? C’est-à-dire savez-vous vous en servir ? Pas si simple ? Voyons ça !
Les Layout “bizarres”
Xamarin.Forms a ajouté au fil du temps des conteneurs de mise en page de plus en plus exotiques dont la prise en main est beaucoup moins évidente si on ne s’en sert pas tous les jours. Là où la Grid, le StackPanel sont maîtrisés en quelques minutes et dont le fonctionnement reste gravé pour la vie en mémoire, il n’en va pas aussi facilement de certains conteneurs beaucoup plus subtiles.
Sans aller non plus chercher très loin dans l’exotisme je vous parlais la semaine dernière de l’AbsoluteLayout et de son mode proportionnel qui ouvrait des voies tout à fait intéressantes pour les mises en page dynamiques.
Dans le même sillage la FlexLayout fait partie de ces conteneurs aux propriétés mouvantes, et au fonctionnement pas toujours très clair de prime abord surtout lorsqu’on joue sur les combinaisons des valeurs possibles.
Néanmoins connaître vraiment ces conteurs permet de construire des UI bien plus facilement que juste avec une grille et un Stacklayout…
Regardons de plus prêt cet être étrange !
Qu’est-ce que le FlexLayout ?
FlexLayout propose différentes façons d'affecter ses composants enfants à l'écran, facilitant ainsi l'alignement, la conception et l'organisation de l'espace. C’est un conteneur visuel et chaque type de conteneur repose sur un algorithme (ou plusieurs) qui diffère des autres conteneurs. C’est par cette richesse qu’on peut créer des mises en page XAML complexes au comportement riche sans avoir même une seule ligne de code C# à ajouter la plupart du temps.
La FlexLayout offre un mode de disposition qui a le pouvoir de fournir une meilleure gestion de la taille proportionnelle pour les vues enfants car elle organise les éléments selon un ratio sur les dimensions de l'écran et entre les éléments de l'écran. De cette façon elle garde la vue globale plus propre visuellement et plus organisée.
Cette histoire de ratio et de proportionnalité rappelle forcément le mode proportionnel de la AbsoluteLayout présentée la semaine dernière, mais là s’arrête les comparaisons car la FlexLayout fait tout cela dans un esprit somme toute très différent.
Justification du contenu
la première propriété à connaître est JustifyContent. Elle permet de fixer comment les enfants seront justifié à l’intérieur du conteneur. Pour cela plusieurs valeurs sont possibles :
- Start : En début de conteneur (valeur par défaut)
- Center : Au centre du conteneur
- End : En fin de conteneur
- SpaceAround : Chaque élément enfant est entouré d’une zone vide, très pratique pour une disposition “aérée”
- SpaceBetween : Subtile nuance ! Dans le SpaceAround, il y a de l’espace autour, simple traduction… donc le premier élément commence par un espace vide c’est nomal, avec SpaceBetween, les espaces se trouvent uniquement entre les enfants, le premier enfant commence donc sans vide sur les bords. Autre façon d’obtenir une belle présentation plus compacte sans sacrifier ce qu’en infographie on appelle “la circulation du blanc” (laisser des espaces vides connectés entre eux pour alléger la présentation).
- SpaceEvenly : Dans ce mode la FlexLayout justifiera ces enfants proportionnellement à leur taille et nombre de telle façon à ce que les espaces entre chaque soient identiques.
L’exemple ci-dessus vous donnera un aperçu de ces différents modes de fonctionnement. Attention, au premier coup d’œil rapide on se dit que tout est pareil, piège !
Si vous regardez plus attentivement vous remarquerez que sur la première ligne d’exemples Start colle à gauche tous les éléments, là où End colle l’ensemble à droite et que Center, comment dire… centre le tout à l’écran… Je vous laisse jouer au jeu des 7 erreurs avec la seconde ligne d’exemples.
L’exemple complet est obtenu en répétant le même code XAML et en changeant juste la valeur de la propriété JustifyContent :
Rien de sorcier donc.
Alignement des enfants
Seconde propriété d’importance, l’alignement des enfants AlignItems.
Elle prend les valeurs Start, Center, End et Stretch. S’agissant d’un alignement on comprend qu’on dispose d’un mode aligné à gauche, centré, aligné à droite et d’un mode étiré sur la zone dédiée à l’enfant.
Cette série d’exemples s’obtient avec le même code XAML en ne changeant que la valeur de la propriété AlignItems :
A noter, dans les exemples XAML ci-dessus les valeurs possibles de la propriété sont toutes indiquées et séparées par un pipe |, il s’agit là juste d’une façon d’éviter la répétition du même exemple. Comprenez ainsi que seule UNE des valeurs est utilisée à chaque fois pour produire les différents exemples de la même famille…
La Direction
Ce n’est pas tout ! Et c’est bien ce qui rend ce conteneur plus difficile à maîtriser rapidement et surtout dans le temps si on n’en sert pas souvent… Mais c’est ce qui en fait un outil bien plus puissant qu’une simple grille ou un StackLayout (quoi que ces deux éléments sont d’une versatilité étonnante et qu’on peut presque tout faire rien qu’avec ces deux là. Mais “presque” ce n’est que “presque”…).
La propriété Direction indique bien entendu la … dirtection dans laquelle les éléments enfants seront distribués dans le conteneur.
Elle prend les valeurs :
- Row : De gauche à droite (valeur par défaut)
- RowReverse : De droite à gauche
- Column : mode en colonne du haut vers le bas
- ColumnReverse : mode en colonne du bas vers le haut
Avec le code ci-dessus, en changeant la valeur de Direction parmi les valeurs montrées on produit les sorties suivantes :
Ca devient tout de suite plus intéressant… sachant que bien entendu une FlexLayout n’est pas obligée d’occuper tout l’écran hein ! Elle-même peut être située à l’intérieur d’une case d’une grille, dans une liste d’items dans un StackLayout, imbriquée dans un AbsoluteLayout en mode proportionnel, etc…
Les combinatoires explosent rapidement, c’est aussi pour cela que les développeurs préfèrent souvent se limiter à quelques conteneurs de base. Pour ceux qui doivent créer des UI régulièrement en revanche la connaissance de tous ces conteneurs et de toutes leurs interactions possibles est un véritable savoir-faire vital.
Le mode de Wrapping
Aller, c’est la fin, de paniquez pas ! Voici la dernière propriété importante du FlexLayout : Wrap.
Cette propriété est en pratique essentielle. Par défaut la FlexLayout aligne ces enfants les uns derrière les autres en une seule ligne (en respectant les autres propriétés déjà étudiées). C’est bien mais souvent ce n’est tout à fait ce qu’on veut. On aimerait bien qu’arriver en fin d’écran la liste puisse passer à la ligne par exemple. Comme le WrapPanel WPF par exemple.
C’est exactement ce que fait cette propriété avec trois valeurs : NoWrap (par défaut), Wrap (le mode Wrap est en route), Reverse (Wrap inversé).
Avec le code ci-dessus en changeant à chaque fois la valeur de Wrap on obtient la sortie suivante :
Conclusion
Le FlexLayout n’est pas le conteneur le plus “tordu” à comprendre, mais avec l’AbsoluteLayout présenté la semaine dernière il ajoute une puissance non négligeable au XAML des Xamarin.Forms pour créer des mises en page sophistiquées, ou tout simplement efficaces, sans se prendre la tête et sans code supplémentaire.
Il n’est pas si difficile de comprendre que dans l’AbsoluteLayout c’est le mode proportionnel qu’il faut connaître car c’est le plus utile, ici tout est bon mais on comprend vite aussi que le mode Wrap est certainement la feature qu’on appréciera le plus souvent tout comme la disposition en colonnes.
De fait il n’y a pas tant à savoir, le reste pourra s’acquérir au fil du temps et des travaux pratiques !
Un bon design est un design clair et lisible, utiliser les bons outils pour le faire est essentiel car un bon design doit aussi être bien codé et maintenable… Pensez-y et…
Stay Tuned !