Afficher le minutage

Commençons déjà avec la partie dédiée au minutage du titre musical. D’après la maquette, on aura un texte à gauche pour le temps d’écoute en cours, et à droite, pour la durée totale de la piste :

Pour reproduire cela dans l’application, on utilisera le composant Label qui permet d’afficher du texte à l’écran :

Nom du fichier :MusicPlayerView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

Label ElapsedTime => new Label
{
    FontSize = 14,
    Text = "0:36",
    TextColor = Colors.White
}.TextCenter();

Label TotalTime => new Label
{
    FontSize = 14,
    Text = "2:57",
    TextColor = Colors.White
}.TextCenter();

Ces deux nouveaux éléments sont définis pour afficher un texte statique écrit en blanc et avec une taille relativement petite. Cependant, la taille des caractères s’adaptera automatiquement au niveau d’agrandissement du texte défini par l’utilisateur dans les réglages d’accessibilité de son téléphone.

Ajuster la tête de lecture

Quant à l’élément du milieu, il remplit deux fonctions à la fois : afficher et contrôler la position de lecture dans le morceau. En effet, l’utilisateur s’en sert pour avancer ou reculer dans le morceau en faisant glisser son doigt horizontalement. De plus, ce composant possède une partie en rose qui représente le temps écoulé, et une autre en noir pour le temps restant.

Pour reproduire cette barre de navigation, on utilisera le composant Slider :

Nom du fichier :MusicPlayerView.cs

1
2
3
4
5
6
7
8

Slider TimeTracker => new Slider
{
    Minimum = 0,
    MinimumTrackColor = Colors.LightSalmon,
    Maximum = 100,
    MaximumTrackColor = Colors.Black,
    Value = 20
};

Un Slider est un contrôle doté d’un curseur permettant à l’utilisateur de sélectionner une valeur précise parmi toute une plage de valeurs possibles. Dans notre cas, c’est comme si l’on avait une règle graduée de 0 à 100 avec un curseur positionné sur le 20.

Oui, c’est ça ! Bon évidemment ici, toutes les valeurs de configuration sont statiques, mais l’idée finale est de permettre à l’utilisateur d’avancer ou de reculer l’écoute de la piste à la seconde près.

Voilà, on en a terminé avec la première rangée d’éléments du lecteur musical. Pour vérifier que l’affichage est correct, j’aimerais que tu effaces tous les éléments enfants du BottomLayout pour lui assigner tous les composants définis dans ce chapitre.

Pour cela, tu seras sûrement tenté d’écrire quelque chose comme :

Nom du fichier :MusicPlayerView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

Grid BottomLayout => new Grid
{
    ...
    Children =
    {
        ElapsedTime.Row(0).Column(1),
        TimeTracker.Row(0).Column(2),
        TotalTime.Row(0).Column(5)
    }
};

À première vue, ça semble pas mal ! Cependant, si tu démarres l’application, tu constateras qu’il y a un léger problème d’affichage :

Pas de panique ! On va voir tout de suite comment réajuster cela.

Bien utiliser les Grid

Si tu te rappelles, on a initialement divisé le BottomLayout en 7 colonnes. Or, si notre code positionne bien notre Slider à partir de la case n°3 de la première ligne, il ne lui dit pas clairement où s’arrêter ! On pourrait alors simplement dire au Slider de s’étaler sur les colonnes suivantes, comme ceci :

Pour cela, on utilise la méthode ColumnSpan() pour demander au Slider de s’étendre jusqu’à 3 colonnes à partir de la case n°3 :

Nom du fichier :MusicPlayerView.cs

1

TimeTracker.Row(0).Column(2).ColumnSpan(3)

Et voilà on en a vraiment fini ! Relançons l’application pour voir ce que ça donne :

Bon, c’est vrai, c’est beau mais ça ne fait pas grand chose ! Mais on va d’abord finir la partie visuelle avant de basculer vers la partie plus fonctionnelle de l’application.

D’ailleurs, on a encore plein de boutons à mettre en place ! Notre objectif pour le prochain chapitre : contrôler la lecture du média.

Plus d’articles dans la même série:

Introduction
Installer le projet
Première exécution du projet
MVVM, la clé de la réussite
D’une page à l’autre
Les fondations
Le temps d’écoute
Les contrôles de lecture du média
Le niveau sonore
Écouter de la musique
Contrôler la tête de lecture