Android Animation: expandindo e colapsando uma view de forma animada
Um dos principais objetivos de um desenvolvedor mobile é proporcionar a melhor experiência possível ao usuário, fazendo com que ele passe o maior tempo possível no seu app. E uma forma de fazer isso é através de animações para deixar seu software fluido e cativante.
Aqui no iFood, nós utilizamos esse recurso no app do entregador ao gerar o QR code para a entrega no iFood Box, na qual a view pode ser colapsada em um alerta ou expandida para mostrar o QR code :D
Neste artigo, irei mostrar uma animação de um card de filme que, ao ser clicado, é expandido mostrando uma imagem e um texto.
Como criar o seu layout
Primeiramente, vamos criar o layout da nossa view e, para facilitar a animação, separá-la em dois arquivos diferentes.
O primeiro layout chamado layout_1 é a representação da view colapsada que contém apenas dois TextView (título e subtítulo).
O segundo layout (layout_2) representa a view expandida com uma ImageView e um TextView.
Por fim, os layouts 1 e 2 foram unidos em um layout final chamado activity_expand, usando as tags include dentro de um CardView.
Uma dica importante é sempre que for fazer uma animação no Android, construir o layout com arquivos separados. Isso facilita na hora de aplicar as animações!
Animação
Criei um Utils com cada animação que usarei nesse projeto:
- changeColor: essa animação muda a cor de uma view, recebendo uma função de mudar a cor inicial e a cor final;
- resize: essa função altera a altura da view e tem como parâmetro a view, altura inicial, altura final e o tempo total da animação;
- showWithFadeIn: a função muda o alpha da view fazendo o efeito de fade in — perceba que tem um listener que, antes da animação começar, coloca o alpha da view para 0 (esconde) e a visibilidade para VISIBLE;
- hideWithFadeOut: essa animação esconde a view com efeito fade out — também aqui tem um listener para que no fim da animação a visibilidade da view vá para GONE.
Aplicando as animações
Vamos criar uma Activity chamada ExpandViewActivity, em que nela serão definidos alguns métodos auxiliares:
O primeiro será o setViewHeight(). Nele obteremos a altura do card antes (oldHeight) e depois (newHeight) da animação — isso é necessário para que a função resize possa definir o começo e o fim da interpolação da altura do card.
Utilizando um listener no viewTreeObserver, posso obter as alturas antes delas serem desenhadas na tela. Depois de obter o tamanho da tela de detail (o estágio final do card), sua visibilidade deve ser GONE, por que ela só deve aparecer no fim da animação.
Outro método é o de expandAniamtion(), em que são chamadas as animações criadas no AnimatorUtils.
Primeiro, muda-se a cor com o changeColor de vermelho (cor inicial do card) para branco (cor final do card), depois é alterado o tamanho do card com resize levando em consideração o tamanho atual do card (oldHeight) e o tamanho que deve ter no final da animação (newHeight). Então, usamos o fadeOut para desaparecer com o layout_1 (intro) e com o fadeIn para aparecer o layout_2 (detail).
Por fim, para a animações começarem na ordem desejada, foi criado um AnimatorSet.
Outra dica importante é, sempre antes de animar um layout, pensar na ordem que as animações devem ocorrer — por isso dividir o layout em partes menores facilita o processo.
A última função é a de collapseAnimation(). Ela retorna o layout_2 para o estado de layout_1 seguindo o mesmo princípio do expandAnimation().
Através do Material Design, você pode obter os tempos ideais de duração de animação para cada tipo de evento. Sugiro que dê uma olhada para ver boas práticas de animação e tempo de motion!
Agora, juntando tudo na Activity, criamos um toggle (a variável shouldExpand) para saber se o card está expandido ou colapsado e utilizar a função correspondente.
Pronto, aqui está sua animação! Você pode ver o código completo aqui:
Quer receber conteúdos exclusivos criados pelos nossos times de tecnologia? Inscreva-se.
