Jetpack Compose: Testei, apanhei e aprendi!
A versão beta do Jetpack Compose — kit de ferramentas moderno do Android — foi liberada recentemente (24 de fevereiro, 2021) pelo Google. Na minha opinião, em pouco tempo acredito que veremos mudanças positivas no modo em que escrevemos e lidamos com UI no Android.
Seguindo todo hype que estamos tendo com interfaces declarativas, chega o Jetpack Compose e em meio a toda essa fumaça e expectativas decidi me aventurar um pouco.
Esse era o meu primeiro contato realmente com esse modo de escrever interfaces, sabia o que era e já tinha lido alguns exemplos do Flutter mas nunca tinha colocado a mão na massa.
Entre exemplos ali, codelabs aqui e freestyle na hora do aprendizado veio minha primeira dificuldade:
Como posicionar os elementos de colunas (Column) e linhas (Row) com o compose?
Arrangement
Este objeto Singleton é usado para controlar o posicionamento tanto no eixo X como no Y. Quando estamos no core do compose e começamos a desmiuçar algumas classes, objetos e métodos pra entender como funciona, vemos que alguns componentes como Row e Column possuem Arrangement e Alignment em seus parâmetros.
Note uma diferença como cada componente lida com o Arrangement, uma coluna trata o posicionamento na vertical enquanto uma linha tratará ele na horizontal.
Com essa breve introdução, vou trazer algumas opções que o próprio compose traz pra podermos utilizar.
Arrangement.Horizontal
Existem modos exclusivos para o eixo horizontal, eles são simples de entender e bem intuitivos. Vale lembrar que o começo/final do layout é subentendido se o layout está configurado como LTR ou RTL.
Arrangement.Start: Define o posicionamento o mais próximo possível do começo do layout
Arrangement.End: Define o posicionamento o mais próximo possível do fim do layout
Arrangement.Vertical
Também temos alguns exclusivos para o Vertical, que segue a mesma linha de começo e final de layout.
Arrangement.Top: Define o posicionamento o mais próximo possível do começo do layout
Arrangement.Bottom: Define o posicionamento o mais próximo possível do fim do layout
Arrangement.HorizontalOrVertical
Por últimos existem algumas opções que podem ser utilizadas tanto na vertical quanto na horizontal.
Arrangement.Center: Posiciona os itens no centro.
Arrangement.SpaceEvenly: Distribui todos os itens com o espaçamento igual, inclusive o espaço do inicio e fim.
Arrangement.SpaceAround: Coloca o mesmo espaçamento entre os filhos e metade do espaçamento entre o inicio e o fim.
Arrangement.SpaceBetween: Posiciona o primeiro item no inicio do layout e o ultimo item no final do layout, então distribui os demais entre eles.
Bom, espero que esse artigo te ajude a compreender como posicionar melhor os elementos utilizando o compose com as ferramentas que ele tem nos disponibilizado.
Ah, e pra quem chegou aqui sem saber muito sobre o Jetpack Compose vou deixar um artigo que gostei bastante, vale a leitura!
Understanding Jetpack Compose — part 1 of 2 | by Leland Richardson | Android Developers | Medium
