Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Des UI super pros en Xamarin Forms

Tout coder en cross-plateforme même les UI c’est fantastique, mais est-ce que les Apps ont un bon look ? Et est-ce possible d’obtenir un niveau pro juste avec du code commun ? Quelques exemples vous prouverons que oui…

L’UI, la reine du XXIème siècle

Si on commence à se préoccuper de l’UX car les utilisateurs veulent des applications faciles à utiliser sans manuel de 200 pages posé sur les genoux, l’UI est comme une reine flamboyante. Fille informatique du Design, elle se confond entre reine de beauté et vendeur d’encyclopédie à domicile… C’est elle la reine du XXIème qui sera designé ou ne sera pas !

L’apogée du consumérisme, la cristallisation de nos fantasmes, de nos envies et de celles qu’on nous impose à “l’insu de notre plein gré” !

Vendeur d’encyclopédie à domicile car une belle UI est vendeuse, elle vaut tous les baratins des meilleurs bonimenteurs (et il y a le mot “menteur” dedans !).

Reine de beauté car oui, pour séduire, comme dans certains quartiers louches, c’est la plus belle qui se vend le mieux… Donc pour vendre son baratin l’App se doit d’être belle et pour cela son enveloppe visible, telle une Nabilla de pixels, doit passer par un chirurgien esthétique qui la gonfle ici ou là d’effets hypnotiques (Nabilla c’est juste pour l’exemple mais je vous la laisse sans problème…).

Donc faire de belles UI est indispensable.

Or les Xamarin Forms en créant une abstraction au-dessus des systèmes natifs peuvent être vues comme une forme de limitation. Ce qui les relèguerait au rang d’outil pratique pour créer des prototypes ou des petites Apps internes.

Ce qui n’est bien entendu pas le cas.

Je ne listerai pas ici tout ce qui permet d’atteindre un haut niveau de perfectionnement des UI avec les Xamarin Forms mais ce ne sont pas les moyens qui manquent. En tout cas si vous faites une App qui est moche cela serait vraisemblablement plus révélateur de votre manque de don en design que du manque de possibilités offertes par les Xamarin Forms…

Des preuves ? Des idées ?

Nous sommes là pour ça aujourd’hui. Avoir des preuves que les Xamarin Forms permettent bien d’atteindre le niveau de séduction désiré. Et aussi pour avoir des idées à repiquer pour nos propres Apps.

Pour cela rien de mieux que de regarder ce que d’autres ont fait et qu’ils ont eu la gentillesse de bien vouloir partager. Car c’est en étudiant le code source d’Apps bien faites qu’on comprend le mieux comment exploiter les astuces et le savoir-faire qu’elles renferment.

BikeSharing

BikeSharing360 est une application fictive de gestion de parc de vélos partagés dans une ville. Gestion des utilisateurs, des disponibilités, interaction avec des Maps, beaucoup de choses à voir et à repiquer donc.

image

Cette App fonctionne sous Android, iOS et UWP elle montre principalement :

  • Les animations personnalisées en XAML
  • La personnalisation des Maps

Et on la trouve avec son code source ici : https://github.com/aloisdeniel/Microcharts.Samples

Bikr

Décidemment les vélos inspirent les designers ! Ici il s’agit de gérer l’activité d’un pratiquant de la petite reine. Si l’App semble bien dopée c’est certainement pour rester fidèle au sujet traité !

image

Cette App couvre aussi les trois mêmes plateformes et montre surtout comment exploiter les Charts avec SkiaSharp.

On trouve son code ici : https://github.com/Microsoft/BikeSharing360_MobileApps

GreatPlaces

Sorte de catalogue d’endroits remarquables, cette App utilise principalement une ListView avec fond transparent. Tournant sous les trois mêmes plateformes elle montre en particulier comment utiliser des ViewCell personnalisées.

greatplaces.gif

Tournant sur les trois plateformes aussi cette App démontre principalement les ViewCell personnalisés.

On la trouve là : https://github.com/kphillpotts/XamarinFormsLayoutChallenges

InAnger

Il s’agit d’un ensemble d’exemples démontrant que Xamarin.Forms peut autoriser la conception de look & feel tout à fait modernes et attrayants. La plupart de ces exemples tournent sur Android et iOS, la plateforme UWP n’ayant pas été ciblée car les mises en page proposées sont typiquement pour smartphone (mais rien ne vous empêche de rajouter UWP à ces projets).

image

Trouver un véto (Find a Vet), Phoenix Peaks, Jobberr, Woofer… sont autant d’Apps individuelles qui chacune montre des techniques de mise en page efficaces.

On retrouve l’ensemble ici : https://github.com/awolf/Xamarin-Forms-InAnger

Instagram

Pic et pic et Instagram ! Mais là pas besoin de choisir puisque les 3 plateformes sont ciblées. On y démontre principalement les Entry personnalisés pour la saisie et le contrôle Circle Images permettant d’afficher des images dans des cercles, présentations très à la mode sur smartphone.

Le source est à télécharger ici : https://github.com/adamped/Instagram

image


Social Media

Concevoir une page de type profil de réseau social qui a un look moderne, c’est un exercice limitatif mais qui saura vous inspirez (par exemple profils utilisateurs dans une App LOB, trombinoscope…).

