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

ejemplo-viewpager-parte3

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. En la segunda parte vimos como modificar la animación que se ejecuta cada vez que pasamos de página. En esta tercera parte vamos a ver como añadir un indicador a una vista ViewPager usando la librería ViewPagerIndicator desarrollada por el programador Jake Wharton. Además de esta librería, podrás encontrar otras alternativas, pero esta librería lleva ya varios años en continuo desarrollo, entre sus ventajas caben destacar que permite una fácil personalización y que se distribuye bajo licencia Apache License v2.0.

  • Añadiendo títulos

  • Lo primero que debemos hacer es descargar la librería desde aquí. Una vez descargada descomprimimos el fichero en cualquier directorio y a continuación importamos la librería a nuestra aplicación. Para ello, si estamos usando Eclipse, debemos pinchar en File -> Import… y seleccionamos en el cuadro que se abre Android -> Existing Android Code Into Workspace y seleccionamos el directorio library dentro del directorio que se ha creado al descomprimir la librería.

    Ya podemos empezar a trabajar. Empezaremos añadiendo el indicador en nuestro layout principal donde definimos la vista ViewPager, para ello modificamos el fichero main.xml con el siguiente contenido:

    main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    
        <com.viewpagerindicator.TitlePageIndicator
            android:id="@+id/indicator"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
    
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    </LinearLayout>
    

    A continuación modificamos el método onCreate de la actividad principal MainActivity.java:

    MainActivity.java

    
    ...
    import com.viewpagerindicator.TitlePageIndicator;
    ...
    
    public class MainActivity extends FragmentActivity {
    
    	...
    	@Override
    	protected void onCreate(Bundle arg0) {
    		super.onCreate(arg0);
    		this.setContentView(R.layout.main);
    
    		// Instantiate a ViewPager
    		this.pager = (ViewPager) this.findViewById(R.id.pager);
    		
    		...
    		// Bind the title indicator to the adapter
    		TitlePageIndicator titleIndicator = (TitlePageIndicator) findViewById(R.id.indicator);
    		titleIndicator.setViewPager(pager);
    
    }
    

    A continuación vamos a modificar el contenido del adaptador MyFragmentPagerAdapter.java para que se actualice el título del ViewPager cada vez que pasemos de página. Para ello debemos sobrescribir el método getPageTitle con el siguiente contenido:

    MyFragmentPagerAdapter.java

    ...
    public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    	...
    	@Override
    	public CharSequence getPageTitle(int position) {
    		return "Página " + (position + 1);
    	}
    }
    

    Ya podemos ejecutar la aplicación:

    ejemplo_viewpager_parte3

    Con estos simples pasos ya habremos añadido el indicador a la vista ViewPager. Esta librería nos proporciona diferentes tipos de indicadores, y cada uno de ellos posee una serie de métodos que nos permiten personalizarlos. Te recomiendo que te descargues la aplicación ViewPagerIndicator Sample donde podrás ver distintos ejemplos creados con la librería. El código fuente de cada uno de los ejemplos están disponibles en la cuenta de GitHub de Jake Wharton.

    Más información | Ejemplo de ViewPager en Android (Parte 1) , Ejemplo de ViewPager en Android (Parte 2) y Android 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: