0Pricing
Android Academy · Leçon

TextField et saisie utilisateur

Capturez du texte auprès de l’utilisateur dans Compose.

TextField et saisie utilisateur est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Capturer les saisies de l’utilisateur

Presque toute application réelle doit demander quelque chose à l’utilisateur : un nom, une adresse e-mail, une requête de recherche. Dans Jetpack Compose, l’élément de base pour saisir du texte est TextField.

Dans cette leçon, vous apprendrez à afficher un champ de texte, à lire ce que l’utilisateur saisit et à maintenir le champ synchronisé avec l’état de votre application. C’est la base de tous les formulaires que vous créerez.

Votre premier TextField

Un TextField a besoin de deux éléments : une value (le texte actuel à afficher) et un rappel onValueChange (l’action à effectuer lorsque l’utilisateur saisit du texte).

Compose est déclaratif : le champ ne stocke donc pas lui-même son texte. Vous conservez le texte dans l’état et le lui retransmettez. Ce modèle s’appelle le relevé d’état.

@Composable
fun NameField() {
    var name by remember { mutableStateOf("") }

    TextField(
        value = name,
        onValueChange = { name = it }
    )
}

Fonctionnement de la boucle de valeur

L’idée la plus importante est la suivante : un TextField affiche exactement ce que vous transmettez à value. Lorsque l’utilisateur appuie sur une touche, Compose appelle onValueChange avec le nouveau texte.

  • Vous enregistrez ce nouveau texte dans l’état.
  • La modification de l’état déclenche une recomposition.
  • Le champ est redessiné avec la value mise à jour.

Si vous oubliez de mettre à jour l’état dans onValueChange, le champ semblera figé, car value ne change jamais.

var name by remember { mutableStateOf("") }

TextField(
    value = name,
    onValueChange = { newText -> name = newText }
)

Ajouter un libellé et un texte indicatif

Un champ de texte nu n’indique pas à l’utilisateur ce qu’il doit saisir. Ajoutez un label (qui se place au-dessus du champ) et un placeholder (une indication affichée lorsque le champ est vide).

Ces petits détails rendent les formulaires beaucoup plus faciles à comprendre.

var email by remember { mutableStateOf("") }

TextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    placeholder = { Text("you@example.com") }
)

OutlinedTextField

Material Design propose deux styles principaux. TextField possède un arrière-plan rempli, tandis que OutlinedTextField dessine une bordure autour du champ. Ils partagent la même API, le changement est donc très simple.

Les champs avec bordure sont très utilisés dans les formulaires, car ils restent lisibles lorsqu’ils sont empilés verticalement.

var username by remember { mutableStateOf("") }

OutlinedTextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    singleLine = true
)

Icônes de début et de fin

Vous pouvez décorer un champ avec des icônes. Une leadingIcon apparaît au début, ce qui convient bien à une icône de recherche ou d’e-mail, et une trailingIcon à la fin, souvent pour un bouton d’effacement.

Les icônes rendent la fonction d’un champ évidente au premier coup d’œil.

var query by remember { mutableStateOf("") }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    label = { Text("Search") },
    leadingIcon = {
        Icon(Icons.Default.Search, contentDescription = null)
    }
)

Un bouton d’effacement

Un modèle d’expérience utilisateur courant consiste à afficher un petit « x » qui efface le champ. Affichez-le uniquement lorsque le champ contient du texte, en utilisant l’emplacement trailingIcon et un IconButton.

Remarquez qu’effacer le champ consiste simplement à rétablir l’état sur une chaîne vide.

var text by remember { mutableStateOf("") }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Note") },
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Default.Clear, contentDescription = "Clear")
            }
        }
    }
)

Une ligne ou plusieurs lignes

Par défaut, un TextField peut s’étendre sur plusieurs lignes. Pour un nom ou une adresse e-mail, par exemple, définissez singleLine = true afin que l’utilisateur ne puisse pas insérer de saut de ligne.

Pour des notes plus longues, laissez le champ sur plusieurs lignes et limitez éventuellement sa hauteur avec maxLines.

var bio by remember { mutableStateOf("") }

OutlinedTextField(
    value = bio,
    onValueChange = { bio = it },
    label = { Text("Bio") },
    maxLines = 4
)

Réagir instantanément à la saisie

Comme vous contrôlez l’état du texte, vous pouvez y réagir immédiatement. Un exemple classique consiste à afficher en temps réel le nombre de caractères sous le champ.

Chaque frappe met à jour text, ce qui recompose à la fois le champ et le compteur situé dessous.

var text by remember { mutableStateOf("") }

Column {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Tweet") }
    )
    Text("${text.length} / 280")
}

Transformer la saisie

Vous pouvez parfois vouloir normaliser ce que l’utilisateur saisit avant de l’enregistrer. Dans onValueChange, vous pouvez d’abord transformer la nouvelle valeur.

Ici, nous convertissons un nom d’utilisateur en minuscules et supprimons les espaces. Comme vous contrôlez la boucle, le champ affiche toujours la version nettoyée.

var handle by remember { mutableStateOf("") }

OutlinedTextField(
    value = handle,
    onValueChange = { input ->
        handle = input.lowercase().filterNot { it.isWhitespace() }
    },
    label = { Text("Handle") },
    singleLine = true
)

Kotlin pur : nettoyer un identifiant

La logique de transformation précédente est simplement du Kotlin standard. Vous pouvez la tester de manière isolée, sans Android. Voici la même règle de nettoyage exécutée seule.

Conserver une logique de ce type dans des fonctions pures facilite les tests unitaires.

fun cleanHandle(input: String): String =
    input.lowercase().filterNot { it.isWhitespace() }

fun main() {
    println(cleanHandle("  John Doe "))
    println(cleanHandle("ADA Lovelace"))
}

Vérification rapide

Que se passe-t-il si le rappel onValueChange d’un TextField ne met jamais à jour l’état transmis à value ?

Récapitulatif

Vous connaissez désormais les bases de la saisie de texte dans Compose :

  • TextField et OutlinedTextField acceptent une value et un rappel onValueChange.
  • Vous conservez le texte dans remember { mutableStateOf(...) } et le mettez à jour à chaque modification (relevé d’état).
  • label, placeholder, les icônes de début et de fin ainsi que singleLine définissent l’apparence et le comportement.
  • Comme vous contrôlez l’état, vous pouvez réagir en temps réel ou transformer la saisie au fur et à mesure que l’utilisateur écrit.

Ensuite : gérer l’état d’un formulaire entier, et pas seulement celui d’un champ.

Questions Fréquemment Posées

La leçon « TextField et saisie utilisateur » est-elle gratuite ?

Oui — le texte complet de « TextField et saisie utilisateur » 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 « TextField et saisie utilisateur » ?

Capturez du texte auprès de l’utilisateur dans Compose. 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 1 sur 4.

Combien de temps prend la leçon « TextField et saisie utilisateur » ?

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.

Toutes les leçons de ce cours

  1. TextField et saisie utilisateur
  2. Gérer l’état d’un formulaire
  3. Valider la saisie
  4. Options et actions du clavier
← Retour à Android Academy