Conhecendo o ConstraintLayout

No Google I/O 2016, a Google anunciou a mais nova ferramenta para criação de layouts para Android, o Constraint...

Data de publicação: 09/05/2018
Pessoa Codando

No Google I/O 2016, a Google anunciou a mais nova ferramenta para criação de layouts para Android, o Constraint layout. Ele foge bastante da forma como os layouts eram desenhados até aquele momento mas pode te oferecer a possibilidade de desenhar layouts complexos de forma muito mais simples.

Inicialmente pode haver certa dificuldade de se acostumar com a dinâmica do Constraint layout e a relatividade entre views que esse layout traz, porém depois de algumas telas desenhadas e você pegando o jeito da coisa, desenhar telas fica muito mais fácil e divertido e hoje eu dou preferência para esse layout.

Quando se trata de performance e best practices para desenhar telas no Android, é recomendado que você evite sempre que possível views aninhadas, ou seja, quanto menos níveis você tiver em um layout melhor. Isso te traz um layout “flat” que é menos custoso para o Android desenhar na tela.

Para estruturar nossas telas temos como opções:

FrameLayout

Esse é o layout mais simples do Android mas pode ser uma boa opção quando precisamos de fazer layouts onde views se sobrepõe.

LinearLayout

Ideal para empilhar views. É possível empilhar de forma horizontal e vertical.

RelativeLayout

O RelativeLayout pode ser colocado como o início dessa idéia de fazer layouts com views relativas umas às outras. Algumas coisas eram mais fáceis de fazer utilizando esse layout, mas ele ainda não era tão maduro e meio complexo de entender as vezes, nem sempre acontecia o que você esperava que ia acontecer… rs. Então nem sempre era tão útil como poderia ser.

ConstraintLayout

E então o RelativeLayout vitaminado, ou a cópia melhorada das constraints e auto layout do IOS, (Galera do IOS vai adorar essa, rs) veio para revolucionar os layouts do Android. No início é complexo para qualquer desenvolvedor muito pela mudança de paradigma, mas assim que você se acostuma ele se torna uma ótima ferramenta.

Como você consegue desenhar as views de forma relativa uma a outra usando constraints, é possível fazer em um nível só layouts complexos que muito provavelmente não seriam possíveis usando os outros layouts disponíveis.

Bom, mas vamos a um exemplo prático para entender como isso funciona. Imagine que você precise desenhar um layout similar a esse:

Usando os outros layouts, seu xml ficaria similar a esse:

Já com ConstraintLayout o layout ficaria muito menor e sem nenhum layout aninhado:

Agora vamos tentar entender como esse layout funciona. Dentro de um ConstraintLayout toda view passa a ter constraints que representam uma espécie de ponto de ligação para o top, bottom, left e right. (Left e Right podem também serem vistos como start e end respectivamente) De posse dessas constraints, você pode direcionar views da seguinte forma: View 1, quero que você fique a esquerda da View 2 e acima da View 3 e assim as views vão se organizando dentro do layout. Parent (o próprio constraint layout) também pode ser utilizado como ponto de ligação. Então você pode dizer a uma view que fique no topo do parent.

Uma coisa interessante sobre as constraints, é que a não ser que você defina pesos pra elas, elas funcionam como imãs que atraem as views igualmente. O que isso significa é que por exemplo se voce define que uma view deve ter sua constraint right alinhada ao right do parent e o left alinhado ao left do parent, a view não vai ficar nem à esquerda nem à direita do parent, ela vai ficar centralizada, pois cada uma dessas constraints “puxam” a view de forma igual.

Vamos tentar entender como esse código funciona por partes. Primeiramente o círculo com o desenho do ônibus dentro. O círculo tem todas as suas 4 constraints, top, bottom, start e end alinhadas ao parent. Como resultado, o círculo fica centralizado na tela. Para a view do ônibus, fazemos exatamente a mesma coisa, porém ao invés de alinhar ao parent, alinhamos ao círculo, fazendo com que o ônibus fique dentro do círculo.

                                                   Círculo

 

                                                      Ônibus

 

                             Resultado

 

Agora, temos duas linhas uma de cada lado do círculo e que se alinham exatamente no meio do círculo verticalmente. Para alcançar esse resultado, primeiro para que a linha da esquerda comece no início da tela e vá até o início do círculo, dizemos ao layout que a constraint start da linha deve se alinhar ao start do parent, e a constraint end da linha, deve se alinhar ao start do círculo, fazendo que ela cresça apenas até chegar ao círculo, nunca ultrapassando-o. Um detalhe importante aqui é que para que as linhas se alonguem até o ponto onde as constraints a limitam, o width das view deve ser 0dp ou MATCH_CONSTRAINT. Para a linha da direita usamos a mesma lógica, porém nesse caso o start da linha alinha com o end do círculo e o end da linha alinha com o end do parent. E agora para que ele fique centralizado verticalmente ao círculo, como uma base line, apenas alinhamos as constraints top e bottom com o círculo e a view se alinhará.

                                           Linha da esquerda

 

                                          Linha da direita

 

                                                        Resultado

 

Agora pra fechar, temos o nome da empresa, que precisa ficar centralizado, logo abaixo do círculo. Essa está fácil! Para centralizar alinhamos start e end com as respectivas constraints do parent. E para que o texto fique logo abaixo do círculo, alinhamos o top do texto ao bottom do círculo.

                                          Nome da empresa

 

                                                  Resultado final

 

E o layout está pronto! O exemplo é bastante simples, mas já permite ter uma noção de como funcionam as constraints e como trabalhar com elas. A prática vai tornando esse processo mais natural. Uma dica que acredito ser valiosa e que pode ser percebida facilmente nesse exemplo, é que é importante você analisar primeiro como vai desenhar o layout antes de começar a adicionar as constraints e tentar definir uma espécie de pontos chave do seu layout. No nosso caso o círculo foi esse ponto. Vocês podem perceber que os outros elementos foram todos alinhados relativamente a ele. Quem será essa view chave, vai depender do formato do seu layout, e podem ser vários em pontos diferentes da tela, é sempre uma questão de analisar com calma as relações entre os elementos que formam o layout da sua tela.

Bom, essa foi apenas uma introdução de como funciona esse novo layout. Tem muito mais a se ver sobre essa poderosa ferramenta! Mas com esse básico já dá pra alcançar resultados muito bons e essa é a base que você precisa saber para utilizá-lo.

O código do exemplo completo está nesse link:

Espero que esse artigo possa ser útil. Até a próxima!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

treze − doze =

Posts relacionados

  1. Sobre a Dextra

    Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes.

  2. Categorias

Scroll to top