Xamarin par l’exemple : “Metsys Music Search” 3/3

Il y a plus de 2 ans, Microsoft annonçait le rachat de Xamarin. Aujourd’hui, le résultat de cette alliance aboutit à une énorme gamme d’outils rendant le développement “Cross-Platform” plus rapide et plus facile pour les développeurs.

La partie 1 se trouve ici : Xamarin par l’exemple : “Metsys Music Search” 1/3
La partie 2 se trouve ici : Xamarin par l’exemple : “Metsys Music Search” 2/3

8. Mise en place de la liste des albums :

8.1 Ajout des ressources :

Afin de finaliser le projet, nous allons rajouter les ressources manquantes qui permettront un rendu plus graphique des listes d’artistes et albums. Rajoutez les éléments ci-dessous dans le répertoire “Resources” du projet “Metsys.Music.Search” :

calendar.png, disc.png, httppng.png, follow.png

(ne pas oublier de mettre “Ressource incorporée” dans “Action de génération”).

8.2 Création de la vue “TrackView” :

Comme pour la vue “ArtistView”, ajoutez un nouvel élément de type Xamarin.Forms et nommez le “TrackView.xaml”. Remplacez le code XAML existant par celui-ci dessous :

Rajoutez dans le “code-behind” les deux méthodes ci-dessous :

8.3 Selection et Navigation :

Il ne reste plus qu’à initialiser la sélection de l’artiste. L’application effectuera, via le service web, une recherche de ses albums et naviguera vers la vue “TrackView” qui affichera les résultats obtenus.

Ouvrez le fichier “ArtistView.xaml” et rajoutez les éléments surlignés ci-dessous :

Rajoutez dans le “code-behind” les trois méthodes ci-dessous :

8.4 Tests et comparaison sur les appareils :

Exécutez l’application sur les trois plateformes (iOS, Android et Windows10) :

      

9. Harmonisation de la vue “TrackView” :

Comme pour la vue “ArtistView”, nous allons harmoniser l’image en entête pour l’afficher sous forme de bulle. Pour cela, nous allons installer un plugin qui nous permettra de personnaliser le contrôle “image”. Sélectionnez la solution et ouvrez le gestionnaire de Nugets : rajoutez “Xam.Plugins.Forms.ImageCircle” à tous les projets :

Une fois le composant installé, il ne reste plus qu’a changer l’image comme ci-dessous :

Vous remarquerez que nous changeons la taille pour la partie Windows10 afin d’avoir l’image plus grande que sur des périphériques de type téléphone.

Il ne reste plus qu’a initialiser pour chaque plateforme le composant en rajoutant “ImageCircleRenderer.Init();” après chaque instantiation de “Xamarin.Forms” comme ci-dessous :

  • UWP : App.xaml.cs -> Xamarin.Forms.Forms.Init(e);
  • iOS : AppDelegate.cs -> global::Xamarin.Forms.Forms.Init();
  • Android : MainActivity.cs -> global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

Voici le résultat obtenu sur les 3 plateformes (Windows10, iOS et Android) :

      

10. Un peu de musique pour terminer :

Nous allons terminer en jouant un extrait de l’album. Pour cela nous allons utiliser un plugin comme pour la partie précédente :

Dans le fichier “TrackView.xaml.cs”, décommentez la ligne comme ci-dessous :

Et rajoutez le “code-behind” ci-dessous :

N’oubliez pas de rajouter l’assembly “using System.Threading.Tasks;”.

Et voilà, en cliquant sur “Play sample”, le service web ira récupérer un extrait de 30 secondes et le jouera.

11. Conclusion :

Nous avons créer un application multiplateforme en utilisant un seul code et une seule source d’interface utilisateur pour les 3 appareils Windows10, iOS et Android. Ensuite nous avons pu personnaliser les composants natifs suivant le type d’appareil et personnaliser le rendu graphique. Et enfin nous avons vu l’utilisation de package Nuget (il en existe des milliers) permettant l’implémentation et l’utilisation des capacités des appareils.

Et voici le résultat pour l’ensemble des appareils :

 

About the Author

François BOTTE

Architecte Technique .Net

No Comments

Laisser un commentaire

This blog is kept spam free by WP-SpamFree.