Android: Trabajando con ViewPager

Buenas amigos, en este nuevo tema vamos a ver como realizar una app en el que poder deslizar nuestras activitys y que se nos vayan mostrando muy parecidamente a como lo hace google play. Esto nos puede facilitar el diseño de nuestra aplicación ya que nos permite tener varias activitys funcionando en una sola.



Antes de nada voy a ir enumerando los componentes que nos harán falta:

1. Librería JakeWharton Android ViewPagerIndicator
2. Un archivo xml donde colocaremos el diseño de nuestra activity
3. Un archivo xml que contendrá un ViewPager y un TitlePageIndicator
4. Un archivo .java que herede de Fragment
5. Un archivo .java que herede de FragmentActivity
6. Una clase PageAdapter para crear las distintas activitys
7. Una clase DepthPageTransformer que nos proporciona google

Bien, todos estos archivos los podéis descargar al final des tema.

Primero Importamos la librería JakeWharton Android ViewPagerIndicator (podéis ver el proyecto en github pulsando aquí)a nuestro proyecto android. Debemos importarla como proyecto Android existente y no como .jar, para ello vamos a realizar los siguientes pasos:

• En eclipse, pulsamos file/new/other

• En la nueva ventana que se nos abre pulsamos sobre "Android Project from Existing Code"

• Buscamos nuestra librería en el pc y pulsamos finish

Nota: Esta librería en particular os debería aparecer con el nombre library.

• Una vez tengamos la librería incluida, pinchamos sobre nuestro proyecto con botón derecho y elegimos "properties"

• En la ventana que se nos abre pinchamos sobre Android y en la parte de abajo a la derecha nos sale una opción "library", pulsamos en "add", elegimos nuestra librería y pulsamos "OK"

Ya tenemos nuestra librería android en nuestro proyecto.

NOTA: No confundir una librería android con una librería java

Una vez la librería este añadida vamos a realizar nuestras 2 archivos xml:

• El primer archivo xml está compuesto por un ViewPager y un TitlePagerIndicator

• Os lo pongo de esta manera para que lo veáis mejor.

El segundo xml que voy a utilizar va a ser el mismo que utilicé para el tema de subir imagen a servidor sin darle ninguna funcionalidad, solo quiero que veáis como se desliza la screen al pasarla con el dedo, el darle funciones es cosa vuestra.

Bien, teniendo ya  nuestros archivos xml creados vamos a empezar a crear clases, necesitaremos 4:

• MyFragmentPagerAdapter

Bueno, algo que no he explicado son los fragments, estos se comportan como en html los div o capas, es decir, son un conjunto de activitys que se pueden unir o acoplar para formar una activity más completa.

Bien, no es algo que vayamos a profundizar aquí, pero para que os orientéis.

Dicho esto, esta clase que hemos creado heredará de FragmentPageAdapter y almacenará en un list de fragment los fragments que le vayamos pasando por constructor.

• El primer método nos agrega un fragment a nuestro list.
• public void addFragment(Fragment fragment) {
•         this.fragments.add(fragment);//Agregamos fragment a nuestra list
•     }

• El segundo método es sobreescrito, y nos devuelve un elemento de nuestra list pasando su posición por parámetro.
•  @Override
•     public Fragment getItem(int arg0) {
•         return this.fragments.get(arg0);//Obtenemos un item de nuestra list
•     } 
• El tercer método es sobreescrito y nos devuelve la cantidad de elementos que hay almacenados en nuestro list.
• @Override
•     public int getCount() {
•         return this.fragments.size();//Obtenemos el tamañp de nuestra list
•     }
• El cuarto método es sobreescrito, y da un titulo a cada fragment según posición.
•  @Override
•     public CharSequence getPageTitle(int position) {
•      String s="";
•      switch(position){
•      case 0:  s="Pestaña 1"; break;
•      case 1:  s="Pestaña 2"; break;
•      case 2: s="Pestaña 3"; break;
•      case 3: s="Pestaña 4"; break;
•      }
•         return s;
•     }

Esta clase no tiene más explicación, es muy sencilla.

• DepthPageTransfomer

Bueno esta clase nos la proporciona google junto con ZoomOutPageTransformer y su función es darle una animación a nuestros fragments mientras deslizamos la pantalla. No voy a explicarla, ya lo hace muy bien google, solo tenéis que copiarla y agregarla al proyecto, de todas maneras, yo la dejaré al final del tema junto al resto de archivos. Podéis verla aquí

• ViewPagerFragment

Esta clase, como observaréis, no hereda de activity, si no de fragment, es una porción de la activity final que queremos crear:

• Creamos un método static que nos devuelva como resultado un objeto de nuestro fragment. Utilizaremos este método para invocarlo en la siguiente clase.
• public static ViewPagerFragment newInstance() { 
•         // Instantiate a new fragment
• ViewPagerFragment fragment = new ViewPagerFragment();
•         return fragment; 
•     }
• Sobreescribimos el método onCreate(), pero como ya dije, solo quiero mostrar la activity, no le voy a dar ninguna acción, así que lo dejo vacío
• @Override
• public void onCreate(Bundle savedInstanceState) {
• // TODO Auto-generated method stub
• super.onCreate(savedInstanceState);
• }
• Para terminar, sobreescribimos el método onCreateView(), en el cual es donde iniciamos los componentes de nuestro archivo xml en los fragments. Podéis observar que en este método apunto al xml que quiero que muestre.
• @Override
• public View onCreateView(LayoutInflater inflater, ViewGroup container,
• Bundle savedInstanceState) {
• // TODO Auto-generated method stub
• ViewGroup rootView = (ViewGroup) inflater.inflate(
•                 R.layout.activity_image_upload, container, false);
• return rootView;
• }
• Vuelvo a repetir, no le voy a dar acción, solo quiero que veáis como hace slide al pasar el dedo.

• ViewPagerExampleActivity

Bien, esta clase es la importante, la que nos va a hacer funcionar. Podéis observar que esta clase hereda de FragmentActivity. Esta clase formara una activity con todos los fragments que le pasemos.

• Primero declaramos nuestro ViewPager y nuestro PageIndicator
• private ViewPager pager = null;
• private PageIndicator mIndicator;
• Posteriormente, en el método onCreate(), y a continuación de referenciar nuestro ViewPager con el archivo xml, le damos una animación con el método setPageTransformer, donde le pasaremos por parámetro un booleano y nuestra clase DepthPageTransformer():
• this.pager.setPageTransformer(true, new DepthPageTransformer());
• A continuación creamos un objeto de nuestro adapter MyFragmentAdapter, y le pasamos por argumentos getSupportFragmentManager() para obtener el soporte de la aplicación y mostrar posteriormente nuestros fragments, y el contexto (this)
• MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(
•                 getSupportFragmentManager(),this);
• Creamos un for para agregar 4 fragments a nuestro adapter.
• for (int i = 0; i< 4; i++) {
•         adapter.addFragment(ViewPagerFragment.newInstance());
•         this.pager.setAdapter(adapter);
• }
• Podéis ver que al añadir un fragment utilizamos el método static creado en el fragment anterior
• Finalmente referenciamos nuestro PageIndicator con nuestro xml y le agregamos nuestro viewpager para que pueda ponerles titulo.
• mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
• mIndicator.setViewPager(pager);

Bien, esto es todo, si habéis seguido bien los pasos, se os tienen que ir deslizando los diferentes fragments con su titulo mientras pasáis con el dedo.

Aquí os dejo los archivos: ViewPagerExample

Un saludo a todos.