Introduction à Android Compose
Par Valentin Brosseau / @c4software
Créé par Google
En 2019
Objectif : remplacer le XML
- Plus simple.
- Plus rapide.
- Plus lisible.
- Développer plus vite.
- Penser réutilisation.
- Animation plus simple.
À quoi ça ressemble ?
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}Repose sur une approche composant
Comme SwiftUI, Flutter… ou encore VueJS, React…
Le composant est un principe de base de la conception d'interface utilisateur moderne.
Un composant c'est quoi ?
À votre avis ?
- Un morceau d'interface.
- Réutilisable.
- Interactif.
- Indépendant.
- Imbriquable.
Des briques de base d'une interface.
Compose
- Librairie Kotlin à part entière.
- Remplace le XML pour les interfaces.
- Utilise un moteur de rendu (Skia).
Un moteur de rendu ?
Utilisable sur :
- Android (Maintenu par Google).
- Desktop (Compose Multiplatform).
- iOS (Compose Multiplatform).
- Web (Compose Multiplatform, encore en bêta).
Compose Multiplatform
- Maintenu par JetBrains.
- Fonctionne sur plusieurs plateformes.
- Intègre le fonctionnement natif de chaque plateforme.
Revenons à Android
- Compose est la nouvelle façon de faire des interfaces.
- Poussé par Google.
- Stable depuis 2021, en évolution constante.
- Largement adopté par les entreprises.
Change la façon de faire des interfaces. Et uniquement ça.
(Nous avons toujours besoin de Kotlin, de Java, de Gradle, de l'Android SDK, etc.)
Le fonctionnement
- Chaque composant est une fonction.
- Mis à jour en fonction de l'état de l'écran.
- Mise à jour automatique et temps réel.
Un exemple
var counter by remember { mutableStateOf(0) }
Button(onClick = { counter++ }) {
Text("Clique => ${counter}")
}Qu'observez-vous ? Comment ça fonctionne ?
Un autre exemple
var isLogin by remember { mutableStateOf(false) }
if (isLogin) {
Text("Bienvenue")
} else {
Button(onClick = { isLogin = true }) {
Text("Se connecter")
}
}Qu'observez-vous ? Comment ça fonctionne ?
Quelques composants de base
La structure
Column: Alignement vertical.Row: Alignement horizontal.Box: Alignement libre.
Les interactions
Button: Un bouton.TextField: Un champ de texte.Checkbox: Une case à cocher.Switch: Un interrupteur.Text: Un texte.- …
Beaucoup de composants sont déjà disponibles.
Repose sur le material design
Un exemple
Column {
Text("Hello")
Text("World")
}Un exemple
Row {
Text("Hello")
Text("World")
}Un exemple
Column {
Row {
Text("Hello")
Text("World")
}
Row {
Text("Hello")
Text("World")
}
}La réactivité
- Des variables d'état (Boolean, Int, String, etc.).
- Mais via des
Proxy(MutableState, MutableStateFlow, etc.).
Ce sont des variables qui peuvent être modifiées et qui vont déclencher une mise à jour de l'interface.
var counter by remember { mutableStateOf(0) }
var items by remember { mutableStateOf(listOf("A", "B", "C")) }
// ...S'utilise comme une variable normale.
Les traductions
Text(stringResource(R.string.hello))Comme sur Android classique. Le fichier strings.xml est toujours utilisé.
Les animations
var counter by remember { mutableStateOf(0) }
Column {
Button(onClick = { counter++ }) {
Text("Action")
}
AnimatedVisibility(visible = counter > 0) {
Text("Visible")
}
AnimatedContent(targetState = counter) { targetState ->
Text(text = "Count: $targetState")
}
}L'organisation du code est différente (mais similaire).
- Similaire à Android (Par écran et package).
- Découpage de la logique et de l'interface (MVVM).
Le ViewModel
- Le code qui gère la logique.
- Interagit avec les données seulement.
- Ne gère pas l'interface.
- Peut être testé ou remplacé sans toucher à l'interface.
Ça fait beaucoup de choses à apprendre.
Nous allons pratiquer ensemble.
Une dernière chose…
Jetpack Compose c'est jeune.
Il faut donc accepter que ça évolue vite / change / soit instable.
Pour nous accompagner dans cette transition, Google a créé :
Accompanist est voué à disparaître. Car les fonctionnalités seront intégrées à Compose.
Les ressources
Place à la pratique
Le TP d'introduction à Compose