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 de composição. 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.2.1"
implementation "androidx.compose.ui:ui-tooling-preview:1.2.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")
}

Para permitir uma visualização desse elemento, é necessário criar outro elemento de composição, 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á mostrada:

É possível adicionar parâmetros manualmente no código para personalizar a forma como o Android Studio renderiza @Preview.

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

Este modo permite interagir com uma visualização de forma semelhante a como ocorre em um dispositivo. Ele é isolado em um ambiente de sandbox (isolado de outras visualizações) em que é possível clicar em elementos, inserir entradas do usuário e até mesmo mostrar animações. É uma forma rápida de testar diferentes estados e gestos do elemento de composição, 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:

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

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. 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 clique na parte de cima da visualização para que o Android Studio implante @Preview no dispositivo ou emulador conectado.

Anotações de várias visualizações

Com várias visualizações, é possível definir uma classe de anotação em que há diversas anotações @Preview com configurações diferentes. O uso dessa anotação em uma função de composição renderiza automaticamente todas as diferentes visualizações de uma vez. Por exemplo, é possível usar essa anotação para visualizar vários dispositivos, tamanhos de fonte ou temas ao mesmo tempo, sem precisar repetir essas definições para cada elemento de composição.

Comece criando sua própria classe de anotação personalizada:

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews

Você pode usar essa anotação personalizada para elementos de composição de visualização:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}

É possível combinar diversas anotações de várias visualizações e anotações normais para criar um conjunto mais completo de visualizações. Isso não significa que todas as combinações diferentes serão mostradas. Na verdade, cada anotação de várias visualizações funciona de maneira independente e renderiza apenas as próprias variantes.

@Preview(
    name = "dark theme",
    group = "themes",
    uiMode = UI_MODE_NIGHT_YES
)
@FontScalePreviews
@DevicePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview() {
    MyTheme { Surface { Text("Hello world") } }
}

Navegação de código e contornos de elementos de composição

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.

Copiar renderização de @Preview

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

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")
}

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")
    }
}

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))
}

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")
}

@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 esses dados 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.

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:

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:

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 para mudar o recurso de imagem, desta forma:

Desenvolvimento de código iterativo

Como desenvolvedor para dispositivos móveis, você está acostumado a desenvolver a IU do seu app etapa por etapa e não 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 de composição nas visualizações, no emulador e no dispositivo físico. Veja alguns tipos compatíveis:

• Int
• String
• Color
• Dp
• Boolean

É 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:

Edição em tempo real

É possível acelerar a experiência de desenvolvimento do Compose usando o recurso de Edição em tempo real nas versões canário do Android Studio Flamingo. Essa é uma versão mais eficiente da Edição em tempo real de literais. A funcionalidade permite que você veja o efeito de atualizações dos elementos de composição em tempo real, implantando mudanças no código de forma automática em um emulador ou dispositivo.

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 de composição, clique no seguinte botão:

Layout Inspector

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

Ver o número de recomposições

Você pode usar o Layout Inspector para verificar com que frequência um elemento de composição é recomposto ou ignorado. Geralmente, quando a IU tem baixo desempenho, isso se deve a um erro de codificação que força a recomposição excessiva da IU. Por outro lado, alguns erros de programação podem impedir que a IU seja recomposta quando necessário, ou seja, as mudanças não aparecem na tela. O rastreamento de recomposições pode ajudar a encontrar esses dois tipos de problemas.

Para rastrear a recomposição, ative Show Recomposition Counts nas opções de visualização:

.

Após a ativação, o Layout Inspector vai mostrar o número de recomposições à esquerda e as recomposições ignoradas à direita:

Quando você clica duas vezes em um elemento de composição no Layout Inspector, o código correspondente é aberto para análise.

Animações

O Android Studio permite inspecionar animações na visualização de animações. Se uma animação é descrita em uma visualização de composição, 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:

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:

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.

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).