ConstraintLayout no Jetpack Compose
Se você é do mundo Android, provavelmente já deve ter ouvido falar sobre o Jetpack Compose. Caso você ainda não tenha conhecimento sobre ele, sugiro a leitura desse artigo Jetpack Compose: Testei, apanhei e aprendi! publicado pelo nosso amigo Filipe Rehder, onde ele apresenta o kit e algumas de suas funcionalidades. Nesse artigo, vou demonstrar alguns conceitos e a implementação básica de um ConstraintLayout.
O que é ConstraintLayout?
O ConstraintLayout é similar ao RelativeLayout, porém mais flexível, e com ele conseguimos criar layouts responsiveis com menores hierarquias. No compose, ele tem uma implementação similar ao XML, onde iremos ancorar/referenciar os elementos que estão presentes na tela.
Vamos implementar?
Para implementar, necessitamos adicionar a dependência do ConstraintLayout no build.gradle do módulo app:
implementation("androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha05")Antes de criar o layout, deixa eu dar uma passadinha por alguns termos que iremos utilizar posteriormente:
Modifier: Assim como o nome sugere, o Modifier é onde iremos modificar os aspectos do componente, como Height, Width, Margin, Padding e assim por diante… Nele também é possível adicionar interações, como Clickable, Zoomable, etc.
createRefs: é aonde são criadas as referências para os elementos do layout
constrainAs: é responsável por fornecer as restrições, o mesmo recebe uma refêrencia como parâmetro
linkTo: é aqui é onde iremos especificar as restrições
Para exemplificar, criei um código simples de uma interface baseada em constraints.
ConstraintLayout(
modifier = Modifier.fillMaxSize()
) {
val (topText, bottomText, centerText, rightText, leftText) = createRefs() Text(
text = "Top",
fontSize = 36.sp,
modifier = Modifier.constrainAs(topText) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(parent.top)
}
) Text(
text = "Bottom",
fontSize = 36.sp,
modifier = Modifier.constrainAs(bottomText) {
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
}
) Text(
text = "Center",
fontSize = 36.sp,
modifier = Modifier.constrainAs(centerText) {
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
}
) Text(
text = "Right",
fontSize = 36.sp,
modifier = Modifier.constrainAs(rightText) {
top.linkTo(parent.top)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
}
) Text(
text = "Left",
fontSize = 36.sp,
modifier = Modifier.constrainAs(leftText) {
top.linkTo(parent.top)
start.linkTo(parent.start)
bottom.linkTo(parent.bottom)
}
)
}
No exemplo nós utilizamos o posicionamento atrelado as posições do layout:
top.linkTo: modifica a quem o topo do elemento será linkado
start.linkTo: modifica a quem o começo do elemento (esquerda) será linkado
end.linkTo: modifica a quem o fim do elemento (direita) será linkado
bottom.linkTo: modifica a quem o lado inferior do elemento será linkado
Alinhando os elementos entre si
Para alinhar os elementos entre si, seguimos a mesma ideia, porém ao invés de usarmos o parent, usaremos a referencia criada:
ConstraintLayout(
modifier = Modifier
.fillMaxSize()
.padding(4.dp)
) {
val (image, textA, textB) = createRefs()
Box(
modifier = Modifier
.size(48.dp)
.clip(CircleShape)
.background(Color.Red)
.constrainAs(image) {
start.linkTo(parent.start)
top.linkTo(parent.top)
}
) Text(
text = "Texto 1",
fontSize = 18.sp,
modifier = Modifier
.constrainAs(textA) {
start.linkTo(image.end)
top.linkTo(image.top)
}
.padding(start = 8.dp)
) Text(
text = "Texto 2",
fontSize = 14.sp,
modifier = Modifier
.constrainAs(textB) {
start.linkTo(image.end)
top.linkTo(textA.bottom)
}
.padding(start = 8.dp)
)
}
Neste exemplo, ao invés de alinhar o elemento textoA ao parent, nós alinhamos ele ao end do elemento image.
Text(
text = "Texto 1",
fontSize = 18.sp,
modifier = Modifier
.constrainAs(textA) {
start.linkTo(image.end)
top.linkTo(image.top)
}
.padding(start = 8.dp)
)Essa foi uma pequena demonstração do ConstraintLayout no Jetpack Compose, espero que tenham gostado do meu primeiro artigo aqui, abraços!
