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, diferentemente das 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 a seguinte dependência ao arquivo build.gradle do app:

implementation "androidx.compose.ui:ui-tooling:1.0.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 implantá-las diretamente em um emulador ou dispositivo.

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 elemento que pode ser composto, como uma caixa de seleção marcada ou vazia.

A visualização do modo interativo é executada diretamente 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.

Usuário clicando no botão "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 de renderização da @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 copiá-la 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. Coloque essa classe de provedor em um arquivo no pacote src/debug do projeto. Assim, ela não será incluída nos builds de lançamento.

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 serão renderizadas definindo o parâmetro "limit".

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

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 diretamente 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 ver literais constantes que acionam atualizações em tempo real, sem precisar da etapa de compilação, ativando os seguintes valores destacados:

Vídeo do usuário permitindo o destaque de literais dinâmicos

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 seu app sem precisar implantá-lo 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 a partir de visualizações interativas. Se uma animação for descrita em uma visualização que pode ser composta, você poderá 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:

@Preview
@Composable
fun PressedSurface() {
    val (pressed, onPress) = remember { mutableStateOf(false) }
    val transition = updateTransition(
        targetState = if (pressed) SurfaceState.Pressed else SurfaceState.Released
    )

    val width by transition.animateDp { state ->
        when (state) {
            SurfaceState.Released -> 20.dp
            SurfaceState.Pressed -> 50.dp
        }
    }
    val surfaceColor by transition.animateColor { state ->
        when (state) {
            SurfaceState.Released -> Color.Blue
            SurfaceState.Pressed -> Color.Red
        }
    }
    val selectedAlpha by transition.animateFloat { state ->
        when (state) {
            SurfaceState.Released -> 0.5f
            SurfaceState.Pressed -> 1f
        }
    }

    Surface(
        color = surfaceColor.copy(alpha = selectedAlpha),
        modifier = Modifier
            .toggleable(value = pressed, onValueChange = onPress)
            .size(height = 200.dp, width = width)
    ){}
}

Para ativar o inspetor de animação, clique no seguinte botão:

Demonstração de usuário abrindo o inspetor de animação

Ativar recursos experimentais

Alguns recursos, como a visualização interativa e o inspetor de animação, só estarão disponíveis depois de serem ativados manualmente na seção "experimental" das preferências do Android Studio:

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