Une interface riche et animée

Les composants Materials

Une librairie de composants personnalisables

Afin de construire des interfaces à la fois riches, personnalisables et homogènes au sein du système Android, la bibliothèque Compose Material offre un ensemble de composants typiques, facilitant la vie des développeurs et développeuses. Pour accéder à ces composants, il suffit d’ajouter la dépendance suivante, dans le bloc dependencies du fichier build.gradle du module concerné de notre projet :

implementation 'androidx.compose.material:material'

Nous avons déjà ajouté cette dépendance dans le chapitre Les bases de Compose UI de ce livre. Elle nous a permis d’accéder au composant MaterialTheme, pour personnaliser le thème de notre application en appliquant les recommandations de Material Design. Nous nous sommes également servis de cette dépendance pour accéder aux composants standards : Text, TextField, Button, etc.

À l’heure actuelle, cette bibliothèque fournit au total plus d’une trentaine de composants. Voici une liste non exhaustive de ces composants riches et structurants au sein d’une application :

Nom du composant	Description
TopAppBar et BottomAppBar	Menus situés respectivement en haut et en bas de l’écran. Il contient typiquement des boutons permettant d’effectuer des actions.
BottomNavigation	Menu de navigation situé en bas de l’écran. Comme son nom l’indique, il permet de naviguer entre les fonctionnalités principales d’une application.
AlertDialog	Fenêtre qui s’affiche en superposition de l’application.
Card	Conteneur sous forme de carte, dont le contenu, l’élévation, l’ombre, les couleurs et les bordures sont facilement personnalisables.
ModalDrawer et BottomDrawer	Panneaux...

Les animations

Les animations au sein d’une application modernes permettent, lorsqu’elles sont utilisées à bon escient, d’enrichir l’expérience utilisateur. Jetpack Compose propose une API simple à utiliser pour animer de manière esthétique le contenu de nos applications, et qui répond à de nombreux cas d’usage. Elle est composée de deux parties : une API haut niveau et une API bas niveau. Dans ce chapitre, nous aborderons uniquement certaines fonctions de son API haut niveau, afin d’illustrer différents cas d’usage qu’elle permet d’adresser en seulement quelques lignes de code. Nous n’aborderons pas toute l’API d’animation dans ce chapitre, étant donné la difficulté d’illustrer une animation dans un livre.

Animer la visibilité

La fonction Composable AnimatedVisibility permet d’animer l’apparition et la disparition d’un contenu.

@Composable 
fun AnimatedVisibility( 
    visible: Boolean, 
    modifier: Modifier = Modifier, 
    enter: EnterTransition = fadeIn() + expandIn(), 
    exit: ExitTransition = shrinkOut() + fadeOut(), 
    label: String = "AnimatedVisibility", 
    content: @Composable() AnimatedVisibilityScope.() -> Unit 
) { 
    /*...*/ 
}

Seuls les paramètres content et visible sont obligatoires :

Le paramètre content permet de déclarer le contenu à animer.
Le paramètre visible permet de définir une condition déterminant quand ce contenu doit être visible. L’animation d’apparition ou de disparition du contenu se déclenche lorsque la valeur de ce paramètre change.

Illustrons...