Enfocar en Compose

Cuando un usuario interactúa con tu app, a menudo lo hace tocando elementos en la pantalla. Sin embargo, esta no es la única forma de interacción. Otras formas de interacción podrían incluir las siguientes:

• Un usuario de ChromeOS puede usar las teclas de flecha de su teclado físico para navegar por la pantalla.
• Una persona que juega un juego podría usar el control de juegos conectado para navegar por el menú del juego.
• Un usuario de una app para dispositivos móviles puede desplazarse por los elementos con el teclado en pantalla.

En estos casos, es importante hacer un seguimiento del componente que está activo en un momento determinado, lo que llamamos enfoque. Los elementos de la pantalla deben enfocarse en un orden lógico. Jetpack Compose tiene una forma predeterminada de controlar el enfoque que es correcta en la mayoría de los casos. Sin embargo, en algunos casos, es posible que debas modificar este comportamiento predeterminado.

En las siguientes páginas, se describe cómo usar el enfoque en tu app:

• Cómo cambiar el orden de recorrido del enfoque: Explica cómo cambiar el orden de enfoque predeterminado, agregar grupos de enfoque y, también, inhabilitar el enfoque de un elemento componible.
• Cómo cambiar el comportamiento del enfoque: Describe cómo solicitar, capturar y liberar el enfoque, y cómo redireccionarlo cuando se ingresa a una pantalla.
• Cómo reaccionar al enfoque: Explica cómo reaccionar a los cambios de enfoque, agregar indicadores visuales a los elementos y comprender el estado de enfoque de un elemento.

Orden de recorrido del enfoque predeterminado

Antes de profundizar en el comportamiento predeterminado de la búsqueda de enfoque, es importante comprender el concepto de nivel en la jerarquía: En términos generales, podemos decir que dos Composables están en el mismo nivel cuando son hermanos, lo que significa que tienen los mismos elementos principales. Por ejemplo, los elementos dentro de un Column están en el mismo nivel. Subir un nivel significa pasar de un elemento secundario a su elemento Composable principal o, en el mismo ejemplo, volver de un elemento a un Column que lo contiene. Bajar un nivel es al revés, desde el elemento principal Column hasta los elementos contenidos. Este concepto se puede aplicar a cada Composable que puede contener otro Composables.

La navegación por la IU puede realizarse de varias maneras, algunas de las cuales la mayoría de los usuarios ya conocerán:

• TABs: Navegación unidimensional, hacia adelante o atrás. La navegación con la tecla TAB avanza el enfoque al elemento siguiente o anterior en la jerarquía. De forma predeterminada, Compose sigue la declaración de Composables. La navegación unidireccional se puede lograr con la tecla tab de un teclado o el bisel giratorio de un reloj, y este tipo de búsqueda de enfoque visitará cada elemento de la pantalla.
• Teclas de flecha: Navegación bidimensional, que va hacia la izquierda, la derecha, arriba o abajo. La navegación bidimensional se puede lograr a través de un pad direccional en una TV o las teclas de flecha en un teclado, y su orden de recorrido solo visita elementos en un nivel determinado. Puedes usar el centro del pad direccional y el botón Atrás para bajar y subir a un nivel diferente.

Tomemos como ejemplo la siguiente captura de pantalla, en la que tienes cuatro botones, uno debajo del otro, y quieres recorrerlos todos en orden de aparición. Jetpack Compose ofrece este comportamiento de forma predeterminada: el kit de herramientas te permite recorrer cada elemento componible en orden vertical, de arriba hacia abajo, con la tecla tab, o bien mover el enfoque presionando la flecha hacia arriba o hacia abajo.

Cuando cambias a un tipo de diseño diferente, las cosas cambian un poco. Si tu diseño tiene más de una columna, como el diseño que se muestra a continuación, Jetpack Compose te permite navegar por ellas sin tener que agregar código. Si presionas la tecla tab, Jetpack Compose destacará automáticamente los elementos en el orden de declaración, desde First hasta Fourth. Con las teclas de flecha del teclado, la selección sigue la dirección deseada en el espacio 2D.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Los Composables se declaran en dos Rows, y los elementos de enfoque se declaran en orden, del primero al cuarto. Cuando presionas la tecla tab, se produce el siguiente orden de enfoque:

En el siguiente fragmento, declaras los elementos en Columns en lugar de en Rows:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Este diseño recorre los elementos verticalmente, de arriba hacia abajo, desde el inicio de la pantalla hacia el final:

Los dos ejemplos anteriores, si bien difieren en la navegación unidireccional, proporcionan la misma experiencia cuando se trata de la navegación bidimensional. Por lo general, esto se debe a que los elementos de la pantalla tienen la misma ubicación geográfica en ambos ejemplos. Navegar hacia la derecha desde el primer Column mueve el enfoque al segundo, y navegar hacia abajo desde el primer Row mueve el enfoque al que está debajo.