Android Academy · Lección

Opciones y acciones del teclado

Tipos de teclado, acciones de IME y foco

Lección 4 de 413 pasos

Opciones y acciones del teclado es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

El teclado adecuado para cada tarea

Una forma bien diseñada muestra el teclado en pantalla correcto: dígitos para un teléfono, una tecla @ para el correo electrónico y un botón "Siguiente" para avanzar entre campos. Compose controla todo esto con KeyboardOptions y KeyboardActions.

En esta lección establecerá los tipos de teclado y las acciones IME, y gestionará el foco entre campos.

Elegir el tipo de teclado

Pase KeyboardOptions a un campo de texto y establezca keyboardType. El sistema mostrará entonces un teclado adecuado para los datos.

Valores habituales: 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 teclado numérico

Para una cantidad o un PIN, use KeyboardType.Number. Combínelo con un filtro de entrada para aceptar solo dígitos, como aprendió en la lección sobre validación.

var pin by remember { mutableStateOf("") }

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

Ocultar una contraseña

Las contraseñas deben ocultarse. Use visualTransformation = PasswordVisualTransformation() junto con el tipo de teclado para contraseñas.

El estado sigue almacenando los caracteres reales; solo se ocultan al mostrarlos.

var password by remember { mutableStateOf("") }

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

El botón de acción IME

La tecla inferior derecha del teclado es la acción IME. Establézcala con imeAction. Use Next para avanzar al campo siguiente y Done en el último campo.

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

Responder a las acciones IME

Para reaccionar cuando el usuario pulse ese botón, pase KeyboardActions. Cada acción (onNext, onDone, onSearch) es una lambda que debe implementar.

Aquí, al pulsar Done, se oculta el teclado.

val keyboard = LocalSoftwareKeyboardController.current

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

Mover el foco al campo siguiente

En una forma con varios campos, el botón Siguiente debería saltar al campo posterior. Use LocalFocusManager y llame a moveFocus.

val focusManager = LocalFocusManager.current

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

Borrar el foco al pulsar Done

En el último campo, borrar el foco cierra el teclado y anula la selección del campo. Llame a focusManager.clearFocus() dentro de onDone.

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

Solicitar el foco mediante programación

A veces querrá que un campo tenga el foco en cuanto aparezca la pantalla, como en un cuadro de búsqueda. Asocie un FocusRequester y solicite el foco en un LaunchedEffect.

val focusRequester = remember { FocusRequester() }

LaunchedEffect(Unit) { focusRequester.requestFocus() }

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

Uso de mayúsculas y autocorrección

KeyboardOptions también controla capitalization y autoCorrectEnabled. Escriba con mayúscula cada palabra para un nombre o desactive la autocorrección para un nombre de usuario, de modo que no se modifique incorrectamente.

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

Kotlin puro: elegir una acción IME

La lógica de "Next para todos los campos excepto el último y Done para el último" es Kotlin puro. Aquí asignamos a las posiciones de los campos la etiqueta de acción que deben mostrar.

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)}")
    }
}

Comprobación rápida

Quiere que el botón inferior derecho del teclado muestre "Next" y que, al pulsarlo, mueva el foco al campo inferior. ¿Qué dos elementos necesita?

Repaso

Ahora puede crear formas que aprovechan el teclado:

  • KeyboardOptions establece keyboardType, imeAction, las mayúsculas y la autocorrección.
  • Oculte las contraseñas con PasswordVisualTransformation.
  • KeyboardActions responde a Next/Done/Search.
  • LocalFocusManager mueve o borra el foco; FocusRequester enfoca un campo cuando se solicita.

Con esto se completa el conjunto de herramientas para crear formas: entradas, estado, validación y teclado. Ya está preparado para crear formas de Compose pulidas y fáciles de usar.

Gratis para empezar

Aprende Kotlin con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
36
Lecciones
152

Preguntas frecuentes

¿La lección «Opciones y acciones del teclado» es gratis?

Sí — el texto completo de «Opciones y acciones del teclado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Opciones y acciones del teclado»?

Tipos de teclado, acciones de IME y foco Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Opciones y acciones del teclado»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. TextField y entrada del usuario
  2. Gestión del estado de formularios
  3. Validación de entradas
  4. Opciones y acciones del teclado
← Volver a Android Academy