ConstraintLayout: Criando Um Layout Complexo
A cada dia que passa, vão surgindo novas ferramentas que facilitam na criação de aplicativos interativos. Em 2016, a google lançou o ConstraintLayout e novo Layout Editor, ferramentas estas que facilitam na criação de UIs dinâmicas, o que nos poupam muito tempo e muita dor de cabeça.
Este é o terceiro artigo da série:
- Introdução ao ConstraintLayout
- ConstraintLayout: Layout Editor
- ConstraintLayout: Criando Um Layout Complexo (Estamos aqui)
- Animações com o ConstraintLayout Parte 1
- Animações com o ConstraintLayout Parte 2
Neste artigo vamos colocar em prática o que vimos nos artigos anteriores e vamos criar uma UI um bocado complexa.
Requisitos
- Android Studio 3.0 (ou uma versão mais recente)
- Adicionar a dependência da biblioteca de suporte para o ConstraintLayout:
implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta3'Tudo pronto?… Mãos à obra.
1 . Criar Projecto
Crie um projecto no Android Studio. Eu chamei o meu de Album Review
2. Cores
No diretório values > color.xml mude as cores do projecto:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#F50057</color>
<color name="colorPrimaryDark">#F50057</color>
<color name="colorAccent">#FF4081</color>
</resources>3. Remover ActionBar
Remova o ActionBar em values > styles.xml usando o attributo NoActionBar:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>A nossa UI ficou assim:
4. Adicionar header
Remova a textView (Hello World) e adicione uma imageView para o header. Na mesma imageView adicione um constraint para o topo, lado esquerdo e direito:
5. Definir a proporção da imagem
Como podes ver, a imagem não cobre a imageView , deixando esses espaços em branco. Para reverter essa situação, precisamos definir uma proporção para a imagem de tal forma que ela ocupe toda a imageView. Graças ao ConstraintLayout e ao Layout editor, podemos fazer isso de uma forma muito simples.
No view inspector, deixe o layout_width e o layout_height como match_constraint.
Vês aquele triangulo no canto superior esquerdo do quadrado? Dá um clique. O teu view inspector deve estar assim:
A proporção da imagem está 1:1. Vamos alterar para 16:11
Com a proporção alterada, temos a imagem a ocupar toda a imageview e o nosso header pronto.
6. Adicionar a capa do album
Vamos adicionar uma imageView com a capa do álbum e de seguida vamos reduzir a sua altura (layout_height) para 170dp:
Mais uma vez, a imagem não ocupa toda a imageView. Portanto, precisamos alterar a proporção. Para esta imagem, vamos usar uma largura (layout_with) de match_constraint com uma proporção 1:1.
A capa fica assim:
7. Center Constraint
Agora vamos colocar a imagem de capa por cima do header, de forma a termos o centro da capa alinhando com a parte inferior do header, dando aquele efeito muito interessante. Parece ser algo complicado, mas o ConstraintLayout tem uma funcionalidade chamada center constraint que já faz o trabalho. Essa funcionalidade permite-nos centralizar uma view com um dos lados uma outra view. Fazemos isso da seguinte maneira:
Primeiro, crie um constraint entre a parte inferior da capa, com a parte inferior do header:
De seguida, crie um constraint entre a parte superior da capa com a parte inferior do header, e já está:
7. Adicionar Guidelines
Guidelines servem como guias visuais nas quais podemos alinhar views. As guidelines podem estar alinhadas de forma vertical como horizontal. Podes ter mais informação sobre os guidelines aqui.
Vamos adicionar uma guideline vertical para o lado esquerdo da interface, assim:
Podemos ver que a guideline foi introduzida através dessa linha tracejada no lado esquerdo:
Por padrão, as guidelines vem com uma margem de 20dp. Vamos alterar essa margem para 16dp e adicionar uma também guideline para o lado direito:
Já temos os guidelines, agora podemos adicionar um constraint entre a capa e o guideline esquerdo, com uma margem de 0dp:
Estamos quase lá… :)
8. Adicionar Titulo e RantingBar
Vamos adicionar uma textView para o título do álbum, de seguida adicionamos um constraint entre o lado esquerdo da textView com o lado direito da capa, e mais um constraint entre a parte superior da textView com a parte inferior do header:
Nota: Para a textView, usei o textAppearance=”@style/TextAppearance.AppCompat.Display1"
Usando uma lógica semelhante, vamos adicionar o RatingBar com as seguintes constraints:
- Lado esquerdo do RatingBar com o lado esquerdo do textView (titulo);
- Parte superior do RatingBar com a parte inferior do textView (titulo);
9. Barriers
As barriers (barreiras) tem um conceito muito semelhante com os guidelines. De forma muito resumida, as barriers são guidelines inteligentes que acompanham um grupo específico de componentes (views). Está posicionada na extremidade mais extrema do grupo em uma direção especificada (vertical ou horizontal). Podes ler mais aqui.
Podemos adicionar uma barrier horizontal assim:
Podes ver a barrier logo por baixo da capa:
10. Adicionar button e TextView’s
O button tem um constraint com guideline e a parte inferior da capa:
Vamos adicionar uma TextView ao lado do button com a data de lançamento do album e o nome da produtora. Essa TextView terá uma constraint para o button e para a barrier.
Agora nós vamos adicionar mais duas textViews. Uma irá servir como lable para a nota do editor e outra como um breve resumo da nota do editor:
Para finalizar, vamos adicionar um “READ MORE” button logo por baixo da textView com o resumo. Esse button terá uma largura de match_constraint:
Eis o producto final:
Para quem trabalha pela primeira vez com o constraintLayout e com o novo Layout Editor, tudo que tenho a dizer é: não te assustes! O ConstraintLayout já provou ser muito eficiente no que diz respeito ao desenho de interfaces complexas. Se em 10 minutos consegues criar uma interface como essa, imagina criar a mesma interface usando o RelativeLayout e/ou LinearLayout, quanto tempo levarias?
É isso!
Chegamos ao fim de mais um artigo, espero que tenha sido util para ti. Durante o artigo vimos alguns conceitos novos como os Guidelines e os Barriers, recomendo que dediquem um tempo para ler a documentação e perceber essas funcionalidades pois são bastante importantes.
Aqui vai o link para o Github
No próximo artigo vamos aprender a criar animações usando o ConstraintLayout (em Kotlin).
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!
