Premiers pas

Avant de découvrir la bibliothèque Compose UI plus en détail, voyons pour commencer comment intégrer Jetpack Compose dans un projet Android.

Les dépendances Jetpack Compose

Faisons d’abord une mise au point sur les dépendances Gradle nécessaires pour utiliser Jetpack Compose. Nous avons vu dans le chapitre La genèse de Jetpack Compose que Jetpack Compose se découpe en trois parties principales : le Compiler, le Runtime et Compose UI.

Derrière ces trois parties se cachent en réalité plusieurs dépendances issues du repository Maven de Google. Actuellement, elles se distinguent en sept Groupes ID Maven principaux :

compose.compiler
compose.runtime
compose.ui
compose.foundation
compose.material
compose.material3
compose.animation

Ces différentes dépendances ont un calendrier d’évolution de versions indépendantes les unes des autres. Cependant, pour éviter de déclarer chaque version de chaque dépendance, il existe le BoM Compose. Un BoM étant un module Maven regroupant un ensemble de bibliothèques et leurs versions. Il n’est pas obligatoire d’utiliser le BoM même s’il simplifie la gestion des dépendances. Nous utiliserons donc le BoM dans ce livre.

Pour rappel, un Group ID Maven rassemble une ou plusieurs dépendances identifiées unitairement par leur Artifact ID. On peut par exemple simplifier la nomenclature d’une dépendance par : groupId:artifactId:version. Ce qui donne par exemple androidx.compose.ui:ui-tooling:1.1.1 où androidx. compose.ui est le groupId, ui-tooling est l’artifactId et 1.1.1 est la version de la dépendance.

Le groupID compose.compiler suit le rythme des évolutions de version du langage Kotlin. En effet, ce groupe correspond au compilateur de Compose qui n’est autre...

Modifier

Définition

Comme nous l’avons vu dans la section Aperçu d’un composant utilisant Compose UI, les Modifiers permettent de décorer un composant ou de modifier son comportement. Leur utilisation est commune à tous les composants disponibles dans la bibliothèque Compose UI. C’est pourquoi il est préférable dès maintenant de comprendre à quoi ils servent concrètement, comment ils fonctionnent et comment les utiliser.

À quoi sert un Modifier ?

Un Modifier va permettre par exemple de :

spécifier la taille d’un composant,
spécifier la disposition d’un composant au sein de son parent,
modifier l’apparence d’un composant en changeant par exemple sa couleur de fond, sa forme, son contour, etc.,
ajouter des informations à un composant pour améliorer son accessibilité,
animer un composant,
gérer des actions de type : clic, scroll, drag-and-drop, etc.

Compose UI fournit toute une panoplie de Modifiers permettant de gérer de manière uniforme ces modifications standard que l’on affecte au quotidien à tout type de composants. Par exemple, on peut vouloir configurer la taille d’une image, d’un texte, d’un layout, d’une icône, etc. Pourtant au sein de Compose UI, ces composants n’ont pas de paramètre height ou width. C’est via leur paramètre modifier que nous allons pouvoir configurer leur taille. En particulier grâce à l’extension de fonction Modifier.size(/*...*/).

// Incorrect 
Text( 
    text = "Exemple de texte", 
    height = 20.dp, // Ce paramètre n'existe pas 
    width = 20.dp // Ce paramètre n'existe pas 
) 
 
// Correct 
Text( 
    text...

Les thèmes

Pour s’assurer d’avoir un style homogène au sein d’une application, il est fortement recommandé d’utiliser MaterialTheme, fourni par la dépendance androidx.compose.material:material que nous avons précédemment ajouté dans le fichier build.gradle de notre module. Cette dépendance permet de styliser une application en appliquant les règles de design issues de Material Design. Elle fournit en particulier un ensemble de composants et d’outils permettant de personnaliser ce style pour mieux représenter la marque de notre application. Il est également possible d’appliquer nos propres règles de design.

Material Design désigne un ensemble de règles de design proposées par Google. Appliquer ces règles permet d’offrir une expérience utilisateur intuitive, homogène et esthétique.

Création d’un MaterialTheme

La notion de thème au sein de Material Design

La personnalisation des thèmes au sein de Material Design, consiste à modifier les couleurs, les formes et les typographies. Dans un premier temps, voyons ci-dessous plus en détail comment sont spécifiés ces trois attributs au sein de Material Design 2.

Les couleurs

Material Design 2 définit un ensemble de couleurs nommées sémantiquement, c’est-à-dire dont le nommage décrit l’intention de la couleur et non la couleur elle-même, par exemple Primary et non pas Purple. Nous retrouvons entre autres les noms de couleur suivants :

Primary pour définir la couleur principale de notre application et Secondary pour définir la couleur permettant d’accentuer certains éléments.
Background et Surface pour définir la couleur de fond des conteneurs de composants.
Un ensemble de couleurs préfixées...

Conclusion

Dans ce chapitre, nous avons découvert comment initialiser un projet utilisant Jetpack Compose, puis nous avons défini les notions communes à tous les composants qui constituent une interface avec Jetpack Compose : Les Modifiers, les thèmes ainsi que les bonnes pratiques liées à ces deux sujets. Nous sommes maintenant prêts pour développer des interfaces avec Jetpack Compose.

Les bases de Compose UI