Toetsenbordopties en acties
Toetsenbordtypen, IME-acties en focus.
Toetsenbordopties en acties is een gratis Android Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Android Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Android Academy bevat in totaal 4 lessen.
Het juiste toetsenbord voor de taak
Een goed afgewerkte vorm toont het juiste schermtoetsenbord: cijfers voor een telefoonnummer, een @-toets voor e-mail en een knop "Volgende" om tussen velden te gaan. Compose regelt dit allemaal met KeyboardOptions en KeyboardActions.
In deze les stel je toetsenbordtypen en IME-acties in en beheer je de focus tussen velden.
Het toetsenbordtype kiezen
Geef KeyboardOptions door aan een tekstveld en stel keyboardType in. Het systeem toont dan een toetsenbord dat geschikt is voor de gegevens.
Veelgebruikte waarden: Text, Number, Email, Phone, Password.
var email by remember { mutableStateOf("") }
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") },
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email
)
)Een numeriek toetsenbord
Gebruik voor een hoeveelheid of pincode KeyboardType.Number. Combineer dit met invoerfiltering, zodat alleen cijfers worden geaccepteerd, zoals je in de les over validatie hebt geleerd.
var pin by remember { mutableStateOf("") }
OutlinedTextField(
value = pin,
onValueChange = { pin = it.filter { c -> c.isDigit() } },
label = { Text("PIN") },
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number
)
)Een wachtwoord verbergen
Wachtwoorden moeten worden afgeschermd. Gebruik visualTransformation = PasswordVisualTransformation() samen met het toetsenbordtype voor wachtwoorden.
De status bevat nog steeds de echte tekens; alleen de weergave wordt afgeschermd.
var password by remember { mutableStateOf("") }
OutlinedTextField(
value = password,
onValueChange = { password = it },
label = { Text("Password") },
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password
)
)De IME-actieknop
De toets rechtsonder op het toetsenbord is de IME-actie. Stel deze in met imeAction. Gebruik Next om naar het volgende veld te gaan en Done voor het laatste veld.
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text("Name") },
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Next
)
)Reageren op IME-acties
Geef KeyboardActions door om te reageren wanneer de gebruiker op die knop tikt. Elke actie (onNext, onDone, onSearch) is een lambda die je implementeert.
Hier verbergt het indrukken van Done het toetsenbord.
val keyboard = LocalSoftwareKeyboardController.current
OutlinedTextField(
value = text,
onValueChange = { text = it },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(
onDone = { keyboard?.hide() }
)
)De focus naar het volgende veld verplaatsen
Bij een vorm met meerdere velden moet de knop Volgende naar het volgende veld springen. Gebruik LocalFocusManager en roep moveFocus aan.
val focusManager = LocalFocusManager.current
OutlinedTextField(
value = email,
onValueChange = { email = it },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
keyboardActions = KeyboardActions(
onNext = { focusManager.moveFocus(FocusDirection.Down) }
)
)De focus wissen bij Done
Op het laatste veld verbergt het wissen van de focus het toetsenbord en wordt de selectie van het veld opgeheven. Roep focusManager.clearFocus() aan binnen onDone.
OutlinedTextField(
value = password,
onValueChange = { password = it },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(
onDone = { focusManager.clearFocus() }
)
)Programmatisch focus aanvragen
Soms wil je dat een veld meteen focus krijgt wanneer het scherm verschijnt, bijvoorbeeld een zoekvak. Koppel een FocusRequester en vraag focus aan in een LaunchedEffect.
val focusRequester = remember { FocusRequester() }
LaunchedEffect(Unit) { focusRequester.requestFocus() }
OutlinedTextField(
value = query,
onValueChange = { query = it },
modifier = Modifier.focusRequester(focusRequester),
label = { Text("Search") }
)Hoofdletters en autocorrectie
KeyboardOptions regelt ook capitalization en autoCorrectEnabled. Begin elk woord met een hoofdletter voor een naam, of schakel autocorrectie uit voor een gebruikersnaam zodat die niet wordt verminkt.
OutlinedTextField(
value = fullName,
onValueChange = { fullName = it },
label = { Text("Full name") },
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Words,
autoCorrectEnabled = false
)
)Puur Kotlin: een IME-actie kiezen
De logica van "Volgende voor elk veld behalve het laatste, Gereed voor het laatste" is gewone Kotlin. Hier koppelen we veldposities aan het actielabel dat ze moeten tonen.
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)}")
}
}Korte controle
Je wilt dat de knop rechtsonder op het toetsenbord "Volgende" toont en bij een tik de focus naar het veld eronder verplaatst. Welke twee onderdelen heb je nodig?
Samenvatting
Je kunt nu vormen bouwen die goed met het toetsenbord samenwerken:
KeyboardOptionssteltkeyboardType,imeAction, hoofdlettergebruik en autocorrectie in.- Scherm wachtwoorden af met
PasswordVisualTransformation. KeyboardActionsreageert op Volgende/Gereed/Zoeken.LocalFocusManagerverplaatst of wist de focus;FocusRequestergeeft een veld op verzoek focus.
Daarmee is de gereedschapskist voor het bouwen van vormen compleet: invoer, status, validatie en het toetsenbord. Je bent klaar om verzorgde, gebruiksvriendelijke Compose-vormen te bouwen.
Leer Kotlin met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 36
- Lessen
- 152
Veelgestelde vragen
Is de les “Toetsenbordopties en acties” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Android Academy, waaronder “Toetsenbordopties en acties”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Android Academy bevat in totaal 4 lessen.
Wat leer ik in “Toetsenbordopties en acties”?
Toetsenbordtypen, IME-acties en focus. Je oefent met Android Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Android Academy te beginnen?
Ervaring vooraf is niet nodig. Android Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Toetsenbordopties en acties”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Android Academy?
Ja. Elke les over Android Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- TextField en gebruikersinvoer
- Formulierstatus beheren
- Invoer valideren
- Toetsenbordopties en acties