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 compostapaddp
para adicionar um modificadorpadding
em dpweight
para adicionar um modificadorweight
W
,WR
,WC
para inserir o elemento atual em um contêiner deBox
,Row
ouColumn
.
Í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).