Enfoque en Jetpack Compose Glimmer

Dispositivos XR aplicables
Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de XR.
Más información sobre los tipos de dispositivos XR →
Lentes con IA
Más información sobre los tipos de dispositivos XR →

Todos los componentes de Glimmer de Jetpack Compose están diseñados para funcionar con métodos de entrada estándar, como un toque o un deslizamiento en el panel táctil de los lentes con IA, y también son receptivos a comandos de entrada de nivel inferior que son específicos del hardware de los lentes con IA. Los componentes de Glimmer de Jetpack Compose controlan automáticamente los eventos de entrada necesarios. En el caso de los componentes personalizados, puedes utilizar las APIs de Compose existentes, como Modifier.draggable o Modifier.scrollable, para implementar comportamientos de interacción específicos.

En los lentes con IA que tienen una pantalla, la entrada del puntero puede afectar el enfoque:

  • Presionar: Interacción directa para activar el elemento. El enfoque se mueve a un elemento cuando un usuario interactúa con él.
  • Deslizar: Se usa para navegar y desplazarse. Los gestos de deslizamiento no controlados se traducen automáticamente en movimientos de enfoque, lo que permite una navegación fluida por la IU sin entrada directa del puntero.

El movimiento y el orden del enfoque cambian a medida que el usuario navega por tu app.

Movimiento de enfoque

En un contenedor desplazable, el enfoque se mueve de forma continua con un deslizamiento en el panel táctil. En el caso de los elementos discretos, como una fila de botones, cada deslizamiento mueve el enfoque un elemento a la vez.

Orden de enfoque

Al igual que en Jetpack Compose, Jetpack Compose Glimmer usa la búsqueda de enfoque unidimensional. Para obtener más información sobre el orden de recorrido del enfoque, consulta Cómo cambiar el orden de recorrido del enfoque.

Para cambiar el elemento enfocado inicialmente, puedes agregar un Modifier.focusGroup() de nivel superior y especificar un onEnter personalizado focusProperty:

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

Contenedores de desplazamiento

Para una experiencia del usuario óptima, los contenedores de desplazamiento, como las listas, deben ser el único componente principal en una pantalla. Evita colocar una lista desplazable directamente arriba o abajo de otros elementos interactivos, como botones, para evitar confusiones en la navegación y promover un movimiento del enfoque suave y predecible.

Estados de enfoque predeterminados

Jetpack Compose Glimmer implementa estados de enfoque predeterminados en todos sus componentes interactivos, incluidas las superficies, las tarjetas y los elementos de lista, lo que promueve comentarios visuales coherentes y claros durante la interacción del usuario.

Figura 1: Tres estados de enfoque en Jetpack Compose Glimmer, que se diferencian con comentarios visuales basados en esquemas.

  • Predeterminado: El color de fondo del botón se deriva de GlimmerTheme.colors.surface, su contenido principal calcula el color de contenido de esa superficie y los íconos son GlimmerTheme.colors.primary.

  • Enfocado: El ancho del borde aumenta para comunicar el enfoque.

  • Enfocado y presionado: El fondo se establece en GlimmerTheme.colors.surface con opacidad total para comunicar su estado seleccionado.