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:

1. Introdução ao ConstraintLayout (Estamos aqui)
2. ConstraintLayout: Layout Editor
3. ConstraintLayout: Criando Um Layout Complexo
4. Animações com o ConstraintLayout Parte 1
5. 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.

LinearLayout

• RelativeLayout: Permite alinhar views uma em relação a outra ou em relação ao parent.

RelativeLayout

ConstraintLayout

O ConstraintLayout é uma forma de criar/desenhar layouts complexos sem a necessidade de se usar hierarquias agrupadas.

WTF???

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.

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:

Simple UI

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!