Ferramentas do Compose

O Android Studio oferece muitos recursos novos, especialmente para o Jetpack Compose. Ele adota uma abordagem que prioriza o código e melhora a produtividade do desenvolvedor, sem precisar escolher entre a interface do projeto ou o editor de código.

Uma diferença fundamental entre a IU baseada em visualização e o Jetpack Compose é que o Compose não depende da View para renderizar os elementos que podem ser compostos. Como consequência dessa abordagem de arquitetura, o Android Studio oferece recursos estendidos para o Jetpack Compose, sem que seja necessário abrir um emulador ou se conectar a um dispositivo, como nas visualizações do Android. Isso permite um processo iterativo mais rápido para que os desenvolvedores implementem designs de IU.

Para ativar recursos específicos do Android Studio para o Jetpack Compose, é necessário adicionar as seguintes dependências ao arquivo build.gradle do aplicativo:

debugImplementation "androidx.compose.ui:ui-tooling:1.1.1"
implementation "androidx.compose.ui:ui-tooling-preview:1.1.1"

Visualização do Compose

Um elemento que pode ser composto é definido por uma função, com a anotação @Composable:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

Elemento de texto simples contendo as palavras "Hello World"

Para permitir uma visualização desse elemento, é necessário criar outro elemento que pode ser composto, com as anotações @Composable e @Preview, emitindo aquele criado inicialmente:

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

Finalmente, clique em "split" (design/code) para abrir o painel lateral direito em que a visualização será exibida:

Seletor "Split view" do Android Studio.

Visualização de texto simples exibida em uma janela

@Preview aceita parâmetros para personalizar a forma de renderização do Android Studio. É possível adicionar esses parâmetros manualmente no código ou clicar no ícone de gutter ao lado de @Preview para exibir o seletor de configuração, que permite selecionar e mudar os parâmetros de configuração.

Recursos @Preview

O Android Studio oferece alguns recursos para estender visualizações que podem ser compostas. É possível mudar o design do contêiner, interagir com as visualizações ou fazer a implantação delas diretamente em um emulador ou dispositivo.

LocalInspectionMode

Você pode ler usando CompositionLocal da propriedade LocalInspectionMode para ver se o elemento que pode ser composto está sendo renderizado em uma visualização. Isso permite, por exemplo, mostrar a imagem do marcador de posição na janela de visualização em vez de mostrar dados reais. Se a composição estiver sendo renderizada em uma visualização, o valor da LocalInspectionMode.current será true.

if (LocalInspectionMode.current) {
    // Show this text in a preview window:
    Text("Hello preview user!")
} else {
    // Show this text in the app:
    Text("Hello $name!")
}

Modo interativo

O modo interativo permite interagir com uma visualização de forma semelhante a como ocorre em um dispositivo. O modo interativo é isolado em um ambiente de sandbox (isolado de outras visualizações), em que é possível clicar em elementos e inserir entradas do usuário na visualização. A visualização até mesmo exibirá animações. É uma forma rápida de testar diferentes estados e gestos do elemento que pode ser composto, como uma caixa de seleção marcada ou vazia.

A visualização do modo interativo é executada direto no Android Studio, sem a execução de um emulador, o que gera algumas limitações:

  • Sem acesso à rede
  • Sem acesso ao arquivo
  • Algumas APIs de Context podem não estar totalmente disponíveis

Usuário clicando no botão "interativo" da visualização

Vídeo de um usuário interagindo com uma visualização

Implantar visualização

Você pode implantar uma @Preview específica em um emulador ou dispositivo físico. A visualização é implantada no mesmo app do projeto, como uma nova atividade. Portanto, ela compartilha o mesmo contexto e permissões. Isso significa que não é necessário programar código boilerplate, como solicitar uma permissão que já foi concedida.

Clique no ícone Deploy to Device ao lado da anotação @Preview, ou na parte de cima da visualização para que o Android Studio implante @Preview no dispositivo ou emulador conectado.

Usuário clicando no botão "deploy" (implantar)

Vídeo do usuário implantando uma visualização no dispositivo

Navegação de código e contornos de elementos que podem ser compostos

Passe o cursor sobre uma visualização para ver os contornos dos elementos contidos nela. Clicar em um contorno que pode ser composto aciona a visualização do editor para navegar para a definição.

Usuário passando o cursor sobre uma visualização, fazendo com que o Studio exiba os contornos dos elementos que podem ser compostos

Copiar renderização de @Preview

Cada visualização renderizada pode ser copiada no formato de imagem, clicando com o botão direito sobre ela.

Usuário clicando em uma visualização para copiar no formato de imagem.

Definir cor do plano de fundo

Por padrão, o elemento que pode ser composto será exibido com um plano de fundo transparente. Para adicionar um plano de fundo, adicione os parâmetros showBackground e backgroundColor. Lembre-se de que backgroundColor é um Long de ARGB, e não um valor de Color:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}

Retângulo verde com as palavras "Hello World"

Dimensões

Por padrão, as dimensões de @Preview são escolhidas automaticamente para agrupar o conteúdo. Caso queira definir as dimensões manualmente, adicione os parâmetros heightDp e widthDp. Lembre-se de que esses valores já são interpretados como Dp. Não é necessário adicionar .dp ao final do valor:

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}

Quadrado amarelo com as palavras "Hello World"

Localidade

Para testar diferentes localidades de usuários, adicione o parâmetro locale:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greetings))
}

