Focar no Compose

Quando um usuário interage com seu app, ele geralmente faz isso tocando em elementos na tela. No entanto, essa não é a única forma de interação. Outras formas de interação podem incluir o seguinte:

• Um usuário do ChromeOS pode usar as teclas de seta no teclado físico para navegar na tela.
• Alguém jogando um jogo pode usar o controle de jogo conectado para navegar pelo menu do jogo.
• Um usuário de app para dispositivos móveis pode alternar entre elementos usando o teclado na tela.

Nesses casos, é importante rastrear qual componente está ativo em um determinado momento, o que chamamos de foco. Os elementos na tela precisam ser focados em uma ordem lógica. O Jetpack Compose tem uma maneira padrão de processar o foco que é correta na maioria dos casos. No entanto, em alguns casos, talvez seja necessário modificar esse comportamento padrão.

As páginas a seguir descrevem como usar o foco no seu app:

• Mudar a ordem de apresentação do foco: explica como mudar a ordem de foco padrão, adicionar grupos de foco e desativar o foco de um elemento combinável.
• Mudar o comportamento do foco: descreve como solicitar, capturar e liberar o foco e como redirecionar o foco ao entrar em uma tela.
• Reagir ao foco: explica como reagir a mudanças de foco, adicionar indicadores visuais a elementos e entender o estado de foco de um elemento.

Ordem de apresentação do foco padrão

Antes de abordarmos o comportamento padrão da pesquisa de foco, é importante entender o conceito de nível na hierarquia: de modo geral, podemos dizer que dois Composables estão no mesmo nível quando são irmãos, ou seja, têm os mesmos pais. Por exemplo, os elementos dentro de uma Column estão no mesmo nível. Subir um nível significa ir de um filho para o pai Composable ou, mantendo o mesmo exemplo, voltar de um item para uma Column que o contém. Descer um nível é o contrário, do pai Column para os itens contidos. Esse conceito pode ser aplicado a todos os Composable que podem conter outros Composables.

Observação: para informações sobre como controlar manualmente a ordem do foco, consulte Controlar a ordem de apresentação.

A navegação na interface pode acontecer de várias maneiras, algumas das quais a maioria dos usuários já conhece:

• TABs: navegação unidimensional, para frente ou para trás. A navegação por TAB avança o foco para o elemento seguinte ou anterior na hierarquia. Por padrão, o Compose segue a declaração dos Composables. A navegação unidirecional pode ser feita pela tecla tab em um teclado ou pelo Rotary Bezel em um relógio, e esse tipo de pesquisa de foco vai visitar cada elemento na tela.
• Teclas de seta: navegação bidimensional, esquerda, direita, cima ou baixo. A navegação bidimensional pode ser feita por um D-Pad em uma TV ou teclas de seta em um teclado, e a ordem de apresentação só visita elementos em um determinado nível. Você pode usar o centro do D-Pad e o botão "Voltar" para descer e voltar a um nível diferente.

Considere como exemplo a captura de tela abaixo, em que você tem quatro botões, um abaixo do outro, e quer alternar entre eles em ordem de aparência. O Jetpack Compose oferece esse comportamento pronto para uso: o kit de ferramentas permite alternar entre cada elemento combinável em ordem vertical de cima para baixo usando a tecla tab ou mover o foco pressionando a seta para cima ou para baixo.

Figura 1. Lista de botões exibidos em um formato pequeno

Quando você muda para um tipo diferente de layout, as coisas mudam um pouco. Se o layout tiver mais de uma coluna, como o layout abaixo, o Jetpack Compose permitirá que você navegue por elas sem precisar adicionar nenhum código. Se você pressionar a tecla tab, o Jetpack Compose vai destacar automaticamente os itens em ordem de declaração, do primeiro ao quarto. O uso das teclas de seta no teclado faz com que a seleção siga a direção desejada no espaço 2D.

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

Os Composables são declarados em duas Rows, e os elementos de foco são declarados em ordem, do primeiro ao quarto. Quando você pressiona a tecla tab, isso produz a seguinte ordem de foco:

Figura 2. Lista de botões colocados em duas colunas lado a lado em um formato maior

No snippet abaixo, você declara os itens em Columns em vez de Rows:

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

Esse layout percorre os itens verticalmente, de cima para baixo, do início da tela até o final:

Figura 3. Lista de botões colocados em duas colunas lado a lado em um formato maior

Os dois exemplos anteriores, embora difiram na navegação unidirecional, oferecem a mesma experiência quando se trata de navegação bidimensional. Isso geralmente ocorre porque os itens na tela têm o mesmo posicionamento geográfico nos dois exemplos. Navegar à direita da primeira Column move o foco para a segunda, e navegar para baixo da primeira Row move o foco para a linha abaixo.

Observação: as propriedades de foco são um caso especial, em que os pais sempre vencem em caso de colisões ou duplicados. Isso é algo a ser considerado ao trabalhar com o foco.