Foco no Jetpack Compose Glimmer

Dispositivos XR relevantes

Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.

Saiba mais sobre esses dispositivos →

Óculos com IA

Saiba mais sobre tipos de dispositivos XR →

Todos os componentes do Jetpack Compose Glimmer são projetados para funcionar com métodos de entrada padrão semelhantes aos de smartphones, como um toque ou deslize no touchpad dos óculos com IA, além de serem receptivos a comandos de entrada específicos do hardware dos óculos com IA, como botões de câmera e tela. Os componentes do Jetpack Compose Glimmer processam automaticamente os eventos de entrada necessários. Para componentes personalizados, você pode usar APIs Compose atuais, como Modifier.draggable ou Modifier.scrollable, para implementar comportamentos de interação específicos.

Em óculos com IA com tela, a entrada do ponteiro pode afetar o foco:

• Toque: interação direta para ativar o elemento. O foco se move para um elemento quando um usuário interage com ele.
• Deslize: usado para navegação e rolagem. Os gestos de deslize não processados são convertidos automaticamente em movimentos de foco, permitindo a navegação perfeita na interface sem entrada direta do ponteiro.

(Requisito temporário) Ativar o flag de entrada obrigatório:

Usando um recurso do Jetpack Compose, o sistema pode definir automaticamente o foco inicial para o primeiro elemento focalizável quando a tela é carregada, que geralmente é o item no canto superior esquerdo da tela. Esse recurso ainda está em desenvolvimento e não está ativado por padrão. Para ativar esse recurso, defina o isInitialFocusOnFocusableAvailable flag como true no método onCreate() da sua atividade.

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

Comportamento e ordem de navegação

O movimento e a ordem do foco mudam à medida que um usuário navega pelo app.

Movimento do foco

Em um contêiner rolável, o foco se move continuamente com um deslize no touchpad. Para elementos discretos, como uma linha de botões, cada deslize move o foco um elemento por vez.

Ordem do foco

Assim como no Jetpack Compose, o Jetpack Compose Glimmer usa a pesquisa de foco unidimensional. Para saber mais sobre a ordem de apresentação do foco, consulte Mudar a ordem de apresentação do foco.

Para mudar o item inicialmente focado, adicione um Modifier.focusGroup() e especifique um onEnter focusProperty personalizado:

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

Contêineres de rolagem

Para uma experiência ideal do usuário, os contêineres de rolagem, como listas, precisam ser o único componente principal em uma tela. Evite colocar uma lista rolável diretamente acima ou abaixo de outros elementos interativos, como botões, para evitar confusão na navegação e promover um movimento de foco suave e previsível.

Estados de foco padrão

O Jetpack Compose Glimmer implementa estados de foco padrão em todos os componentes interativos, incluindo superfícies, cards e itens de lista, promovendo feedback visual consistente e claro durante a interação do usuário.

Figura 1. Três estados de foco no Jetpack Compose Glimmer, que são diferenciados usando feedback visual baseado em contorno.

• Padrão: a cor de plano de fundo do botão é derivada de GlimmerTheme.colors.surface, o conteúdo principal calcula a cor do conteúdo dessa superfície e os ícones são GlimmerTheme.colors.primary.

• Focado: a largura da borda é aumentada para comunicar o foco.

• Focado + pressionado: o plano de fundo é definido como GlimmerTheme.colors.surface com opacidade total para comunicar o estado selecionado