Cuando los usuarios interactúan con tu app, suelen hacerlo con mecanismos de entrada que no son táctiles:
- Entornos de escritorio: Los usuarios navegan y, luego, ingresan datos con teclados de hardware y trackpads físicos.
- Android TV: Los usuarios navegan por la interfaz con el pad direccional.
- Automotriz: Los conductores y los pasajeros interactúan con controles rotativos.
- Dispositivos plegables y tablets: Los usuarios conectan cubiertas de teclado y accesorios de entrada externos.
En todas estas situaciones, tu app debe hacer un seguimiento de qué elemento interactivo está activo en la pantalla. Este estado activo se denomina enfoque.
Factores clave para una navegación intuitiva con el teclado
Para brindar una excelente experiencia del usuario en pantallas grandes y dispositivos que no son táctiles, diseña tu app con los siguientes principios:
- Enfoque inicial lógico: Coloca el enfoque inicial en el elemento con el que es más probable que los usuarios interactúen cuando ingresen a una pantalla.
- Orden de navegación coherente: Proporciona un recorrido del enfoque predecible unidimensional (Tab) y bidimensional (teclas de flecha o pad direccional).
- Enfoque persistente: Restablece el enfoque sin problemas después de interrupciones, descartes de diálogos o cambios de configuración.
- Estado de enfoque claro: Muestra indicadores visuales accesibles y destacados (como anillos o ondas de enfoque) que indiquen qué elemento tiene el enfoque en cada momento.
- Desplazamiento intuitivo: Asegúrate de que el elemento enfocado y su contexto circundante se desplacen suavemente hacia el viewport visible.
Guías de enfoque
Explora las siguientes guías para aprender a administrar y personalizar el enfoque en Compose:
- Objetivos de enfoque: Obtén información sobre cómo los componentes interactivos se convierten en objetivos de enfoque y cómo hacer que los elementos componibles personalizados sean enfocables.
- Orden de recorrido del enfoque: Comprende el orden de apariencia 1D y la navegación espacial 2D, y cómo personalizar las rutas de recorrido.
- Enfoque en los campos de texto: Aprende cómo los campos de texto de una y varias líneas controlan las teclas de Tab y las flechas, y cómo funciona la interacción con el IME de la TV.
- Agrupa los destinos de enfoque: Agrupa los componentes con
focusGroupy detén el redireccionamiento de entrada o salida. - Restaurar el enfoque: Restaura el enfoque en los elementos secundarios activos anteriormente en los contenedores, controla los componentes de navegación y administra el enfoque en las transiciones de pantalla.
- Indica el estado de enfoque: Aplica indicadores visuales y una indicación personalizada para destacar los componentes enfocados.
- React to focus: Observa los cambios de enfoque y consulta las propiedades del estado de enfoque con
onFocusChanged. - Solicita el enfoque de forma programática: Mueve el enfoque de forma explícita en respuesta a las acciones del usuario o los errores de validación.
- Mover y borrar el enfoque: Avanza o borra el enfoque de forma programática con
FocusManager. - Captura y libera el enfoque: Captura el enfoque para las subinteracciones modales y lo libera de forma segura.
- Prueba la navegación con el enfoque: Escribe pruebas automatizadas de Compose para verificar las interacciones del teclado en 1D, 2D y campos de texto.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Objetivos de enfoque
- Orden de recorrido del enfoque
- Enfoque en campos de texto
- Agrupa los destinos de enfoque
- Cómo probar la navegación con enfoque