Visualização do layout

É possível visualizar os componentes do Jetpack Compose no Android Studio, sem ter que implantar o app em um dispositivo ou emulador. É possível ter várias visualizações de uma determinada função que pode ser composta, cada uma com uma restrição diferente de largura e altura, dimensionamento de fonte ou tema. Conforme você desenvolve seu app, as visualizações são atualizadas para ajudar a analisar as mudanças com mais rapidez.

Criar uma visualização básica do layout

Para criar uma visualização de layout, escreva uma função que pode ser composta que não use nenhum parâmetro e adicione a anotação @Preview. Depois de criar o app, a IU da função de visualização será exibida no painel Visualização do Studio.

Por exemplo, suponha que você tenha uma função que pode ser composta que exiba uma saudação para o usuário:

@Composable
fun Greeting(name: String) {
    Text (text = "Hello $name!")
}

Para visualizar a IU dessa função, grave uma função wrapper que não aceite parâmetros e adicione a anotação @Preview ao wrapper:

@Preview
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

Mostra uma função "Hello World" que pode ser composta, uma função de visualização que chama essa função e a janela de visualização que exibe a IU emitida pela função de visualização.

Figura 1. A janela de visualização mostra a IU gerada pelas funções de visualização.

Ao clicar em um elemento da IU na visualização, o Studio leva você para a linha em que esse elemento é criado. Por exemplo, se você clicar no texto "Hello Android!" nessa janela de visualização, o Studio direcionará você para a linha em Greeting(), em que o elemento de texto é criado.

Quando seu código mudar, clique no botão Atualizar Botão de atualização da visualização de composição do Android Studio na janela de visualização para atualizar a visualização. Talvez seja necessário recriar seu projeto para atualizar a visualização. Para saber se é preciso fazer isso, acesse a janela de visualização .

É possível personalizar a visualização transmitindo parâmetros para a anotação @Preview. Por exemplo, por padrão, o rótulo da visualização se baseia no nome da função de visualização, que, neste caso, é PreviewGreeting. É possível modificar o rótulo transmitindo um parâmetro name:

@Preview(name = "Android greeting")
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

Para ver a lista completa de parâmetros que você pode transmitir para @Preview, consulte a referência de @Preview.

É possível definir várias funções de visualização, que são mostradas juntas na janela de visualização. É possível gravar funções que testam vários tipos de entrada:

@Preview(name = "Long greeting")
@Composable
fun PreviewLongGreeting() {
    Greeting("my valued friend, whom I am incapable of "
    + "greeting without using a great many words")
}

@Preview(name = "Newline greeting")
@Composable
fun PreviewNewlineGreeting() {
    Greeting("world\nwith a line break")
}

Janela de visualização mostrando várias funções de visualização

Figura 2. Se você definir várias funções de visualização, a IU delas será mostrada na mesma janela.

Como implantar visualizações no seu dispositivo

Para implantar uma visualização no dispositivo ou emulador padrão, clique no botão Implantar: Botão de implantação do dispositivo da visualização de composição do Android Studio O Android Studio cria uma nova atividade contendo a IU gerada por essa função e a implanta no seu app no dispositivo. Isso permite que você teste a IU em um dispositivo real sem precisar reinstalar todo o app ou navegar até a localização.

Captura de tela de um dispositivo Android mostrando uma função de visualização

Figura 3. A visualização de ComposeLongGreeting(), implantada em um dispositivo virtual.

Visualizações interativas

O Android Studio oferece um modo de visualização interativa. No modo de visualização interativa, você pode clicar ou digitar nos elementos de IU, e a IU responderá como se estivesse no app instalado. Para ativar a visualização interativa, clique no botão interativo em qualquer uma das janelas de visualização: Botão de visualização interativa de composição do Android Studio O painel de visualização muda para o modo interativo para essa função de visualização até que você saia do modo.

Por exemplo, observe esta função que responde a cliques do usuário:

@Composable
fun Counter(count: Int, updateCount: (Int) -> Unit) {
    Button(
        onClick = { updateCount(count + 1) },
        colors = defaultButtonColors(
            backgroundColor = if (count > 5) Color.Green else Color.White
        )
    ) {
        Text("I've been clicked $count times")
    }
}
@Preview
@Composable
fun PreviewCounter() {
    val counterState = remember { mutableStateOf(0) }

    Counter(
        count = counterState.value,
        updateCount = { newCount ->
            counterState.value = newCount
        }
    )
}

A visualização comum dessa função mostra o layout dos elementos da IU. Se você clicar no botão, ele não responderá. Em vez disso, o Studio leva você até a linha em que o elemento foi criado.

No modo de visualização interativa, por outro lado, quando você clica no botão, o contador aumenta. Quando o contador atingir seis, o botão ficará verde, assim como no app em execução:

Janela de visualização mostrando uma visualização interativa respondendo aos cliques

Figura 4. Quando está no modo interativo, a janela de visualização responde aos cliques do usuário.

Observação: o modo de visualização interativa não permite que as funções interajam com o armazenamento ou a rede do dispositivo. Se você precisar testar a funcionalidade que depende dessas operações, use opções de simulação.