image

Parmi les techniques démontrées on trouve :

  • Entête incurvée
  • Image de profil qui vient se placer sur l’entête

On trouve le code ici : https://github.com/kphillpotts/XamarinFormsLayoutChallenges

KickassUI.RunKeeper

Une App pour sportifs, version Xamarin Forms de RunKeeper.

Android et iOS sont ciblés (on peut difficilement aller courir son jogging avec un PC sous le bras…).

image

Les points principalement démontrés sont :

  • Les Tabs personnalisées
  • L’utilisation de fonte personnalisées
  • Le Carrousel
  • Les Maps personnalisées
  • L’utilisation d’un logo personnalisé

Le code est à disposition sur github comme le reste : https://github.com/sthewissen/KickassUI.Runkeeper

KickassUI.Spotify

Une version Xamarin Forms de l’App Spotify bien connue.

image

Parmi les choses intéressantes montrées par cette App :

  • La barre de navigation translucide
  • Fond d’écran flouté
  • Slider personnalisé

Et le code : https://github.com/sthewissen/KickassUI.Spotify

KickassUI.Twitter

Dans la même série une version Xamarin.Forms de l’App Twitter pour Android et iOS.

image

Des choses intéressantes à voir :

  • Le bouton d’action flottant sous Android
  • L’icône personnalisée dans la MasterDetailPage
  • Les Tabs avec couleur personnalisée

Un code source à examiner ici : https://github.com/sthewissen/KickassUI.Twitter

Timeline

Une gestion d’activités dans le temps. Idée à reprendre pour l’agenda d’une journée de congrès, les étapes d’une journée de voyage, la répartition avec horaires des cours d’une journée de classe… Les idées ne vous manqueront pas j’en suis certain !

image

Les trois plateformes sont ciblées et on peut voir quelques techniques comme l’utilisation des Header et Footer de la ListView et les ViewCell personnalisées.

Un projet sur github que les autres : https://github.com/kphillpotts/XamarinFormsLayoutChallenges

Xamarin.NetFlix

Comme son nom l’indique, une App Xamarin.Forms qui reprend le fonctionnement de celle de NetFlix.

image

Des choses à voir comme :

  • La gestion d’une liste horizontale
  • La barre de navigation transparente sous Android et iOS
  • L’effet de paralaxe
  • Les listes multi-colonnes

Le code source : https://github.com/jsuarezruiz/xamarin-forms-netflix-sample

Facebook

un autre grand classique refabriqué en Xamarin.Forms. Des idées à reprendre comme :

  • la Slide bar à droite
  • La disparition de la barre de navigation
  • Les animations du bouton Like

image


Le code à étudier : https://github.com/XAM-Consulting/FacebookForms

Movies

Et pour finir quelque chose d’assez différents dans les cibles supportées ! En effet, Movies est une application utilisant une UI GTK sous Xamarin.Forms ciblant Linux, macOS et Windows. Le cross-plateforme c’est aussi ce genre d’Apps…

image

L’intérêt se trouve ici bien entendu dans l’utilisation de GTK et des cibles supportées ainsi que :

  • L’utilisation intelligente de la MasterDetailPage
  • Les Maps
  • Les thèmes GTK
  • L’utilisation de la base de données en ligne The Movie Database

Un code source à télécharger et étudier : https://github.com/jsuarezruiz/xamarin-forms-gtk-movies-sample

Conclusion

Ce n’est pas une conclusion mais un commencement ! Avec les Xamarin.Forms et un peu d’imagination on peut tout réaliser, en cross-plateforme natif. On peut faire du beau, du vendeur, de l’original, sans non plus écrire des tonnes de code natif planqué sous la moquette… Bien utilisés les contrôles et les niveaux de personnalisation offerts permettent d’atteindre presque tous les objectifs. Et si code natif il doit y avoir, il est clairement séparés du reste, bien identifié et lui aussi écrit en C#/.NET tout en bénéficiant de 100% de l’API de la cible.

Il est clair qu’ici on se retrouve avec la même problématique que sous WPF, Silverlight ou UWP. Avec les contrôles de base, un développeur peu doué en design produira des applications ternes ressemblant à un utilitaire Windows 95 ….

On ne peut pas tout savoir faire, le design est un métier. Il ne faut hésiter à se faire aider par un designer professionnel ou un infographiste pour concevoir le look & feel d’une App.

Le problème en réalité n’est ni l’outil ni de ne pas savoir créer des designs magnifiques, c’est celui de ne pas savoir se faire aider sur ce qu’on ne sait pas faire.

Alors si vous n’arrivez pas à produire des UI très originales sachez utiliser les compétences d’un spécialiste et concentrez-vous sur votre métier, à savoir comment implémenter de telles UI en C# et en XAML. Ca sera déjà beaucoup, et avec le temps peut-être vous viendra-t-il une certaine aptitude à produire vous aussi des UI de luxe.

Et si vous êtes déjà un développeur touché par la grâce du design, alors inspirez-vous de tous les exemples présentés ici et éclatez-vous !

Bon design

Stay Tuned !

blog comments powered by Disqus