ConstraintLayout: Layout Editor
Para quem ja vem utilizando o Android Studio desde as suas primeiras versões, assim como eu, de certeza que ficou surpreendido com o novo Layout Editor, este que foi introduzido no Android Studio 2.2 preview. Com o Layout Editor, podemos criar UI’s de forma mais simples e rápida.
No primeiro artigo da série, expliquei o que é o ConstraintLayout e como funciona. Se ainda não tiveste a oportunidade de ler, podes encontrar o artigo aqui:
- Introdução ao ConstraintLayout
- ConstraintLayout: Layout Editor (Estamos aqui)
- ConstraintLayout: Criando Um Layout Complexo
- Animações com o ConstraintLayout Parte 1
- Animações com o ConstraintLayout Parte 2
Neste segundo artigo, vamos aprender como podemos utilizar o Layout Editor + ConstraintLayout para construir UI’s responsivas.
E so para garantir que estamos todos na mesma pagina:
- Android Studio: Ferramenta utilizada para criar desenvolver aplicativos para android.
- Layout Editor: Ferramenta utilizada para editar layouts de forma visual.
Constraint
Uma constraint representa a conexão ou o alinhamento de uma view com outra view, ou com o parent. Isto é, as constraints definem como uma view estará posicionada no eixo vertical e/ou horizontal. Por tanto, cada view deve ter no mínimo uma constraint para cada eixo.
Cada view tem quatro anchor points, cada ponto representa um lado de uma view, é através deles que iremos criar as constraints.
Criando constraints com o layout editor
Através do layout editor podemos criar constraints de um maneira muito simples, tudo que precisamos é apenas arrastar o anchor point de uma view para outra. Assim:
Da mesma forma, podemos adicionar constraints entre uma view e o parent:
View Inspector
Além de arrastar pontos e criar constraints entres views, o layout editor dá-nos a possibilidade de fazer ajustes nos atributos da view. No lado direito do layout editor temos a janela dos atributos, é lá onde vamos definir o nome, o id, comprimento, largura e todos os atributos que desejamos ter na nossa view. Para este artigo, irei apenas falar do view inspector, essa ferramenta que nos permite definir o posicionamento da nossa view de uma maneira muito simples.
- Define a proporção de uma view;
- Elimina uma constraint;
- Define a altura e comprimento da view;
- Define as margens da entre views e/ou parent;
- Define a inclinacao da view;
Vamos perceber melhor o número 3 e 5;
Altura e comprimento
Existem três formas de como podemos definir a altura e comprimento das nossas views utilizando o view inspector, que são:
- Fixed: Introduzimos manualmente as dimensões das nossas views, a unidade usada é o dp (density pixels):
- Wrap Content: A view ocupa apenas o espaço necessário para cobrir o seu conteúdo. Por exemplo, quando pegamos em uma caixa e embrulhamos com o papel de presente, estamos a fazer um wrap content na caixa:
- Match Constraints: A view expande-se o maximo possível, de forma a satisfazer as constraints de cada lado.
Espero que tenhas reparado que para cada modo, as linhas dentro do quadrado do view spector mudam de forma. Cada representação diz respeito a forma de dimensionamento da view.
Inclinação da view
Com este atributo podemos ajustar as nossas views ao longo do eixo x e y. Para isso nos basta apenas arrastar um desses controles que estão por volta do quadrado (tem o número 50 no meio). Tão simples que até parece magia, veja por si mesmo:
- No eixo X
- No eixo Y
É isso!
Chegamos ao fim deste artigo, mas deixa-me dizer que, este novo layout editor faz muitas mais coisas incríveis principalmente quando o usamos com o ConstraintLayout. Não deu para falar de tudo, falei apenas de uma forma geral e toquei em alguns pontos, por isso recomendo que procures investigar um bocado mais sobre essa ferramenta incrível. Também recomendo muito uma pesquisa sobre o conceito das Chains para o ConstraintLayout.
No próximo artigo iremos explorar mais o ConstraintLayout e o Layout Editor, criando uma UI bem sofistica e bonita.
Se tiver alguma questão ou sugestão deixe aí nos comentários e não hesite em contactar-me pelo email: edilsonngulele@gmail.com ou twitter: @edilson_ngulele
Obrigado e até a próxima!
