Utilisez Jetpack Compose pour développer des interfaces Android dynamiques

S'il fallait résumer visuellement une application mobile, nous pourrions dire que c’est principalement un assemblage de textes, d’icônes, de boutons, d'images et de champs de saisie. Commençons par les composantsTextetIcon.

Créez du texte

Un texte constitue un élément central dans toute interface. Il offre une multitude de possibilités de personnalisation, comme le choix du style, de la couleur, de la taille et de la police. De plus, il doit être possible d'interagir avec, par exemple en le sélectionnant pour le copier-coller ou en cliquant dessus.

Jetpack Compose propose deux composants pour créer du texte personnalisable :

• Le composantBasicTextoffre une implémentation de base.

• Le composantText, basé surBasicText, applique des styles conformes aux recommandations de Material Design. Nous allons explorer la notion de Material Design dans le chapitre “Gérez le style global de l’application grâce aux thèmes”.

Dans ce cours, nous utiliserons le composantText, que nous avons d’ailleurs déjà employé dans la première partie de ce cours.

Nous manipulerons également dans ce chapitre le composantIconqui permet de représenter une icône. Elle peut être vectorielle (décrite sous forme de vecteur et de forme géométrique) ou matricielle (composée de pixels).

Manipulez le composantTextpour la localisation

Explorons maintenant l’utilisation la plus simple que nous pouvons faire de ce composant. Dans cet exemple, le seul paramètre obligatoire de la fonction est le paramètretext.

@Composable 
fun Title() { 
    Text(text = "Podcasts") 
}

Cependant, nous pouvons déjà effectuer une première amélioration de ce composant en externalisant la chaîne de caractères dans le ou les fichiers de ressourcesstrings.xmlde notre projet, afin d’utiliser notre application dans plusieurs langues. 

Pour récupérer une chaîne de caractères correctement localisée à partir des ressources de l’application , il faut utiliser la fonction composablestringResource. Elle prend en paramètre l’identifiant de la ressource et retourne la chaîne de caractères correspondante. Cela donne :

@Composable 
fun Title() { 
    Text(text = stringResource(R.string.podcasts)) 
}

Découvrez la signature du composantText

Poursuivons notre exploration de la fonction composableText en accédant au code source de Jetpack Compose pour observer la signature de cette fonction et de ses paramètres. 

Pour accéder au code source d'un élément provenant d'une dépendance dans Android Studio, vous pouvez soit :

1. Placer votre souris sur la fonction et appuyer surCmd + B ou CTRL + B.

2. Faire un clic droit sur la fonction, sélectionnerGo To, puis Declaration or Usage.

Voici donc la signature de la fonctionText : 

