Introdução ao ConstraintLayout
Durante o Google I/O 2016 foi apresentado pela primeira vez um novo layout que trouxe uma outra dinâmica para o desenho das UI’s para Android.
Eu comecei a usar o ConstraintLayout à poucos meses, devo confessar que no principio pareceu-me muito estranho mas com o tempo acostumei-me e agora é o layout que mais gosto e o que uso com mais frequência.
Este é o primeiro artigo da série e vou explicar como o ConstraintLayout funciona e porquê tu deverias começar a usar desde já. Durante a série veremos:
- Introdução ao ConstraintLayout (Estamos aqui)
- ConstraintLayout: Layout Editor
- ConstraintLayout: Criando Um Layout Complexo
- Animações com o ConstraintLayout Parte 1
- Animações com o ConstraintLayout Parte 2
Vamos começar por rever algumas bases.
Layouts
Um layout define a estrutura visual da interface do usuário. É composto por uma ou várias Views (caixa rectangular que responde às ações do usuário), que juntas, formam o design do aplicativo e interagem com o usuário. Os layouts mais comuns são:
- LinearLayout: Um layout que organiza as suas views em um única linha vertical ou horizontal.
- RelativeLayout: Permite alinhar views uma em relação a outra ou em relação ao parent.
ConstraintLayout
O ConstraintLayout é uma forma de criar/desenhar layouts complexos sem a necessidade de se usar hierarquias agrupadas.
Okay, vamos tentar de uma outra forma…
O ConstraintLayout permite criar layout com views relacionadas entre si e com o parent de uma forma muito mais flexível sem precisar agrupar layouts uns dentro dos outros. Imagina um RelativeLayout no modo Super Saiyan, yup esse é o ConstraintLayout.
Com o ConstraintLayout podemos ter mais controle do posicionamento das nossas views, usando atributos como:
- layout_constraintLeft_toLeftOf : Alinha o lado esquerdo da view desejada com o lado esquerdo da outra view
- layout_constraintLeft_toRightOf: Alinha o lado esquerdo da view desejada com o lado direito da outra view
- layout_constraintRight_toLeftOf: Alinha o lado direito da view desejada com o lado esquerdo da outra view
- layout_constraintRight_toRightOf: Alinha o lado direito da view desejada com o lado esquerdo da outra view
- layout_constraintTop_toTopOf: Alinha o lado de cima da view desejada com o lado de cima da outra view
- layout_constraintTop_toBottomOf: Alinha o lado de cima da view desejada com o lado de baixo da outra view
- layout_constraintBottom_toTopOf: Alinha o lado de baixo da view desejada com o lado de cima da outra view
- layout_constraintBottom_toBottomOf: Alinha o lado de baixo da view desejada com o lado de baixo da outra view
ConstraintLayout vs. Os outros layouts
Como já tinha dito, o ConstraintLayout traz mais flexibilidade e facilidade na criaçao de UI’s (tanto as UI’s simples como as mais complexas), para provar isso trago aqui um exemplo. Veja a UI que se segue:
Como podemos ver a UI é muito simples, usei um CoodrinatorLayout como root, um RelativeLayout para as TextView’s e o EditText, um LinearLayout na parte inferior para o Button:
<android.support.design.widget.CoordinatorLayout>
<RelativeLayout>
<TextView/>
<TextView/>
<EditText/>
</RelativeLayout> <LinearLayout>
<Button/>
</LinearLayout></android.support.design.widget.CoordinatorLayout>
Utilizando o ConstraintLayout podemos construir a mesma UI de uma forma muito mais simples:
<android.support.constraint.ConstraintLayout>
<TextView/>
<TextView/>
<EditText/>
<Button/>
</android.support.constraint.ConstraintLayout>
Como podemos ver, com o ConstraintLayout conseguimos construir a mesma UI sem precisar agrupar viewGroups (uma view especial que contém outras views) utilizando apenas o necessário.
O que é preciso para ter um ConstraintLayout?
Se quiseres experimentar o ConstraintLayout, vais precisar:
- Android Studio 2.2 (ou superior)
- Adicionar a dependência da biblioteca de suporte para o ConstraintLayout:
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
Porque precisamos do ConstraintLayout?
Uma das maiores vantagens que o ConstraintLayout traz é a velocidade. Além do nos permitir criar UI’s sem agrupar viewGroups, o novo editor de layouts do android studio facilita ainda mais o nosso trabalho. A razão para evitar o agrupamento de ViewGroups é devido ao tempo de renderização que pode crescer exponencialmente a cada nível de agrupamento. Se esse tempo aumenta, o aplicativo irá perder frames no que resulta em transições não tão suáveis.
É isso!
Como o primeiro artigo da série, esta é apenas uma pequena introdução espero que tenha sido útil. No próximo artigo vamos dar uma olhada no novo editor de layout e como podemos usá-lo para criar UI’s usando o ConstraintLayout de forma rápida e eficiente.
Aqui vai o link para o github.
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!