Android >> Ejemplo de ViewPager en Android ( Parte 2 )

entrada_viewpager_parte2

En la primera parte de este tutorial vimos como realizar la implementación de una vista ViewPager para mostrar varias vistas y poder desplazarnos de una página a otra con nuestro dedo.

  • Modificando la animación entre páginas

En esta segunda parte del tutorial sobre el uso de la vista ViewPager en Android vamos a modificar la animación que se ejecuta cada vez que pasamos de página. Para ello debemos implementar el interfaz ViewPager.PageTransformer. Este interfaz posee un único método, transformPage() que es ejecutado cada vez que pasamos de una página a otra.

A continuación vamos a ver las dos animaciones (Zoom-out page transformer y Depth page transformer) proporcionadas por Google en la página de desarrolladores de Android. Puedes reproducir la animación Zoom-out page transformer aquí y la animación Depth page transformer aquí:

ZoomOutPageTransformer.java

import android.support.v4.view.ViewPager;
import android.view.View;

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
	private static float MIN_SCALE = 0.85f;
	private static float MIN_ALPHA = 0.5f;

	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);
		}
	}
}

DepthPageTransformer.java

import android.support.v4.view.ViewPager;
import android.view.View;

public class DepthPageTransformer implements ViewPager.PageTransformer {
	private static float MIN_SCALE = 0.75f;

	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);
		}
	}
}

Una vez tengamos la implmentación de ViewPager.PageTransformer que deseemos usar, deberemos llamar en nuestra actividad principal al método setPageTransformer() de nuestra vista ViewPager, indicando la animación que vamos a usar:

MainActivity

...
import com.amatellanes.android.examples.transformers.DepthPageTransformer;

public class MainActivity extends FragmentActivity {

	...

	@Override
	protected void onCreate(Bundle arg0) {
		...

		// Instantiate a ViewPager
		this.pager = (ViewPager) this.findViewById(R.id.pager);

		// Set a custom animation
		this.pager.setPageTransformer(true, new DepthPageTransformer());

		...

	}

	...
}

Más información | Ejemplo de ViewPager en Android (Parte 1), Ejemplo de ViewPager en Android (Parte 3) y Google Developers

Descargar código | Github

Etiquetado , , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: