Animações com o ConstraintLayout

Parte 2

No meu último artigo, trouxe um pequeno exemplo para mostrar como é simples criar animações utilizando o ConstraintLayout. E como havia prometido, trago aqui um exemplo um bocado mais interessante.

Este é o quinto e o último artigo da série, e até agora já vimos:

1. Introdução ao ConstraintLayout
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 (Estamos aqui)

Para este artigo trago o seguinte exemplo:

O que temos aqui?

• 3 imagens (Wonder Woman, Superman, Batman)
• Cada imagem tem um título e uma descrição
• Ao fazer um click em uma imagem, ela aumenta o seu tamanho e aparece um texto com a sua descrição.
• Ao fazer um click em qualquer parte da interface que não sejam uma imagem, o ecrã volta ao seu estado normal.

Ok… como fazemos isso?…Simples! :)

Requisitos

• Android Studio 3.0 (ou uma versão mais recente)
• Algumas bases sobre Kotlin
• Algumas bases sobre ConstraintLayout

Tudo pronto?…. Mãos à obra!

1. Criar projecto

Crie um projecto no Android Studio. Chamei o meu de Justice Animation

2. Criar layout raiz (activity_main.xml)

Observações: O layout tem o id = main_layout e as TextViews com as descrições de cada super herói tem o alpha=”0". Por isso que não estão visiveis no momento, mas elas estão lá.

3. Criar o layout para a Wonder Woman (activity_main_wonderwoman.xml)

Observações: O tamanho (width e height) da ImageView com o icon da Wonder Woman aumentou para 150dp. A TextView com a sua descrição passa estar a visível com o alpha=”1". Vamos seguir a mesma lógica para os restantes layouts

4. Criar o layout para o Superman (activity_main_superman.xml)

5. Criar o layout para o Batman (activity_main_batman.xml)

Observações: Para este layout, tive que reduzir o tamanho das TextViews com as descrições para a Wonder Woman e Superman, dessa forma temos mais espaço para aumentar o tamanho do icon do Batman.

6. Fazer a magia acontecer

O que está a acontecer?

selectedView — Representa a view selecionada;

animateConstraints() — Estão os ClickListeners para as nossas views. Este metodo invoca as transições.

updateLayout() — Este metodo é responsavel por alterar o layout de um estado do layout para o outro. É lá onde definimos o tipo de animação desejada ao fazer a transição de estados.

defaultLayout — É chamado quando fazemos um click em qualquer parte da interface que não sejam as ImageViews. Devolve o layout para o seu estado normal.

É isso!

Chegamos ao fim de mais um artigo, espero que tenha sido útil para ti.

Como havia dito no inicio, este é o último artigo da série. Contudo, isso não quer dizer que eu vou para por aqui pois ainda existe muito por se explorar. Continuarei a escrever sobre o ConstraintLayout mas não irei seguir nenhuma sequência.

Muitos parabéns por ter chegado até aqui! :)

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!