Boutons et clics
Ajoutez des boutons interactifs.
Boutons et clics est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.
Qu'est-ce qu'un bouton ?
Un Button est un élément composable sur lequel on peut appuyer. Lorsque l'utilisateur appuie dessus, votre application exécute du code.
Les boutons ont besoin d'une action onClick et d'un contenu à afficher, généralement un libellé Text.
Button(onClick = { }) {
Text("Tap me")
}La lambda onClick
Le paramètre onClick prend une lambda, c'est-à-dire du code placé entre accolades { }. Ce code s'exécute chaque fois que le bouton est pressé.
Vous pouvez y placer n'importe quelle logique, comme l'affichage d'un message dans les journaux ou la modification de données.
Button(onClick = {
println("Clicked!")
}) {
Text("Click")
}Contenu du bouton
Le contenu placé entre les accolades finales est un RowScope. Vous pouvez y placer du texte, des icônes ou les deux.
La plupart des boutons contiennent simplement un libellé Text décrivant l'action.
Button(onClick = { }) {
Text("Save")
}Compter les clics avec un état
Pour réagir aux appuis, stockez une valeur avec remember et mutableStateOf. Lorsqu’elle change, l’interface se met à jour.
Ici, chaque appui ajoute un au compteur.
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: $count")
}Désactiver un bouton
Le paramètre activé contrôle si un bouton peut être utilisé. Définissez-le sur false pour le griser et bloquer les clics.
C’est utile tant qu’un formulaire est incomplet.
Button(
onClick = { },
enabled = false
) {
Text("Locked")
}OutlinedButton
OutlinedButton dessine uniquement une bordure, sans remplissage. Il fonctionne de la même manière, mais son apparence est plus légère.
Utilisez-le pour les actions secondaires placées à côté d’un bouton principal plus marqué.
OutlinedButton(onClick = { }) {
Text("Cancel")
}TextButton
TextButton affiche uniquement un libellé, sans bordure ni remplissage. C’est le style de bouton le plus discret.
Il convient bien aux actions peu mises en avant, comme Ignorer ou En savoir plus.
TextButton(onClick = { }) {
Text("Skip")
}Couleurs des boutons
Vous pouvez recolorer un bouton avec ButtonDefaults.buttonColors, en transmettant une containerColor pour l’arrière-plan.
Choisissez des couleurs qui correspondent à votre marque et restent lisibles.
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = Color.Green
)
) {
Text("Go")
}IconButton
IconButton est une petite zone ronde utilisable d’un appui, destinée à une seule icône, comme un cœur ou un menu.
Il n’a pas de libellé et permet donc de gagner de la place dans les barres d’outils.
IconButton(onClick = { }) {
Icon(Icons.Default.Favorite, contentDescription = "Like")
}Donner une forme à un bouton
Le paramètre forme modifie les coins. Utilisez RoundedCornerShape avec une valeur en dp pour obtenir des bords plus arrondis.
Les valeurs élevées donnent des boutons plus doux, en forme de pastille.
Button(
onClick = { },
shape = RoundedCornerShape(16.dp)
) {
Text("Rounded")
}Nommer les fonctions de clic
Pour garder un code ordonné, donnez à onClick une fonction nommée plutôt que d’utiliser une logique intégrée directement. L’interface reste ainsi lisible.
Transmettez la référence de la fonction ou appelez-la à l’intérieur de la lambda.
fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
Text("Save")
}Vérification rapide
Testez votre compréhension des boutons.
Récapitulatif
Vous avez appris que Button utilise onClick pour son action et un bloc de contenu pour son libellé. L’état associé à remember permet aux clics de modifier l’interface.
Vous avez également découvert OutlinedButton, TextButton, IconButton, ainsi que la manière de définir l’activation, les couleurs et la forme.
Ensuite, vous contrôlerez l’espacement avec padding.
Questions Fréquemment Posées
La leçon « Boutons et clics » est-elle gratuite ?
Oui — le texte complet de « Boutons et clics » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Boutons et clics » ?
Ajoutez des boutons interactifs. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Android Academy ?
Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Boutons et clics » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?
Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.