@Composable
fun Text(
   text: String,
   modifier: Modifier = Modifier,
   color: Color = Color.Unspecified,
   fontSize: TextUnit = TextUnit.Unspecified,
   fontStyle: FontStyle? = null,
   fontWeight: FontWeight? = null,
   fontFamily: FontFamily? = null,
   letterSpacing: TextUnit = TextUnit.Unspecified,
   textDecoration: TextDecoration? = null,
   textAlign: TextAlign? = null,
   lineHeight: TextUnit = TextUnit.Unspecified,
   overflow: TextOverflow = TextOverflow.Clip,
   softWrap: Boolean = true,
   maxLines: Int = Int.MAX_VALUE,
   minLines: Int = 1,
   onTextLayout: ((TextLayoutResult) -> Unit)? = null,
   style: TextStyle = LocalTextStyle.current
) {

Nous n’allons pas passer en revue chacun de ces paramètres individuellement car leurs noms sont généralement explicites. Mais si l’on modifie, par exemple, notre composant initial comme ci-dessous, alors nous obtenons le texte “Podcasts” écrit en italique, en bleu et en 18sp.

@Preview
@Composable
fun PodcastTitle() {
   Text(
       text = stringResource(R.string.podcasts),
       fontStyle = FontStyle.Italic,
       fontSize = 18.sp,
       color = Color.Blue,
       modifier = Modifier.padding(horizontal = 16.dp)
   )
}

Vous pouvez donc voir que pour modifier des propriétés inhérentes au texte en lui-même, nous passons par des paramètres dédiés commefontSizeetc. En revanche, si vous souhaitez modifier des paramètres plutôt liés à l’apparence globale du composant, comme sa couleur de fond, sa forme, sa position, il faut alors faire appel au paramètremodifierde typeModifierdont la valeur par défaut est un singletonModifier. Ce type est spécifique à Jetpack Compose et est utilisable au sein de tous ses composants.

Modifiez l’apparence d’un composant grâce auxModifier

Le paramètremodifier permet de décorer un composant ou de modifier son comportement. 

Grâce à lui, nous allons pouvoir :

• Modifier l'aspect visuel du composant en ajustant sa couleur de fond, sa forme, son contour, etc.,

• Définir la disposition du composant à l'intérieur de son parent,

• Préciser les dimensions du composant,

• Gérer des interactions telles que les clics, le défilement, le glisser-déposer, etc.,

• Intégrer des informations pour améliorer l'accessibilité du composant,

• Animer le composant.

Uniformisez la modification d’un composant

Toutes ces modifications sont maintenant réalisées via le paramètremodifieret non plus via un paramètre spécifique pour chaque type de modification. 

Par exemple, pour ajouter un padding à un composantTextViewsans Jetpack Compose, on utilisait son paramètrepaddingHorizontal:

<TextView
   android:id="@+id/introWelcomeTitle"
   style="@style/Title"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:paddingHorizontal="8dp"
/>

Avec Jetpack Compose, on va maintenant utiliserModifier.padding(): 

@Preview
@Composable
fun TitleWithBackground() {
   Text(
       text = stringResource(R.string.podcasts),
       modifier = Modifier.padding(horizontal = 8.dp),
   )
}

Dans cet exemple nous avons utilisé et adapté le modifier

fun Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp). Sachez qu’il existe d’autres fonctionspadding. Par exemplefun Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp)
  , permet de specifier la marge au début, au-dessus, à la fin et en dessous du composant. Comme toujours, avec Jetpack Compose, votre réflexe doit être de regarder le code source, pour voir toutes les fonctions qui s’offrent à vous.

Modifiez les marges d’une icône

Pour appliquer une marge à un composant de typeIcon, on peut écrire par exemple :

@Preview
@Composable
fun SimpleIcon()  {
   Icon(
       imageVector = Icons.Default.Downloading,
       contentDescription = "Téléchargement en cours",
       modifier = Modifier.padding(all = 4.dp),
   )
}

Modifiez la couleur de fond d’un texte

Pour effectuer ces opérations, Jetpack Compose fournit un ensemble d’extensions de fonctions. Prenons par exemple la couleur de fond d’un texte. Pour la modifier, il suffit de lui appliquer le modifierModifier.background(XX), en remplaçant bien sûr  XX  par un objet de typeColor.

Si nous reprenons notre composantTitle, cela donne :

@Preview
@Composable
fun Title() {
   Text(
       text = stringResource(R.string.podcasts),
       modifier = Modifier.background(Color(0xFFFF7043)),
   )
}

Appliquez plusieurs modifications

Eh bien, il faut chaîner lesModifier. Cela permet de combiner plusieurs modifications. Ainsi, pour appliquer un fond orange et une marge horizontale de 8 DP au composantTitle, cela donne :

@Preview
@Composable
fun TitleWithBackground() {
   Text(
       text = stringResource(R.string.podcasts),
       modifier =
           Modifier
               .background(Color(0xFFFF7043))
               .padding(horizontal = 8.dp),
   )
}

Ordonnez vos modifications

Bon, pour notre composantTitle, cela n’a pas vraiment d’importance, car si vous inversez l’ordre des  Modifieren écrivant  Modifier.padding(horizontal = 8.dp).background(Color(0xFFFF7043)), cela ne change rien visuellement. Mais prenons un exemple où l’ordre va impacter le rendu visuel de notre composant.  Ajoutons .background(Color.Gray)à la chaîne desModifierdu composantTitle. Cela donne :

@Preview
@Composable
fun Title() {
   Text(
       text = stringResource(R.string.podcasts),
       modifier =
           Modifier
               .background(Color(0xFFFF7043))
               .padding(horizontal = 8.dp)
               .background(Color.Gray),
   )
}

Si l’on décompose l’application des  Modifier  sur le composantTextafin d’arriver au rendu final, cela donne : 

