Desenvolvimento de Aplicativos Android: ViewPager com efeitos de transição
Neste artigo falaremos sobre como colocar efeitos de transição em um ViewPager.
Para quem não sabe, o ViewPager pode dar uma olhada aqui antes de começarmos.
Animação na transição de página usando ViewPager
Como falei no meu primeiro post, sobre efeitos de transição em ListViews, o Android até a versão atual (KitKat) não nos proporciona muitos efeitos nativos, sendo assim devemos usar de alguma biblioteca, arquivo xml ou código Java para produzir esses efeitos.
Quando criamos a versão 2014 do aplicativo do Festival de Inverno de Ouro Preto – Mariana, sentimos a necessidade desses efeitos que entretém o usuário e fomos atrás do que poderíamos fazer. Eis que descobrimos esses ótimos (e fáceis de fazer) efeitos de transição.
Vamos lá então.
Utilizamos dois efeitos no nosso aplicativo. O primeiro foi utilizado na tela principal da aplicação e o código é esse abaixo.
Basta criar uma classe Java chamada DepthPageTransformer e inserir esse código nela.
[sourcecode language=”java”]
public class DepthPageTransformer implements PageTransformer
{
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View view, float position)
{
int pageWidth = view.getWidth();
if (position < -1)
{ // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
}
else if (position <= 0)
{ // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
}
else if (position <= 1)
{ // (0,1]
// Fade the page out.
view.setAlpha(1 – position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE + (1 – MIN_SCALE) * (1 – Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
}
else
{ // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
[/sourcecode]
O outro efeito é o usado na tela de usuário e o código é esse abaixo.
[sourcecode language=”java”]
public class ZoomOutPageTransformer implements PageTransformer
{
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
@Override
public void transformPage(View view, float position)
{
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1)
{ // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
}
else if (position <= 1)
{ // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 – Math.abs(position));
float vertMargin = pageHeight * (1 – scaleFactor) / 2;
float horzMargin = pageWidth * (1 – scaleFactor) / 2;
if(position < 0)
{
view.setTranslationX(horzMargin – vertMargin / 2);
}
else
{
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA + (scaleFactor – MIN_SCALE) / (1 – MIN_SCALE) * (1 – MIN_ALPHA));
}
else
{ // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
[/sourcecode]
Depois de criar as classes é muito simples o seu uso, basta depois de ter criado seu ViewPager inserir o seguinte código:
[sourcecode language=”java”]
vp.setPageTransformer(true, new ZoomOutPageTransformer());
[/sourcecode]
Onde vp é o nome do meu objeto ViewPager.
Infelizmente esses efeitos só funcionam em versões acima da HoneyComb. Sendo assim, se estiver fazendo um aplicativo que também vai ser utilizado por versões inferiores, assim como o uGuide, basta inserir o código da maneira abaixo para assegurar que tudo funcionará sem problemas.
[sourcecode language=”java”]
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB)
vp.setPageTransformer(true, new ZoomOutPageTransformer());
[/sourcecode]
Simples, não é?!
Qualquer dúvida, deixem nos comentários e tentaremos ajudar da melhor maneira possível.
