Android Academy · Leçon

Options et actions du clavier

Découvrez les types de clavier, les actions IME et le focus.

Options et actions du clavier est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Le clavier adapté à chaque situation

Un formulaire soigné affiche le clavier à l'écran approprié : des chiffres pour un téléphone, une touche @ pour une adresse e-mail, un bouton « Suivant » pour passer d'un champ à l'autre. Compose contrôle tout cela avec KeyboardOptions et KeyboardActions.

Dans cette leçon, vous configurerez les types de clavier et les actions IME, et vous gérerez le focus entre les champs.

Choisir le type de clavier

Passez KeyboardOptions à un champ de texte et définissez keyboardType. Le système affiche alors un clavier adapté aux données.

Valeurs courantes : Text, Number, Email, Phone, Password.

var email by remember { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Email
    )
)

Un clavier numérique

Pour une quantité ou un PIN, utilisez KeyboardType.Number. Combinez-le avec un filtrage des saisies afin que seuls les chiffres soient acceptés, comme vous l'avez appris dans la leçon sur la validation.

var pin by remember { mutableStateOf("") }

OutlinedTextField(
    value = pin,
    onValueChange = { pin = it.filter { c -> c.isDigit() } },
    label = { Text("PIN") },
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Number
    )
)

Masquer un mot de passe

Les mots de passe doivent être masqués. Utilisez visualTransformation = PasswordVisualTransformation() avec le type de clavier dédié aux mots de passe.

L'état contient toujours les vrais caractères ; seul l'affichage est masqué.

var password by remember { mutableStateOf("") }

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    visualTransformation = PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Password
    )
)

Le bouton d'action IME

La touche située en bas à droite du clavier est l'action IME. Définissez-la avec imeAction. Utilisez Next pour passer au champ suivant et Done pour le dernier champ.

OutlinedTextField(
    value = name,
    onValueChange = { name = it },
    label = { Text("Name") },
    keyboardOptions = KeyboardOptions(
        imeAction = ImeAction.Next
    )
)

Réagir aux actions IME

Pour réagir lorsque l'utilisateur appuie sur ce bouton, transmettez KeyboardActions. Chaque action (onNext, onDone, onSearch) est une lambda que vous implémentez.

Ici, appuyer sur Done masque le clavier.

val keyboard = LocalSoftwareKeyboardController.current

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
    keyboardActions = KeyboardActions(
        onDone = { keyboard?.hide() }
    )
)

Déplacer le focus vers le champ suivant

Dans un formulaire comportant plusieurs champs, le bouton Suivant doit passer au champ suivant. Utilisez LocalFocusManager et appelez moveFocus.

val focusManager = LocalFocusManager.current

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
    keyboardActions = KeyboardActions(
        onNext = { focusManager.moveFocus(FocusDirection.Down) }
    )
)

Effacer le focus avec Done

Dans le dernier champ, effacer le focus ferme le clavier et désélectionne le champ. Appelez focusManager.clearFocus() dans onDone.

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
    keyboardActions = KeyboardActions(
        onDone = { focusManager.clearFocus() }
    )
)

Demander le focus par programmation

Vous pouvez parfois vouloir qu'un champ reçoive le focus dès l'apparition de l'écran, par exemple une zone de recherche. Associez-lui un FocusRequester et demandez le focus dans un LaunchedEffect.

val focusRequester = remember { FocusRequester() }

LaunchedEffect(Unit) { focusRequester.requestFocus() }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    modifier = Modifier.focusRequester(focusRequester),
    label = { Text("Search") }
)

Majuscules et correction automatique

KeyboardOptions contrôle également la capitalization et autoCorrectEnabled. Mettez chaque mot en majuscule pour un nom, ou désactivez la correction automatique pour un nom d'utilisateur afin qu'il ne soit pas déformé.

OutlinedTextField(
    value = fullName,
    onValueChange = { fullName = it },
    label = { Text("Full name") },
    keyboardOptions = KeyboardOptions(
        capitalization = KeyboardCapitalization.Words,
        autoCorrectEnabled = false
    )
)

Kotlin pur : choisir une action IME

La logique consistant à utiliser « Suivant » pour chaque champ sauf le dernier, et « Terminé » pour le dernier, relève du Kotlin standard. Ici, nous associons les positions des champs au libellé d'action qu'ils doivent afficher.

fun imeActionFor(index: Int, lastIndex: Int): String =
    if (index == lastIndex) "Done" else "Next"

fun main() {
    val fields = listOf("name", "email", "password")
    fields.forEachIndexed { i, field ->
        println("$field -> ${imeActionFor(i, fields.lastIndex)}")
    }
}

Vérification rapide

Vous voulez que le bouton en bas à droite du clavier affiche « Suivant » et que, lorsqu'on appuie dessus, le focus passe au champ situé en dessous. De quels deux éléments avez-vous besoin ?

Récapitulatif

Vous savez maintenant créer des formulaires qui exploitent intelligemment le clavier :

KeyboardOptions définit keyboardType, imeAction, les majuscules et la correction automatique.
Masquez les mots de passe avec PasswordVisualTransformation.
KeyboardActions réagit aux actions Suivant/Terminé/Rechercher.
LocalFocusManager déplace ou efface le focus ; FocusRequester donne le focus à un champ à la demande.

La boîte à outils de création de formulaires est maintenant complète : saisie, état, validation et clavier. Vous êtes prêt à créer des formulaires Compose soignés et agréables à utiliser.

Questions Fréquemment Posées

La leçon « Options et actions du clavier » est-elle gratuite ?

Oui — le texte complet de « Options et actions du clavier » 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 « Options et actions du clavier » ?

Découvrez les types de clavier, les actions IME et le focus. 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 4 sur 4.

Combien de temps prend la leçon « Options et actions du clavier » ?

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

← Retour à Android Academy