Fartez-vos doigts, à défaut de neige et de pouvoir filer à vive allure sur une piste noire vos doigts vont pouvoir glisser tels des ballerines sur l’écran de vos Apps Xamarin.Forms ! Comment ? grâce à la SwipeView…
Mode expérimental temporaire
Au moment où j’écris ces lignes (deux mois avant la publication) il n’y a pas beaucoup de neige, en Australie les 49,9° ont été atteint ce qui marque un record mondial pour décembre sur Terre. S’il y a de la neige elle est plutôt carbonique ou liée aux retardants des lances d’incendie. Pour les skieurs les temps vont devenir difficiles, à moins d’apprendre à faire du surf sur le bitume fondu des rues de nos villes surchauffées… Mais même nos chers smartphones risquent de ne pas survivre à de telles températures.. Alors enfermez-vous dans le frigo, mettez un bonnet, fartez vos doigts et faites les glisser sur l’écran de vos Apps grâce à la SwipeView en rêvant d’antan, des décembre blancs, des mois en “r” où manger des fruits de mer ne vous envoyait ad patres pour cause de pollution ! La SwipeView c’est un petit plaisir post-apocalyptique en quelque sorte… A la différence que l’apocalypse est encore à venir, c’est juste le début. Smile! vous êtes filmés (mais pas par votre tonton Georges mais par des caméras chinoises équipées d’AI, moins festif tout de suite…).
Après cette intro qui donne envie de crever dans un yaourt périmé comme pourrait dire Guillermo Guiz, oublions ces fadaises pour jouir du temps présent grâce aux Xamarin.Forms ! (Pour les lecteurs que ces digressions pourraient exaspérer, je leur conseille de lire directement les arides docs de Microsoft, c’est plus direct mais c’est mois bien expliqué, mais c’est à eux de voir. Live Long & Prosper à tous).
Car cette fonctionnalité est nouvelle et a été introduite dans la version 4.4 mais reste encore expérimentale ce qui signifie qu’il faut l’activer volontairement dans le code, nous verrons comment. Mais les chances sont grandes qu’au moment de la lecture de ce billet ou peu après cet état temporaire ait pris fin. Regardez du côté de la doc officielle si vous avez un doute.
Souffler n’est pas jouer mais glisser est-ce tricher ?
Oui, un peu…
Car grâce au glissement de la SwipeView vous allez pouvoir créer de l’espace d’UI là où il n’y en avait pas ou plus !
Je ne parle pas ici du swipe classique qui généralement permet de passer d’une page à une autre.
Je vous parle là d’un swipe particulier, celui qui permet de rendre une zone, et une zone seulement, avec précision, “glissable” de telle façon à révéler d’autres informations se trouvant “en dessous”.
En réalité vous connaissez déjà ce comportement très utilisé dans les listes, même dans les notifications sous Android 
par exemple. Un petit coup de swipe à gauche sur une notification fait apparaître dans la partie droite ainsi “dégagée” une icône pour gérer les paramètres de la notification ou d’autres informations de ce genre. Dans une liste cela peut être un bouton de suppression qui ne pollue pas par sa répétition visuelle toute la liste…
Il y a du pour et du contre, comme toute “ruse” d’UI, l’UX peut trinquer. En effet, si visuellement cacher certains boutons dans une liste peut être du plus bel effet (pas de répétition en fin de ligne d’un même bouton “supprimer” par exemple, gain de place pour l’info importante…) l’Expérience Utilisateur, la fameuse UX, peut en souffrir. Car comment deviner qu’un swipe à cet endroit précis découvrira de nouvelles possibilités de l’application ?
Il y a une balance à bien gérer. Soit une documentation visuelle automatique, ce qui est très à la mode, soit en utilisant l’astuce à un endroit déjà très utilisé par beaucoup d’autres Apps, dans les listes par exemple, ce qui laisse espérer qu’un utilisateur un minimum réveillé découvrira de lui-même la fonction…
Mais c’est un aspect sur lequel je vous invite à réfléchir. L’UX c’est si important.
De fait, est-ce que la SwipeView c’est de la triche ? Oui, un peu. Cela permet de créer de la place là où on n’en voit pas. Cela peut rendre le soft plus beau mais plus difficile à découvrir.
Mais tricher pour la bonne cause peut se comprendre, à condition que tout le monde soit averti (et ce n’est donc plus de la triche) ! Et on en revient à l’UX : toute UI doit avant tout être “lisible”, au sens le plus large du terme. A vous de bien doser tout cela donc.
Je vous laisse réfléchir à ces aspects important de votre App et on passe maintenant à la technique !
Une sœur cachée du CarouselView ?
La SwipeView apparaît dans la même release que la CarouselView sur laquelle je reviendrai plus tard. Elle en est en quelque sorte une sœur cachée utilisant des mécanismes certainement communs (zone glissable, gesture…).
Mais leur utilisation reste très différente en terme d’UX, c’est pourquoi les deux ont leur intérêt. Si je commence par la SwipeView c’est que la CarouselView d’une façon ou d’une autre a toujours existé dans Xamarin.Forms, sous la forme d’un type de Page dédié au départ, puis aujourd’hui sous la forme d’un contrôle plus facilement exploitable au sein de pages de types divers.
Mais gardez en tête cette sœur dont nous reparlerons !
Un comportement plus qu’un contrôle
Maintenant que le décor est placé il est temps de vous dire la vérité, la SwipeView est bien plus qu’un contrôle… Ce n’en n’est même pas un… Ce n’est pas non plus un “Behavior” puisqu’elle n’en suit pas la logique déclarative. Mais elle est entre les deux : c’est un comportement qu’on écrit en XAML comme s’il s’agissait d’un contrôle.
Confus ?
Je précise donc : La syntaxe pour ajouter une SwipeView ressemble comme deux gouttes d’eau à celle d’un contrôle XAML avec sa balise propre, ses sous balises, etc. Mais en réalité on peut la placer dans n’importe quel contrôle pour le rendre “swipable”, ce qui correspond plus à l’esprit d’un Behavior en XAML.
L’utilisation la plus fréquente se fera dans le contexte d’une CollectionView, introduite dans une version précédente et dont je vous parlerai bien entendu dans un prochain billet. Mais ce contexte fréquent ne signifie pas exclusif, et la SwipeView peut s’utiliser dans une infinité de cas, comme d’habitude seule votre imagination sera la limite…
Le flag expérimental
Tant que la fonctionnalité sera expérimentale il faudra la débloquer à la main pour y avoir accès. C’est une protection que les équipes de Xamarin.Forms aiment bien utiliser et que je trouve plutôt bien pensée et simple. En vous forçant à ajouter un flag expérimental dans votre code vous ne pourrez pas venir vous plaindre si vous utiliser le contrôle en production et que ça plante… et en passant sur ce code alors que le contrôle ne sera plus en mode expérimental vous serez obligé de penser à l’enlever.
Comment faire ? De la même façon que tous les flags expérimentaux de Xamarin.Forms, dans le App.Xaml.cs :
L’effet visuel
Regardons l’effet visuel d’un exemple simple dont voici d’abord le GIF pour que vous puissiez vous rendre compte :
Dans cette exemple une zone de type Grid contient un Label avec le célèbre texte “Welcome to Xamarin.Forms!”. Mais comme vous le voyez selon qu’on swipe cette zone à gauche ou à droite on découvre des icônes différentes offrant des options qui n’étaient pas visibles. A gauche un moyen d’indiquer que l’item est un favori, à droite un moyen de supprimer l’item. Tout cela est totalement déconnecté de toute réalité d’une véritable application, ce n’est qu’un condensé de ce qui est possible. Vous placerez ces effets de swipe là où ils prennent un sens dans vos Apps…
Le code XAML
C’est bien entendu du côté XAML que tout se joue, en déclarant la SwipeView puis à l’intérieur de celle-ci les différents emplacements (gauche ou droite) qu’on veut faire apparaître et leur contenu :
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SwipeViewSample.MainPage">
<StackLayout HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
<SwipeView>
<SwipeView.LeftItems>
<SwipeItems>
<SwipeItem Text="Favorite"
IconImageSource="favorite.png"
BackgroundColor="LightGreen"
Invoked="Favorite_Invoked" />
</SwipeItems>
</SwipeView.LeftItems>
<SwipeView.RightItems>
<SwipeItems Mode="Execute">
<SwipeItem Text="Delete"
IconImageSource="delete.png"
BackgroundColor="LightPink"
Invoked="Delete_Invoked" />
</SwipeItems>
</SwipeView.RightItems>
<!-- Content -->
<Grid HeightRequest="60" WidthRequest="300" BackgroundColor="LightGray">
<Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</SwipeView>
</StackLayout>
</ContentPage>On remarque à la syntaxe que chaque partie (gauche ou droite) supporte non pas un item mais une liste d’items SwipeItems contenant autant de SwipeItem qu’on le désire (et que la raison le permet…).
Conclusion
Il n’y aura peut-être plus de neige du tout quand votre App sera sur le marché, peut-être plus de clients non plus, tous ressemblant à un tas de viande rôtie sur une tige de Kebab, mais sans la tige. Mais vous pourrez dire que vous saviez faire de chouettes Apps avec des swipes hyper cool grâce à Dot.Blog !
Joyeux Noël, Bonne Année, tout un tas de choses à venir pour moi mais qui seront déjà du passé quand vous lirez ce papier…
Si les petits cochons transgéniques ne nous mangent pas, si Terminator n’a pas notre peau, si on ne termine pas comme des écrivisses dans un court-bouillon, il y aura beaucoup d’autres articles alors…
Stay Tuned !