Constraint Layout com Compose
Olá a todos! Neste artigo demonstrarei um pequeno comparativo entre o Constraint Layout do Jetpack Compose x Contraint Layout do AndroidX
Constraint Layouts nos ajudam a posicionar elementos na tela a partir de uma referência/âncora que esteja presente na tela.
Para utilizar Constraint Layouts precisamos adicionar a dependência no build.gradle do módulo app :
Lembrando que para utilizar o Jetpack Compose é necessário utilizar a versão Preview(Cannary) do Android Studio
Centralizando um elemento na tela com Constraint Layout
- AndroidX :
Código no XML para criar uma view e centralizar na tela com constraints
- Jetpack Compose:
Para fazer o mesmo com Compose precisamos criar como container um ConstraintLayout e criar uma referência(id no modelo anterior) utilizando a função createRef(), e utilizar a função constrainAs do Modifier, passando a referência criada pelo createRef(), para definir as referências da nossa Box, e definir as constraints como no exemplo abaixo:
Alinhando elementos:
- AndroidX:
Código do xml para alinhar 2 views na tela
- Jetpack Compose:
Adicionei uma Box dentro do Constraint Layout e criei uma referência, mas dessa vez ao invés de utilizar o createRef(), utilizei o createRefs() e a desestruturação do kotlin, para obter as minhas 2 referências com 1 só chamada. E mudei as referências de parent para as refs criadas anteriormente:
Obtendo o seguinte resultado:
Guidelines:
- AndroidX:
Código escrito no xml para ter uma guideline horizontal com 20% de distância em relação ao topo.
Como fica a view:
- Compose:
Para criar uma guideline com compose, temos 4 funções principais:
No nosso exemplo criei só a guideline para o top com 0.5f(50%) de distância:
Obtendo o seguinte resultado:
Chain
Uma cadeia é um grupo de visualizações vinculadas umas às outras com restrições de posição bidirecionais. As visualizações em uma cadeia podem ser distribuídas vertical ou horizontalmente.
https://developer.android.com/training/constraint-layout/index.html#constrain-chain
AndroidX:
É necessário adicionar a propriedade chainStyle com os valores packed, spread ou spread_inside, no link acima tem a definição de cada uma delas.
Obtendo o seguinte resultado com chainStyle = packed:
Compose :
Dentro do ConstraintLayout é só chamar a função createVerticalChain(ou Horizontal), e passar como parâmetro as views que fazem parte dessa chain e o chainStyle como exemplo abaixo :
Obtendo o seguinte resultado:
Bom pessoal, essa foi uma pequena demonstração de como utilizar Constraint Layout do Jetpack Compose e uma comparação com o Contraint Layout do AndroidX.
Agradeço a todos por lerem até aqui, fiquem bem 😸.
