tails

Google vient d'annoncer sur son blog officiel la sortie de la nouvelle version stable d'Android Studio : Artic Fox 2020.3.1

Parmis les nouveautés, une a particulièrement retenu mon attention : le support de la boîte à outils Jetpack Compose qui vient d'ailleurs de passer en version stable 1.0.0.

Jetpack Compose a pour ambition de simplifier le développement d'applications Android.

Et la première différence notable avec le développement classique d'Android réside dans le fait que l'on ne décrit plus les interfaces par le biais de fichiers XML. On décrit toute l'interface dans le code Kotlin de notre application (car oui, Jetpack Compose se code en Kotlin, et non en Java). Chaque élément d'interface est codé dans une fonction -sans valeur de retour- et annotée par @Composable. Et elle peut faire appel à d'autre éléments @Composable, dont les éléments standards mis à notre disposition.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
@Composable
fun MonComposant() {
    Row {
        Text(text = "Hello", modifier = Modifier.background(color = Color.Blue))
        Text(text = "World", modifier = Modifier.background(color = Color.Yellow))
    }
}

(J'ai volontairement omis la liste des importations.)

Où Row et Text sont des @Composable fournis par la boîte à outils Jetpack Compose. Row permet d'agencer plusieurs composants sur une ligne, Text permet d'afficher du texte. Modifier est un objet permettant ici de personnaliser les composants textes, notamment la couleur de fond ici. Modifier et Color sont aussi fournis par la boîte à outil Jetpack Compose.

Rien ne nous interdit d'ajouter des paramètres afin de pouvoir décrire un composant personnalisable.

Enfin, une autre nouveauté, et non des moindres, c'est qu'il est désormais possible de prévisualiser le composant dans Android Studio, avant même qu'il soit déployé dans l'émulateur/le périphérique de test. Pour cela il suffit de créer un nouveau @Composable qui utilisera notre composant, et en ajoutant l'annotation @Preview :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
@Preview
@Composable
fun MonComposantPreview() {
    MonComposant()
}

Voici un aperçu, dont j'ai pu directement copier l'image depuis la Preview de mon composant :



Il y aurait évidemment beaucoup à dire pour introduire le développement d'applications avec Jetpack Compose : notamment la gestion d'états immutables/mutables, les composants standards, les layouts, la navigation, l'utilisation de ressources texte, l'utilisation de ressources images et images vectorielles ...

Je ne peux qu'inviter ceux qui désirent en savoir plus, à visiter la page de blog de Google, ainsi que la page officielle de Jetpack Compose, dont j'ai mis les liens en début de billet.