O Jetpack Compose oferece suporte à interoperabilidade com visualizações. Você pode usar o Compose em visualizações e vice-versa. Isso permite a adoção do Compose em apps baseados em visualização sem precisar migrar todas as visualizações imediatamente.
Etapas da migração
- Crie um plano:crie um plano robusto e detalhado para realizar a migração. Recomendamos um backlog priorizado de tarefas de migração.
- Identifique o candidato XML para migração :identifique e comece pelos menores componentes que são nós folha na hierarquia e expanda o plano de migração de baixo para cima para componentes progressivamente mais altos na hierarquia. Bons candidatos para a migração inicial são pequenos, sem estado e têm menos dependências.
- Analise a hierarquia:depois de identificar a visualização XML a ser migrada, analise a estrutura e a implementação do layout XML.
- Capture o estado inicial:execute um teste de captura de tela para capturar o estado inicial da visualização XML selecionada.
- Pré-requisito: configurar dependências do Compose. Identifique se o projeto tem dependências do Compose e o compilador configurado. Caso contrário, siga as instruções em Configurar dependências e compilador do Compose.
- Pré-requisito: configurar a estilização do Compose. Identifique se o projeto já tem a configuração de estilização do Compose. Caso contrário, siga o tema do Compose. Mantenha o tema XML original enquanto o app estiver em interoperabilidade Migre o tema XML para o Compose para entender padrões de como declarar e até que o projeto seja totalmente migrado para o Compose.
- Migrar a visualização XML para o Compose:comece a conversão do código XML para o Compose, aplique o tema adequado e adicione prévias do Compose para combináveis migrados. Para cenários comuns de migração, consulte outros recursos. Por exemplo, para migrar para APIs Lazy no Compose, siga as etapas em Migrar RecyclerView para Compose.
- Substituir usos:substitua os usos anteriores da visualização XML para usar o novo componente do Compose. Para adicionar o Compose em Views, siga as etapas em Compose em Views. Para adicionar Views no Compose, siga as etapas em Views no Compose.
- Validar a migração:verifique se o estado inicial capturado no teste de captura de tela é o mesmo da prévia do Compose do elemento combinável migrado. Se elas não corresponderem, itere na nova interface combinável e melhore-a para alinhar com o estado inicial. Crie novos testes de interface do Compose para o novo elemento combinável.
- Remoção de XML:quando o elemento combinável recém-migrado corresponder à interface XML inicial, remova o código da visualização XML obsoleta e os testes dele.
Cenários comuns de migração
Verifique se as extensões dp e sp são usadas (16.dp, 20.sp) em elementos combináveis.
Se tools:text estiver presente na visualização XML, use-o em um elemento combinável @Preview
separado.
Conversão de atributo para modificador
A maioria dos atributos XML passa a fazer parte da cadeia modifier ou dos parâmetros da função combinável.
| Atributo XML | Equivalente do Compose |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(Comportamento padrão, geralmente não é necessário um modificador) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (padding externo) |
android:gravity="center" |
contentAlignment = Alignment.Center (Box) ou horizontalAlignment / verticalArrangement (Column/Row) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
Encapsular no bloco if (visible) { ... } |
Migrar estilos (styles.xml)
Os estilos XML geralmente combinam vários atributos para criar um estilo. No Compose, isso é feito criando uma variação combinável com um estilo específico.
Forneça funções @Composable separadas nomeadas de acordo com o estilo e o componente de base, para indicar a diferença no estilo e nos casos de uso desses componentes.
- Padrão:se um elemento XML usar um estilo personalizado
(por exemplo,
style="@style/MyPrimaryButton"), não tente replicar o estilo inline. Em vez disso, sugira a criação de um elemento combinável específico. - Exemplo:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - Escrever:
MyPrimaryButton(onClick = { ... })
- XML:
- Grupos de atributos comuns:se um estilo definir modificadores comuns (como padding + altura), extraia-os para uma propriedade de extensão legível ou uma variável de modificador compartilhada.