Comme vous pouvez le constater en étape 3, on obtient un texte “Podcasts” sur fond gris, avec deux bordures à gauche et à droite de couleur orange. Si vous inversez l’ordre, par exemple en mettant en premier la couleur grise, puis le padding de 10 DP et enfin la couleur orange, vous obtiendrez le rendu suivant :

Voici le code correspondant :

@Preview
@Composable
fun PodcastTitle() {
   Text(
       text = stringResource(R.string.podcasts),
       modifier =
       Modifier
           .background(Color.Gray)
           .padding(horizontal = 8.dp)
           .background(Color(0xFFFF7043)),
   )
}

Cette vidéo récapitule les étapes principales pour ajouter et styliser les composants texte et icône. Le choix des couleurs dans la vidéo peut varier de celui opté dans le texte. Pas de panique, car les étapes pour le faire sont similaires.

À vous de jouer !

Contexte

Il est temps de démarrer les développements de l’applicationBestPodcast. Pour cela, vous allez travailler en binôme avec Charlie, développeuse Android. Elle a déjà créé et apporté des modifications sur l’objetPodcast. Votre mission est de les intégrer à votre projet et d’améliorer cet objet. 

• Charlie a modélisé l’objetPodcastreprésentant un podcast avec un identifiant unique, un titre, une description, un logo et un booléen permettant de connaître le statut de téléchargement.

data class Podcast(
   val id: String,
   val title: String,
   val description: String,
   val logoUrl: String,
   val downloadStatus: DownloadStatus =
DownloadStatus.Online,
)

• Ensuite, elle a ajustéPodcastItempour qu'il accepte un objetpodcastcomme paramètre et adapté son contenu en conséquence, en remplaçant, par exemple, les occurrences detitle parpodcast.title.

• Elle a également apporté les modifications nécessaires à tous les endroits où le composantPodcastItemétait utilisé.

• Enfin, pour vous faciliter la vie en attendant de récupérer les données du véritable back-end de l’application, elle a également concocté des données de tests, que vous pouvez récupérer via la classePodcastsFactory. Toutes ses modifications sont disponibles ici sur GitHub.

Consignes

1. Intégrez ses modifications à votre projet BestPodcast.

2. Dans le composantPodcastItem, une anomalie visuelle qui peut être résolue en utilisant les Modifiers a été identifiée. Actuellement, les icônes utilisées pour représenter l'état de téléchargement ont une taille de 24 DP x 24 DP. Cependant, le composantIconButtonutilisé pour l'étatOnlineapplique une marge supplémentaire afin de garantir que l'icône finale respecte les exigences d'accessibilité en mesurant 48 DP x 48  DP. Utilisez des modifiers pour ajouter une marge aux icônes "Downloading" et "Downloaded", afin de maintenir une harmonie visuelle lors des changements de statut. Voir l’exemple ci-dessous.

3. Ajoutez un rond autour de l'icône représentant le statutOnline, ainsi qu’un fond jaune, de sorte à obtenir quelque chose comme ça.
Pour cela, vous pouvez utiliser les Modifiers suivants :.clippour découper selon une forme,  .borderpour ajouter une bordure ainsi que.paddinget.background que vous connaissez. Attention à l’ordre dans lequel vous les utilisez.

Livrables

Votre projet sur Android Studio doit être conforme aux consignes ci-dessus.

En résumé

• Le composantTexta un seul paramètre obligatoire,text, qui contient la chaîne de caractères à afficher.

• Le composantTextpossède un paramètre facultatif de type  Modifier  permettant de modifier son apparence.

• Le paramètremodifierpermet de changer par exemple l'aspect visuel, la disposition, les dimensions, les interactions possibles et les propriétés d'accessibilité du composant.

• Pour appliquer plusieurs modifications avec lesModifiers, il suffit de les chaîner.

• Les modifications ajoutées sont appliquées au composant dans l'ordre où elles sont chaînées dans le  Modifier.

Comprendre le fonctionnement des Modifiers sur le composantTextetIconétait une étape clé dans votre prise en main de Jetpack Compose. Nous ne pouvions pas explorer le reste de la boîte à outils sans en saisir leur utilité. Maintenant que c’est chose faite, retroussez vos manches et préparez-vous à explorer le reste de cette boîte à outils.