Elemento de texto simples contendo a palavra "Bonjour" com uma bandeira da França

IU do sistema

Caso precise exibir as barras de status e ação em uma visualização, adicione o parâmetro showSystemUi:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}

Janela de visualização mostrando uma atividade com as barras de status e de ações

@PreviewParameter

Você pode transmitir dados de exemplo para uma função de visualização que pode ser composta adicionando um parâmetro com a anotação @PreviewParameter.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}

Para fornecer os dados de exemplo, crie uma classe que implemente a PreviewParameterProvider e retorne os dados de amostra como uma sequência.

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}

Na sequência, será renderizada uma visualização por elemento de dados:

Você pode usar a mesma classe de provedor para várias visualizações. Se necessário, limite o número de visualizações que são renderizadas definindo o parâmetro "limit".

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}

Modo de IU

O parâmetro uiMode pode usar qualquer uma das constantes Configuration.UI_* e permite que você mude o comportamento da visualização. Por exemplo, você pode definir a visualização para o Modo noturno e ver como o tema reage.

IU da visualização do Compose

Ações do editor

O Android Studio também tem recursos dentro da área do editor para melhorar sua produtividade com o Jetpack Compose.

Modelos dinâmicos

O Android Studio incluiu modelos dinâmicos referentes ao Compose, que permitem adicionar snippets de código para inserção rápida digitando a abreviação do modelo correspondente:

  • comp para configurar uma função @Composable
  • prev para criar uma função @Preview que pode ser composta
  • paddp para adicionar um modificador padding em dp
  • weight para adicionar um modificador weight
  • W, WR, WC para inserir o elemento atual em um contêiner de Box, Row ou Column.

Ícones de gutter

Os ícones de gutter são ações contextuais visíveis na barra lateral, ao lado dos números de linha. O Android Studio introduz vários ícones de gutter específicos do Jetpack Compose para facilitar a experiência do desenvolvedor.

Implantar visualização

É possível implantar uma @Preview no emulador ou dispositivo físico direto no ícone de gutter:

Usuário clicando no ícone de gutter de implementação de uma função e implantando a visualização no dispositivo

Seletor de cores

Sempre que uma cor é definida dentro ou fora de um elemento que pode ser composto, a visualização dela é exibida no gutter. É possível mudar a cor com o seletor de cores, clicando nele da seguinte forma:

Usuário clicando em uma cor no gutter, que abre o seletor de cores

Seletor de recursos de imagem

Sempre que um drawable, um vetor ou uma imagem for definido dentro ou fora de elemento que pode ser composto, a visualização disso será exibida no gutter. Clique no seletor de recurso de imagem para mudá-lo, da seguinte forma:

Usuário clicando em um ícone no gutter, que abre o seletor de recursos

Desenvolvimento de código iterativo

Como desenvolvedor para dispositivos móveis, você está acostumado a desenvolver a IU do seu app passo a passo, e não a IU toda de uma só vez. O Android Studio usa essa abordagem com o Jetpack Compose, fornecendo ferramentas que não exigem um build completo para inspecionar, modificar valores e verificar o resultado final.

Edição em tempo real de literais

O Android Studio pode atualizar, em tempo real, literais constantes usados em elementos que podem ser compostos nas visualizações, no emulador e no dispositivo físico. Veja alguns tipos compatíveis:

  • Int
  • String
  • Color
  • Dp
  • Boolean

Vídeo do usuário mudando literais no código-fonte, enquanto a visualização é atualizada dinamicamente

É possível ativar as decorações de literais no recurso "Live Edit" do indicador de literais da IU para ver literais constantes que acionam atualizações em tempo real, sem a etapa de compilação:

Como ativar a edição em tempo real de literais

Apply Changes

Apply Changes permite atualizar o código e os recursos sem que seja necessário implantar o app novamente em um emulador ou dispositivo físico, com algumas limitações.

Para atualizar sem precisar implantar seu app novamente sempre que você adicionar, modificar ou excluir elementos que podem ser compostos, clique no seguinte botão:

Usuário clicando no botão &quot;Apply Changes&quot;

Layout Inspector

O Layout Inspector permite inspecionar um layout do Compose em um app em execução em um emulador ou dispositivo físico.

Animações

O Android Studio permite inspecionar animações na visualização de animações. Se uma animação for descrita em uma visualização que pode ser composta, você pode inspecionar o valor exato de cada valor animado em um momento específico, pausar a animação, repetir, acelerar ou desacelerar para ajudar a depurar a animação durante as transições:

Como reproduzir, deslizar e diminuir a velocidade da AnimatedVisibility

Você também pode usar a visualização de animações para criar grafos de curvas de animação, o que é útil para garantir que os valores da animação sejam coreografados corretamente:

Visualização de uma curva de animação

A visualização de animações detecta automaticamente animações que podem ser inspecionadas e elas são indicadas pelo ícone Iniciar inspeção de animaçãoÍcone &quot;Run&quot;.

Ícone de iniciar inspeção de animação na janela Design

No momento, a visualização de animações oferece suporte à API updateTransition. Para usar a visualização de animações com updateTransition, use a versão 1.0.1 ou mais recente do Compose.

Ativar recursos experimentais

Alguns recursos só ficam disponíveis depois de serem ativados manualmente na seção experimental das preferências do Android Studio: File > Settings > Experimental (Android Studio > Preferences > Experimental) em um Mac).

Ferramentas do Compose ativadas na seção &quot;Experimental&quot; das preferências do Android Studio