Enfocar en Compose

Cuando un usuario interactúa con tu app, suele tocar elementos de la pantalla para hacerlo. 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 podría usar las teclas de flecha del teclado físico para navegar por la pantalla.
• Los usuarios que juegan a un juego pueden usar su control de juegos adjunto para navegar por el menú del juego.
• El usuario de una aplicación para dispositivos móviles puede usar el teclado en pantalla para alternar entre los elementos.

En estos casos, es importante hacer un seguimiento del componente activo en un momento dado, que es lo que llamamos enfoque. Los elementos en la pantalla deben centrarse 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 foco en tu app:

• Cambia el orden de recorrido del enfoque: Se explica cómo cambiar el orden de enfoque predeterminado, agregar grupos de enfoque o inhabilitar el enfoque de un elemento componible.
• Cambia el comportamiento del enfoque: Describe cómo solicitar, capturar y liberar el enfoque, y cómo redireccionar el enfoque cuando ingresa a una pantalla.
• Reaccionar al enfoque: Explica cómo reaccionar ante los cambios de enfoque, agregar indicadores visuales a los elementos y comprender el estado del enfoque de un elemento.

Orden predeterminado de recorrido del enfoque

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 superiores. Por ejemplo, los elementos dentro de una Column están en el mismo nivel. Subir un nivel implica pasar de un elemento secundario a su elemento superior Composable o, si se mantiene el mismo ejemplo, regresar de un elemento a un Column que lo contiene. Bajar un nivel es al revés, desde el elemento superior Column hasta los elementos contenidos. Este concepto se puede aplicar a cada Composable que pueda contener otros Composables.

Nota: Los Servicios de accesibilidad usan un mecanismo diferente para decidir el orden del enfoque. Estos servicios simplemente reciben un árbol de nodos AccessibilityNodeInfo y deciden su propia estrategia para atravesar este árbol. Encuentra el debate actual sobre este tema en nuestra herramienta de seguimiento de errores.

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

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

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

Figura 1: Lista de botones que se muestran en un factor de forma pequeño

Cuando cambias a un tipo diferente de diseño, las cosas cambian un poco. Si tu diseño tiene más de una columna, como el 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 destaca automáticamente los elementos en orden de declaración, del primero al cuarto. El uso de las teclas de flecha del teclado hace que la selección siga la dirección deseada en un espacio 2D.

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

Las 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:

Figura 2: Lista de botones colocados en dos columnas, una al lado de la otra, en un factor de forma más grande

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 desvía los elementos de forma vertical, de arriba abajo, desde el principio de la pantalla hasta el final:

Figura 3: Lista de botones colocados en dos columnas, una al lado de la otra, en un factor de forma más grande

Los dos ejemplos anteriores, aunque difieren en la navegación unidireccional, proporcionan la misma experiencia cuando se trata de navegación bidimensional. Esto suele deberse a que los elementos de la pantalla tienen la misma ubicación geográfica en ambos ejemplos. Si navegas directamente desde el primer Column, el foco se mueve al segundo, y la navegación hacia abajo desde el primer Row, se mueve el enfoque al que está por debajo.

Nota: Las propiedades de enfoque son un caso especial, en el que los elementos superiores siempre ganan en caso de colisiones o duplicados.Esto es algo que debes tener en cuenta cuando trabajes con enfoque.