Android Academy · Lección

TextField y entrada del usuario

Capture texto del usuario en Compose

TextField y entrada del usuario es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 1 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.

Capturar la entrada del usuario

Casi todas las aplicaciones reales necesitan pedirle algo al usuario: un nombre, un correo electrónico o una consulta de búsqueda. En Jetpack Compose, el componente básico para introducir texto es TextField.

En esta lección aprenderá a mostrar un campo de texto, leer lo que escribe el usuario y mantener el campo sincronizado con el estado de la aplicación. Esta es la base de todos los formularios que creará.

Su primer TextField

Un TextField necesita dos cosas: un value (el texto actual que se mostrará) y una función de retorno de llamada onValueChange (qué hacer cuando el usuario escribe).

Compose es declarativo, por lo que el campo no almacena su propio texto. Usted conserva el texto en el estado y se lo vuelve a proporcionar. Este patrón se denomina elevación del estado.

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

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

Cómo funciona el ciclo del valor

La idea más importante es la siguiente: un TextField muestra exactamente lo que se le pasa a value. Cuando el usuario pulsa una tecla, Compose llama a onValueChange con el texto nuevo.

Guarde ese texto nuevo en el estado.
Los cambios de estado activan la recomposición.
El campo se vuelve a dibujar con el value actualizado.

Si olvida actualizar el estado dentro de onValueChange, el campo parecerá bloqueado porque value nunca cambia.

var name by remember { mutableStateOf("") }

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

Añadir una etiqueta y un texto de ayuda

Un campo de texto sin más no indica al usuario qué debe escribir. Añada un label (flota sobre el campo) y un placeholder (una indicación que se muestra cuando está vacío).

Estos pequeños detalles hacen que los formularios sean mucho más fáciles de entender.

var email by remember { mutableStateOf("") }

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

OutlinedTextField

Material Design ofrece dos estilos principales. TextField tiene un fondo relleno, mientras que OutlinedTextField dibuja un borde alrededor del campo. Comparten la misma API, por lo que cambiar de uno a otro es muy sencillo.

Los campos delineados son populares en los formularios porque se leen claramente al apilarlos verticalmente.

var username by remember { mutableStateOf("") }

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

Iconos iniciales y finales

Puede decorar un campo con iconos. leadingIcon aparece al principio (es ideal para un icono de búsqueda o correo electrónico) y trailingIcon, al final (a menudo es un botón para borrar).

Los iconos permiten entender de un vistazo la finalidad del campo.

var query by remember { mutableStateOf("") }

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

Un botón para borrar

Un patrón de UX habitual es una «x» pequeña que borra el campo. Muéstrela solo cuando haya texto, usando el espacio trailingIcon y un IconButton.

Observe que borrar solo consiste en volver a establecer el estado como una cadena vacía.

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

Una línea frente a varias líneas

De forma predeterminada, un TextField puede crecer hasta ocupar varias líneas. Para datos como un nombre o un correo electrónico, establezca singleLine = true para impedir que el usuario inserte un salto de línea.

Para notas más largas, déjelo como campo multilínea y, opcionalmente, limite la altura con maxLines.

var bio by remember { mutableStateOf("") }

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

Reaccionar a la entrada en tiempo real

Como usted controla el estado del texto, puede reaccionar al instante. Un ejemplo clásico es mostrar debajo del campo un recuento de caracteres en tiempo real.

Cada pulsación actualiza text, lo que recompone tanto el campo como el recuento que aparece debajo.

var text by remember { mutableStateOf("") }

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

Transformar la entrada

A veces querrá normalizar lo que escribe el usuario antes de almacenarlo. Dentro de onValueChange puede transformar primero el valor nuevo.

Aquí convertimos un nombre de usuario a minúsculas y eliminamos los espacios. Como usted controla el ciclo, el campo siempre muestra la versión limpia.

var handle by remember { mutableStateOf("") }

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

Kotlin puro: limpiar un identificador

La lógica de transformación anterior es simplemente Kotlin estándar. Puede probarla de forma aislada, sin necesidad de Android. Aquí se ejecuta la misma regla de limpieza de manera independiente.

Mantener este tipo de lógica en funciones puras facilita las pruebas unitarias.

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

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

Comprobación rápida

¿Qué ocurre si la función de retorno de llamada onValueChange de un TextField nunca actualiza el estado que se pasa a value?

Resumen

Ahora conoce los fundamentos de la entrada de texto en Compose:

TextField y OutlinedTextField reciben un value y una función de retorno de llamada onValueChange.
Conserva el texto en remember { mutableStateOf(...) } y actualícelo cada vez que cambie (elevación del estado).
label, placeholder, los iconos iniciales y finales y singleLine determinan el aspecto y el comportamiento.
Como usted controla el estado, puede reaccionar en tiempo real o transformar la entrada mientras el usuario escribe.

A continuación: gestionar el estado de un formulario completo, no solo el de un campo.

Preguntas frecuentes

¿La lección «TextField y entrada del usuario» es gratis?

Sí — el texto completo de «TextField y entrada del usuario» 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 «TextField y entrada del usuario»?

Capture texto del usuario en Compose 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 1 de 4.

¿Cuánto tiempo toma la lección «TextField y entrada del usuario»?

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

← Volver a Android Academy