A travers cet article, je vous présente les notions de base de Jetpack Compose. Cette boite à outils pour Android facilite la création d’éléments d’interface utilisateur à l’aide d’un code simple et expressif et élimine le besoin des fichiers XML complexes.
Jetpack Compose un cadre réactif et déclaratif qui simplifie le processus de création et de gestion des éléments de l’interface utilisateur, et permet de construire des applications de manière plus efficace et plus flexible. Jetpack Compose permet aux développeurs de créer des éléments d’interface utilisateur à l’aide d’un code simple et expressif et élimine le besoin de fichiers XML de mise en page complexes. Il offre également un support intégré pour les animations, l’accessibilité et d’autres fonctionnalités avancées.
@Composable
fun MyButton() {
Column(
modifier = Modifier.fillMaxWidth().padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalGravity = Alignment.CenterHorizontally
) {
Button(
onClick = { /* Perform action */ },
modifier = Modifier.padding(8.dp),
text = "Click me!"
)
}
}
Cet exemple de code crée un bouton qui est centré dans une colonne, avec un padding de 16 dp autour de la colonne, et 8 dp autour du bouton. Le texte du bouton est défini sur “Click me !” et lorsque le bouton est cliqué, il exécute une action.
Vous pouvez utiliser ce bouton dans votre fonction de composition et appliquer n’importe quelle personnalisation ; par exemple, vous pouvez changer la couleur du texte en ajoutant MaterialTheme.typography() et en passant votre textColor.
Composables
Un composable est une fonction qui décrit une partie de l’interface utilisateur. Elle reçoit des entrées (telles que des données ou des paramètres) et renvoie une description des éléments de l’interface utilisateur qui doivent être affichés. Ces éléments d’interface utilisateur sont ensuite rendus à l’écran.
Une fonction composable est annotée de l’annotation @Composable, qui indique au compilateur que cette fonction peut être utilisée dans la composition de l’interface utilisateur.
Lorsqu’une fonction composable est appelée, elle crée une nouvelle portée de composition. À l’intérieur de cette portée, d’autres fonctions composables peuvent être appelées, ce qui permet de créer des éléments d’interface utilisateur imbriqués. Cela est similaire à la façon dont un fichier XML de mise en page définit des vues imbriquées.
Par exemple, dans l’exemple de code précédent, la fonction MyButton est une fonction composable qui décrit un élément d’interface utilisateur de type bouton. Elle ne prend aucune entrée, mais elle renvoie la description d’un bouton qui peut être rendu à l’écran. Le bouton est créé en appelant le composable Button, qui est fourni par la bibliothèque Jetpack Compose.
Les fonctions composables peuvent également prendre des entrées, comme des données ou des paramètres. Ces entrées peuvent être utilisées pour personnaliser les éléments de l’interface utilisateur qui sont créés.
Principales mises en page
Colonne
Utilisée pour empiler verticalement les éléments de l’interface utilisateur. Chaque élément enfant est placé sous le précédent. Il prend une liste d’enfants et un modificateur en entrée.
Column(
modifier = Modifier.fillMaxWidth().padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalGravity = Alignment.CenterHorizontally
) {
Button(
onClick = { /* Perform action */ },
text = "Click me!"
)
Text("Hello World")
}
Row
Utilisé pour empiler les éléments de l’interface utilisateur horizontalement. Chaque élément enfant est placé à côté du précédent. Il prend une liste d’enfants et un modificateur en entrée.
Row(
modifier = Modifier.fillMaxWidth().padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalGravity = Alignment.CenterHorizontally
) {
Button(
onClick = { /* Perform action */ },
text = "Click me!"
)
Text("Hello World")
}
Box
Empile ses enfants les uns sur les autres. L’ordre d’empilement est défini par l’ordre dans lequel les enfants sont appelés dans la déclaration Box, le premier enfant étant positionné au bas de la pile. Elle n’a pas de couleur ou de forme d’arrière-plan. Elle prend une liste d’enfants et un modificateur en entrée.
Box(modifier = Modifier.padding(16.dp)) {
Text("Hello World")
}
Surface
Utilisée pour créer un conteneur pour d’autres éléments de l’interface utilisateur. Il ajoute une couleur de fond ou une image au conteneur et peut également avoir une forme définie. Il prend un élément enfant et un modificateur en entrée.
Surface(color = Color.Yellow, shape = RoundedCornerShape(10.dp)) {
Text("Hello World")
}
Carte
Utilisée pour créer un conteneur avec une couleur de fond et une forme définie, généralement avec une ombre. Il prend un élément enfant et un modificateur en entrée.
Card(elevation = 8.dp) {
Text("Hello World")
}
Scaffold
Utilisé pour créer la structure de base d’une application, telle qu’une barre d’application supérieure, une barre de navigation inférieure et un bouton d’action flottant. Il prend un élément enfant et un modificateur en entrée.
Scaffold(
topBar = {
TopAppBar(title = { Text("My App") })
},
floatingActionButton = {
FloatingActionButton(
onClick = { /* Perform action */ },
icon = { Icon(Icons.Filled.Add) }
)
},
bodyContent = {
Text("Hello World")
}
)
Liste
Utilisée pour créer une liste d’éléments défilants. Elle prend une liste de données et une fonction lambda en entrée. La fonction lambda est utilisée pour définir comment chaque élément de la liste doit être affiché.
List(data) { item ->
Text(item.name)
}
A noter qu’il s’agit d’exemples de base et que vous pouvez personnaliser la mise en page et ses fonctionnalités en fonction de vos besoins.
Modifiers
Dans Jetpack Compose, les Modifiers sont des objets qui sont utilisés pour changer l’apparence ou le comportement des éléments de l’interface utilisateur. Ils sont appliqués aux fonctions composables à l’aide du paramètre modificateur. Les Modifiers peuvent être utilisés pour changer la disposition, la taille, la position et d’autres propriétés des éléments de l’interface utilisateur.
Voici quelques-unes des principales propriétés des Modifiers dans Jetpack Compose :
Layout
Les modificateurs peuvent être utilisés pour modifier la disposition des éléments de l’interface utilisateur, comme le rembourrage, la marge et l’alignement.
Text("Hello World",
modifier = Modifier.padding(16.dp)
)
Size
Les modificateurs peuvent être utilisés pour changer la taille des éléments de l’interface utilisateur, comme la largeur, la hauteur et le rapport d’aspect.
Image(
asset = image,
modifier = Modifier.preferredHeight(200.dp)
)
Position
Les modificateurs peuvent être utilisés pour changer la position des éléments de l’interface utilisateur, comme les coordonnées x et y.
Text("Hello World",
modifier = Modifier.offset(x = 16.dp, y = 32.dp)
)
Visibility
Les modificateurs peuvent être utilisés pour contrôler la visibilité des éléments de l’interface utilisateur, par exemple pour masquer ou afficher des éléments.
Text("Hello World",
modifier = Modifier.visibility(visible = true)
)
Background
Les modificateurs peuvent être utilisés pour ajouter une couleur de fond, des formes et des images aux éléments de l’interface utilisateur.
Surface(color = Color.Yellow, shape = RoundedCornerShape(10.dp)) {
Text("Hello World")
}
Clickable
Les modificateurs peuvent être utilisés pour rendre un élément d’interface utilisateur cliquable et exécuter une action lorsqu’il est cliqué.
Button(
onClick = { /* Perform action */ },
text = "Click me!"
)
Ce ne sont là que quelques exemples des propriétés que peuvent avoir les modificateurs, et il existe de nombreuses autres propriétés et fonctions que vous pouvez utiliser en fonction de vos besoins. Les modificateurs peuvent être combinés de différentes manières pour créer des éléments d’interface utilisateur complexes avec différentes propriétés.
Remarque : Les Modifiers peuvent être combinés pour créer des éléments d’interface utilisateur complexes avec des propriétés différentes. L’ordre dans lequel les Modifiers sont appliqués peut affecter le résultat final.
Par exemple, vous pouvez vouloir ajouter un padding à un élément d’interface utilisateur, puis ajouter une bordure à cet élément. Dans ce cas, vous devez d’abord appliquer le modificateur de remplissage, puis le Modifiers de bordure.
Voici un exemple de la façon de combiner les Modifiers de remplissage et de bordure :
Text("Hello World",
modifier = Modifier.padding(16.dp)
.border(4.dp, Color.Red)
)
Ce code applique un padding de 16dp au composable Text et ajoute ensuite une bordure de 4dp avec une couleur rouge. Si vous inversez l’ordre des Modifiers dans les exemples ci-dessus, le résultat sera différent, il faut donc faire attention lorsque vous combinez des Modifiers.
Les Modifiers peuvent également être combinés avec le signe +, par exemple :
val padding = Modifier.padding(16.dp)
val border = Modifier.border(4.dp, Color.Red)
Text("Hello World",
modifier = padding + border
Annotations
Jetpack Compose possède plusieurs annotations qui sont utilisées pour fournir des fonctionnalités supplémentaires ou pour améliorer le processus de développement. Voici quelques-unes des annotations les plus couramment utilisées :
@Composable
Cette annotation est utilisée pour marquer une fonction comme étant composable. Elle indique au compilateur que la fonction peut être utilisée dans la composition de l’interface utilisateur.
@Composable
fun MyButton() {
Button(
onClick = { /* Perform action */ },
text = "Click me!"
)
}
@Preview
Cette annotation est utilisée pour créer un aperçu d’une fonction composable dans l’éditeur de conception d’Android Studio. Elle permet aux développeurs de voir les résultats de leurs modifications de code dans l’éditeur, sans avoir à exécuter l’application sur un appareil ou un émulateur.
@Preview(name = "My Button Preview")
@Composable
fun MyButtonPreview() {
MyButton()
}
@Model
Cette annotation est utilisée pour marquer une classe de données comme modèle pour une fonction composable. Elle indique au compilateur que la classe de données doit être utilisée comme source de vérité pour la fonction composable.
@Model
data class MyData(var text: String)
@Composable
fun MyText(data: MyData) {
Text(data.text)
}
@ExperimentalCoroutinesApi
Cette annotation est utilisée pour indiquer que le code utilise des coroutines qui sont considérées comme expérimentales. Cette annotation doit être utilisée lorsque vous utilisez les fonctions async et await.
@ExperimentalCoroutinesApi
fun myFunction() {
GlobalScope.launch {
// Coroutine code here
}
}
Ce ne sont que quelques exemples des annotations que Jetpack Compose fournit, et il y a beaucoup d’autres annotations que vous pouvez utiliser en fonction de vos besoins.
Il est important de noter que l’utilisation de certaines annotations peut changer entre les versions et il est préférable de vérifier la documentation officielle avant de les utiliser.
