Android Academy · Aula

Visualizações e recarga instantânea

Itere rapidamente com as visualizações do Compose.

Visualizações e recarga instantânea é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.

Visualizações durante o design

Um dos melhores recursos do Compose é o @Preview: você pode ver um elemento composável renderizado dentro do Android Studio sem executar o aplicativo em um dispositivo ou emulador.

A anotação @Preview

Adicione @Preview acima de uma função @Composable. O Android Studio a renderiza no painel de design.

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Preview")
}

As visualizações não precisam de parâmetros

Uma função de visualização deve poder ser chamada com nenhum argumento. Portanto, crie um elemento composável wrapper que forneça dados de exemplo e, em seguida, visualize esse wrapper.

@Preview
@Composable
fun CardPreview() {
    ProfileCard(name = "Ada", followers = 42)
}

Nomeando funções de visualização

Por convenção, os wrappers de visualização recebem o nome do elemento composável seguido do sufixo Preview, por exemplo, GreetingPreview. Isso facilita encontrá-los e indica que eles não são usados em produção.

Parâmetros de visualização

@Preview aceita argumentos para ajustar a renderização, como showBackground, name e widthDp.

@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
    Greeting(name = "Hi")
}

showBackground

Por padrão, uma visualização tem um plano de fundo transparente. Passe showBackground = true para renderizar uma superfície opaca, o que facilita a visualização do texto durante o design.

Várias visualizações

Você pode empilhar várias anotações @Preview em uma função para ver diferentes configurações lado a lado — por exemplo, uma largura pequena e uma grande.

@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
    HomeScreen()
}

Visualização interativa

O Android Studio oferece um Modo interativo para as visualizações. Ele permite clicar em botões e acionar mudanças de estado diretamente na visualização, sem implantar o aplicativo.

Edição ao vivo / recarga a quente

Com a Edição ao vivo, as alterações nos corpos dos elementos composáveis aparecem quase instantaneamente na visualização e até mesmo em um dispositivo em execução — sem precisar de uma compilação completa. Isso acelera muito o ciclo de design.

As visualizações são gratuitas

As funções de visualização são removidas da sua compilação de lançamento, portanto, adicionar muitas visualizações não gera nenhum custo durante a execução. Use-as à vontade para documentar e testar visualmente cada elemento composável.

Um exemplo completo

Aqui está um elemento composável com sua visualização. Abra o painel de design para vê-lo ser renderizado instantaneamente.

@Composable
fun Badge(label: String) {
    Text(text = label, color = Color.White)
}

@Preview(showBackground = true)
@Composable
fun BadgePreview() {
    Badge(label = "NEW")
}

Verificação rápida

Por que uma função @Preview não pode receber parâmetros?

Recapitulação

As visualizações aceleram o desenvolvimento com Compose:

Adicione @Preview acima de um elemento composável sem argumentos.
Use opções como showBackground e widthDp.
Empilhe várias visualizações; use o Modo interativo e a Edição ao vivo para iterar rapidamente.

Perguntas Frequentes

A aula “Visualizações e recarga instantânea” é grátis?

Sim — o texto completo de “Visualizações e recarga instantânea” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.

O que vou aprender em “Visualizações e recarga instantânea”?

Itere rapidamente com as visualizações do Compose. Você pratica Android Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Android Academy?

Nenhuma experiência prévia é necessária. Android Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Visualizações e recarga instantânea”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Android Academy?

Sim. Cada aula de Android Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Android Academy