ConstraintLayout, a evolução do RelativeLayout
Em maio, durante o Google I/O 2016, a empresa apresentou o Android Studio 2.2 Preview. Entre muitas novidades, destacamos uma nova versão do Layout Editor e o ConstraintLayout que conceitualmente é similar ao RelativeLayout, porém, se atrelado ao novo editor, traz diversos recursos que facilitam a vida de desenvolvedores experientes e iniciantes, principalmente aqueles que não estão habituados a trabalhar com XML.
Novo Layout Editor
Na versão atual do Android Studio, eu utilizo o Layout Editor apenas como uma pré-visualização do layout que estou construindo através do editor de XML. Ele costuma ser lento e muitas vezes é melhor executar a aplicação ao invés de tentar utilizá-lo. Acho que não estou sozinho nesse barco…
Uma das novidades do editor é a visualização “blueprint”. Esta visualização é bem leve e traz informações visuais sobre margens e as constraints do novo layout. Além disso, você também consegue visualizar views que às vezes são invisíveis no layout final. Na imagem abaixo, você pode conferir a visualização que já existe na versão atual do Android Studio lado a lado com a visualização blueprint e também pode escolher visualizar apenas uma delas, através da toolbar do editor.
Agora vamos ao assunto principal deste artigo: o ConstraintLayout. No RelativeLayout podemos posicionar uma view na tela baseada em uma outra view. No novo layout isso continua acontecendo, mas agora podemos utilizar o recurso de drag-and-drop de elementos do editor para posicionar os elementos e criar as constraints que garantem a sua posição na tela, tornando o layout mais responsivo. Podemos criar as constraints manualmente ou deixar o editor criá-las automaticamente.
Mas o que são constraints?
Constraint é a descrição de como uma view se posiciona na tela de forma relativa a um outro elemento do layout ou ao próprio ConstraintLayout.
Um lado de uma view pode se ligar a um anchor point de outra view.
Você também pode ligar um lado de uma view a borda do layout.
O ConstraintLayout oferece uma opção chamada “guideline”
Guideline é uma linha invisível que pode ser utilizada para alinhar seus elementos.
Tipos de constraints
Sabendo que uma view pode se posicionar na tela com relação a outro elemento ou ao próprio layout, podemos determinar quatro tipos de constraints:
- Side connection with the layout: Conecte um lado da view a um lado do layout. Por exemplo, conecte o lado de cima da view com o borda superior do ConstraintLayout.
- Side connection with a view: Conecte um lado da view com um lado oposto de outra view. Por exemplo, conecte o lado direito de um Button com o lado esquerdo de um Textview. O Button sempre estará ao lado esquerdo do TextView.
- Side alignment with a view: Alinhe a borda da view com a mesma borda de outra view. Por exemplo, alinhe o lado esquerdo de um Button com o lado equerdo de outro Button. Dessa forma, eles estarão empilhados verticalmente e alinhados à esquerda.
- Baseline alignmet with a view: Alinhe o baseline do texto de uma view com o baseline do texto de outra view. Use este tipo para alinhar horizontalmente quando o alinhamento do texto das views for mais importante que o alinhamento dos lados da view.
Como usar
O ConstraintLayout é compatível com Android 2.3 ou superior, mas para utilizar os recursos do Layout Editor é necessário utilizar o Android Studio 2.2 Preview.
Nada impede que você utilize este layout na versão atual do Android Studio, mas deverá fazer tudo manualmente, através do XML o que, de certa forma, acaba com grande parte da mágica deste novo layout.
É necessário atualizar o Android Support Repository para versão 32 ou superior e adicionar a dependência abaixo.
Lembre-se de que o editor está na versão preview e o layout ainda é alpha. Já peguei diversos bugs durante a pesquisa para este artigo e não aconselho, de forma alguma, a utilização desses recursos nos aplicativos em produção.
Outro ponto negativo é a falta de documentação. O único documento oficial é este: http://tools.android.com/tech-docs/layout-editor em cuja fonte se baseia este artigo.
