Implementando telas no Android com Constraint Layout
Aprender a criar layouts no Android, a princípio, não é uma das melhores experiências para nós, desenvolvedores Android, principalmente para quem está começando na carreira…
“Mas por que você afirma isso Alex?”
Considerando implementações iniciais que se baseiam em view groups como o famoso LinearLayout ou RelativeLayout, há uma série de razões pelas quais nos colocam em tal situação:
- Criar layout via arquivo XML: somos obrigados a lidar diretamente com um arquivo XML nada amigável;
- Complexidade para criação: em muitas das vezes, somos obrigados a usar aninhamento de views para manter um aspecto visual desejado. aquelas famosas técnicas de LinearLayout dentro do outro;
- Problema de performance para layouts complexos: em dispositivos mais limitados, layouts mais complexos tendem a prejudicar a performance, ou até mesmo, quebrar a App, por conta do uso excessivo do aninhamento;
- Falta de um bom editor visual: esse, com certeza, é um dos fatores que faz muita falta, principalmente para desenvolvedores que vem do iOS e fazem os seus layouts por meio do editor visual do XCode.
Pensando em todos esse detalhes e outros, a própria equipe da Google desenvolveu uma biblioteca capaz de resolver todos esses detalhes que mencionei e vamos explorá-la no decorrer deste artigo
Quer aprender mais sobre Kotlin tanto no mundo mobile como no back-end? Então confira este agregador de conteúdo onde listo todos os conteúdos que escrevi de Kotlin e os que serão publicados mais pra frente 😉
Conhecendo o Constraint Layout
O Constraint Layout trata-se de um ViewGroup que teve sua versão estável em Fevereiro de 2017, sendo mais preciso, junto com a versão do Android Studio 2.3. Antes mesmo da release estável, na própria página do Android Developers foi anunciada a proposta de como seriam construídos os layouts com o Constraint Layout:
Logo de cara, o Wojtek Kaliciński já apresenta o Constraint Layout como uma solução para definir layouts complexos sem a necessidade de uma hierarquia aninhada. Para quem já tem mais experiência, muito provavelmente entende do ganho que temos apenas com essa feature. Porém, é comum a seguinte dúvida:
“O que isso muda na construção do layout?”
Acredite, esse é dos maiores impactos quando o assunto é criação de layout no Android e vamos entender o quanto isso faz diferença no nosso dia a dia como desenvolvedor.
Entendendo o problema de hierarquia aninhada em layouts no Android
Para facilitar a compreensão do que irei apresentar, vamos considerar o seguinte exemplo de layout:
Note que temos uma tela para apresentar as informações de perfil do GitHub. Considerando uma implementação que envolva, por exemplo, o Relative Layout e o LinearLayout, teríamos o seguinte arquivo XML para apresentar o mesmo layout:
Se você já criou diversos layouts para Android, muito provavelmente você não enxerga um dos grandes problemas que temos nesse momento.
Repare que para possibilitar o alinhamento, tanto do nome como da bio do perfil à direita da imagem, foi necessário o uso de mais de uma ViewGroup, causando um nível de hierarquia a mais!
“Mas qual é o problema de termos um nível de hierarquia a mais?”
Para esse layout, não existe um problema grave, porém, para layouts mais complexos, que envolvem diversas Views, temos um impacto em performance!
Principalmente quando o layout é criado, pois exige a criação de mais views ou quando buscamos uma View, que navega por todo o layout, isso inclui os níveis gerados pelas demais ViewGroups, até encontrar a View desejada.
“Então como o Constraint Layout resolve esse problema?”
Conhecendo a proposta do Constraint Layout
No Constraint Layout, temos a seguinte implementação para o mesmo aspecto visual do layout de exemplo:
Por mais que agora tenhamos algumas novidades em relação aos atributos que estão sendo utilizados em cada uma das Views, perceba que estamos mantendo um único nível de hierarquia conforme eu havia mencionado anteriormente!
“Legal, mas como eu posso começar com o Constraint Layout?”
Conhecendo os princípios básicos do Constraint Layout
Conforme o própria página do Android Developers afirma, o Constraint Layout opera de uma maneira similar ao RelativeLayout, ou seja, todo o alinhamento é feito de relações entre as Views, a diferença é que somos capazes de indicar o posicionamento que queremos manter as Views por meio dos seus eixos.
Os eixos são definidos como X e Y, sendo X o eixo de ínicio (esquerdo) e fim (direito) e o Y o de topo (cima) e inferior (baixo).
“Mas como isso funciona na prática?”
Na prática, precisamos pensar apenas na forma como uma View vai se ajustar em outra de acordo com os seus eixos. Considerando o layout de exemplo, a ImageView alinhou tanto o seu início (start) como o topo (top) de acordo com a View pai (ConstraintLayout), por isso que ela ficou no lado superior à esquerda:
<ImageView
android:id="@+id/profile_photo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/alex_felipe" />Perceba que no código XML, temos os atributos novos para o Constraint Layout:
layout_constraintStart_toStartOf: alinha o início da View no início de outra View.layout_constraintTop_to_topOf: alinha o topo da View no topo de outra View.
Em uma representação visual temos o seguinte resultado para essa amostra:
Bacana, né? A parte mais legal desse processo, é que somos capazes de determinar essas regras, também conhecidas como constraints pelo próprio editor visual.
Criando layouts com Constraint Layout usando o editor visual
Para isso, dentro do arquivo de layout, precisamos apenas adicionar o Constraint Layout como View root (que já vem por padrão quando criamos um layout via AS), e então, entrar na aba de Design.
O Constraint Layout não vem vinculado com o SDK do Android, ou seja, ele faz parte de uma lib que é adicionada pela primeira vez que criamos um layout no Android.
Abaixo mostro uma demonstração em vídeo:
Repare que no momento que adicionei a ImageView, apareceram os círculos que representam as constraints de cada um dos eixos, nesse caso eu defini a constraints de start e top para poder alinhar a ImageView na parte superior à esquerda do pai.
“E como fica com os TextViews?”
Basicamente realizamos os mesmos passos, a diferença é que ao invés de alinhar a constraint de start com o pai, podemos alinhar a constraint de start com o fim (end) da ImageView:
Então podemos modificar o conteúdo do TextView tanto via editor visual como também diretamente no XML. Por fim, para adicionar o TextView da bio, podemos realizar passos similares, a diferença é que a constraint de topo vai ficar na parte inferior do TextView para o nome:
Perceba que não tivemos tanto trabalho para montar um layout da maneira como fizemos com o LinearLayout.
“Mas o que foi gerado quando criamos o layout dessa maneira?”
O que é gerado pelo editor visual utilizando o Constraint Layout
Com apenas essas ações tivemos o seguinte resultado:
É nítido observar que por padrão, foram gerados alguns valores que não fazem sentido para o que queremos criar, como é o caso dos ids que possuem apenas o nome da view.
Para esses casos, precisamos definir manualmente o que esperados. Entretanto, é importante ficar atento com essa modificação, pois perceba que o Constraint Layout, faz uso dos ids para poder alinhar as views entre elas. Por exemplo, se modificarmos o id da ImageView sem replicar a mudança nas constraints dos TextView, olha só o que acontece:
Ambos TextViews foram para a esquerda, o motivo desse comportamento foi a ausência do id, logo, eles assumem o comportamento padrão do Constraint Layout, nesse caso, sem nenhuma constraint do eixo X.
Em outras palavras, todas as vezes que for modificar o id de uma view dentro do Constraint Layout, tenha certeza que a mudança foi replicada.
Dicas para modificar o id das views dentro do Constraint Layout
Para evitar os problemas que vimos relacionados aos ids, podemos usar recursos do AS, como o Rename Refactoring (ele pode ser usado por meio do atalho Shift + F6), ou então, no editor visual:
Perceba que ao modificar o id o Android Studio pergunta se desejamos replicar a mudança, nesse caso, basta apenas marcar que sim.
Caso o comportamento de replicar seja desejado todas as vezes, basta apenas marcar o check para não perguntar mais sobre a ação desejada para a sessão do AS que você está 😃
Para as demais mudança, basta apenas modificarmos o conteúdo dos TextView para o valor desejado que chegamos no resultado esperado!
Que tal aprender mais?
Com toda a certeza o Constraint Layout não para por aqui. Existem muitas outras técnicas e detalhes que é importante saber para evitar frustrações durante a implementação por causa de comportamentos não esperados.
Em outras palavras, na Alura, eu fiz um curso dedicado à implementação de Layout com Constraint Layout e outras novidades do AS 3.0 onde ensino desde o básico a técnicas mais sofisticadas para criar layouts:
Caso queira consultar o projeto, fique à vontade em dar uma olhada no repositório no GitHub:
Aproveite também e deixe o seu comentário compartilhando o que achou do Constraint Layout 😉
