Animações com o ConstraintLayout
Parte 1
Para além de facilitar na criação de UI’s complexas e trazer melhor performance nas nossas apps, o ConstraintLayout possui vários benefícios que muita gente não tem conhecimento. Um deles é a possibilidade de criar animações entre views (… com muito pouco código). E é isso que veremos neste artigo.
Este é o quarto artigo da série:
- Introdução ao ConstraintLayout
- ConstraintLayout: Layout Editor
- ConstraintLayout: Criando Um Layout Complexo
- Animações com o ConstraintLayout Parte 1 (Estamos aqui)
- Animações com o ConstraintLayout Parte 2
Neste artigo, irei explicar como podemos criar uma simples animação com o ConstraintLayout. Para tal, trago este exemplo:
Como podes ver, temos o icon no centro da tela. Ao fazer um click no icon, ele aumenta e diminui o seu tamanho.
Animação
De forma simples e crua, uma animação é uma simulação de movimento criada ao exibir imagens ou frames. Uma animação traz vida à interface do utilizador.
Com o ConstraintLayout não foge a regra, ele permite-nos criar uma animação entre dois conjuntos de constraints. Isso é possível graças ao TransitionManager (veremos melhor ao longo do artigo).
Requisitos
- Android Studio 3.0 (ou uma versão mais recente)
- Algumas bases sobre Kotlin
- Algumas bases sobre ConstraintLayout
Vamos a isto…!
1. Criar projecto
Crie um projecto no Android Studio. Chamei o meu de Animation Face
2. Adicionar a imageView no centro da tela.
Codigo XML (activity_main.xml)
Observações: Nota que layout tem o id = main_layout e a ImageView tem o id = face_imageView.
3. Criar layout alternativo
Crie um segundo layout com a mesma imageView mas com um tamanho maior. Eu chamei de activity_main_alt
Codigo XML (activity_main_alt.xml)
Observações: Nota que esta imageView tem o mesmo id com a imageView do primeiro layout (face_imageView)
4. Fazer a magia acontecer
Neste último passo, vamos criar um click listener para dar aquela transição suave entre o icon menor e o maior.
Adicione o seguinte codigo:
O que está a acontecer?
ConstraintSet — È uma classe que nos permite definir conjuntos de constraints programaticamente para que sejam usados em um ConstraintLayout. Permite criar e guardar constraints, que por sua vez, podem ser aplicadas em um ConstraintLayout já existente.
clone() — Este método recebe todos os constraints e propriedades de um layout. Neste exemplo, recebemos todos os constraints do activity_main.xml (através do seu id main_layout) e activity_image_alt.xml.
TransitionManager — Essa é classe que faz toda a magia. Ela activa a transição quando pretendemos sair de um estado para o outro.
beginDelayedTransition() — Este metodo é responsável por iniciar a animação do ConstraintLayout.
applyTo() — Define ou aplica as constraints á uma determinada view .
É isso!
Chegamos ao fim de mais um artigo, espero que tenha sido útil para ti. Recomendo que explorem melhor o TransitionManager, essa classe permite criar vários tipos de animações e podem ajudar a tornar a tua app mais interativa e menos estática.
Aqui vai o link para o Github
Para o próximo artigo, iremos continuar com as animações e irei trazer um exemplo um bocado mais “complexo”.
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!
