Enfoque en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes

Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.

Más información sobre los tipos de dispositivos de realidad extendida →

Lentes de IA

Más información sobre los tipos de dispositivos de realidad extendida →

Todos los componentes de Jetpack Compose Glimmer están diseñados para funcionar con métodos de entrada estándar similares a los teléfonos, como presionar o deslizar el panel táctil de los lentes de IA, y también para recibir comandos de entrada específicos del hardware de los lentes de IA, como los botones de la cámara y la pantalla. Los componentes de Jetpack Compose Glimmer controlan automáticamente los eventos de entrada necesarios. Para los componentes personalizados, puedes usar las APIs de Compose existentes, como Modifier.draggable o Modifier.scrollable, para implementar comportamientos de interacción específicos.

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

• Presionar: Es la 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 la navegación y el desplazamiento. 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.

(Requisito temporal) Habilita la marca de entrada obligatoria:

Con una función de Jetpack Compose, el sistema puede establecer automáticamente el enfoque inicial en el primer elemento enfocable cuando se carga la pantalla, que suele ser el elemento superior izquierdo de la pantalla. Esta función aún está en desarrollo y no está habilitada de forma predeterminada. Para activar esta función, establece la isInitialFocusOnFocusableAvailable marca en true en el método onCreate() de tu actividad.

class GlassesActivityExample : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        @OptIn(ExperimentalComposeUiApi::class)
        ComposeUiFlags.isInitialFocusOnFocusableAvailable = true
        super.onCreate(savedInstanceState)
    }
}

Comportamiento y orden de navegación

El movimiento y el orden del enfoque cambian a medida que un 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. Para 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() y especificar un onEnter focusProperty personalizado:

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 la confusión de navegación y promover un movimiento de enfoque fluido y predecible.

Estados de enfoque predeterminados

Jetpack Compose Glimmer implementa estados de enfoque predeterminados en sus componentes interactivos, incluidas las superficies, las tarjetas y los elementos de la 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 mediante comentarios visuales basados en contornos.

• 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 + presionado: El fondo se establece en GlimmerTheme.colors.surface con opacidad total para comunicar su estado seleccionado.