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:
- Introdução ao ConstraintLayout
- ConstraintLayout: Layout Editor
- ConstraintLayout: Criando Um Layout Complexo
- Animações com o ConstraintLayout Parte 1
- 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!