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

entrada_viewpager_parte1

Vamos a mostrar un ejemplo de uso de la vista ViewPager en Android. Esta vista se ha vuelto muy popular entre las aplicaciones que han aparecido en los últimos meses. Una aplicación que usamos todos y que hace uso de la vista ViewPager es la Play Store. Gracias a esta vista podemos desplazarnos por los diferentes menús de la aplicación con un simple gesto de nuestro dedo, es lo que en inglés se llama swipe (deslizar en español). El uso de esta vista proporcionará a nuestra aplicación un aspecto moderno, atractivo y más limpio, ya que no tendremos que incluir botones o enlaces a los diferentes menús de nuestra aplicación.

ejemplo-viewpager-parte1

  • Funcionamiento de la vista

El funcionamiento de la vista ViewPager es muy sencillo: dicha vista está constituida de una serie de páginas que contienen los elementos que queremos mostrar, para ir mostrando cada una de las páginas iremos pasando páginas hacia adelante o atrás con nuestro dedo, mostrando una animación cada vez que pasemos de una página a otra. Para usar la vista ViewPager debemos de tener instaladas la librería de soporte de Android (Support Library) versión 3 o superior, así que lo primero que deberemos hacer una vez creado nuestro proyecto, es descargar dicha librería e incluirla en nuestro proyecto, para ello hacemos lo siguiente:

  1. Hacemos clic derecho sobre el nombre del proyecto Android en el Explorador de Proyectos (Project Explorer) de Eclipse.
  2. Seleccionamos Android Tools y luego Add Support Library…
  3. Aceptamos la licencia y empezará la instalación.
  • Creando las páginas.

Una vez instalada la librería de soporte vamos a pasar a crear la vista que vamos a usar para añadir el contenido que queremos mostrar en cada una de las páginas de la vista ViewPager. Cada una de las páginas de la vista ViewPager la trataremos como un fragmento (Fragment):

fragment_screen_slide_page.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tvIndex"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textColor="@color/white"
        android:textIsSelectable="false"
        android:textSize="75sp" />

</LinearLayout>

En esta ocasión, para facilitar el ejemplo, hemos añadido un TextView al fragmento, pero puedes añadir cualquier tipo de vista, por ejemplo, puedes añadir imágenes (ImageView) para crear una galería de imágenes o crear vistas más complejas.

A continuación pasamos a crear una clase que debe heredar de la clase Fragment. Cuando queramos añadir una página nueva a nuestra vista ViewPager crearemos una nueva instancia de esta clase especificando dos parámetros: el texto que se mostrará en la página y el color que se aplicará al fondo de la página. Cuando se cree la página llamando al método onCreate se cargarán dichos parámetros y cuando se dibuje la página en el método onCreateView se mostrará el texto y se aplicará el color especificados:

ScreenSlidePageFragment.java

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class ScreenSlidePageFragment extends Fragment {

	/**
	 * Key to insert the background color into the mapping of a Bundle.
	 */
	private static final String BACKGROUND_COLOR = "color";

	/**
	 * Key to insert the index page into the mapping of a Bundle.
	 */
	private static final String INDEX = "index";

	private int color;
	private int index;

	/**
	 * Instances a new fragment with a background color and an index page.
	 * 
	 * @param color
	 *            background color
	 * @param index
	 *            index page
	 * @return a new page
	 */
	public static ScreenSlidePageFragment newInstance(int color, int index) {

		// Instantiate a new fragment
		ScreenSlidePageFragment fragment = new ScreenSlidePageFragment();

		// Save the parameters
		Bundle bundle = new Bundle();
		bundle.putInt(BACKGROUND_COLOR, color);
		bundle.putInt(INDEX, index);
		fragment.setArguments(bundle);
		fragment.setRetainInstance(true);

		return fragment;

	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);

		// Load parameters when the initial creation of the fragment is done
		this.color = (getArguments() != null) ? getArguments().getInt(
				BACKGROUND_COLOR) : Color.GRAY;
		this.index = (getArguments() != null) ? getArguments().getInt(INDEX)
				: -1;

	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {

		ViewGroup rootView = (ViewGroup) inflater.inflate(
				R.layout.fragment_screen_slide_page, container, false);

		// Show the current page index in the view
		TextView tvIndex = (TextView) rootView.findViewById(R.id.tvIndex);
		tvIndex.setText(String.valueOf(this.index));

		// Change the background color
		rootView.setBackgroundColor(this.color);

		return rootView;

	}
}
  • Añadiendo un ViewPager

Una vez preparado el contenido que vamos a mostrar en cada página pasamos crear una vista que contenga a nuetsro propio ViewPager:

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" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

A continuación creamos una actividad que hará lo siguiente:

  • Cargar el layout que contiene la vista ViewPager que acabamos de crear.
  • Crear nuestro propio adaptador MyFragmentPagerAdapter para la vista ViewPager que heredará de la clase FragmentPagerAdapter. El adaptador simplemente va a almacenar la lista de las páginas (fragments) que vamos a mostrar.
  • Añadir las distintas páginas (fragments) que vamos a mostrar en la vista ViewPager.
  • Conectar el adaptador MyFragmentPagerAdapter que acabamos de crear a la vista ViewPager.
  • Controlar que cuando se pulse el botón Atrás se muestre la página anterior, y si estamos en la primera página salgamos de la aplicación.

MyFragmentPagerAdapter.java

import java.util.ArrayList;
import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * 
 * @author amatellanes
 * 
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

	// List of fragments which are going to set in the view pager widget
	List<Fragment> fragments;

	/**
	 * Constructor
	 * 
	 * @param fm
	 *            interface for interacting with Fragment objects inside of an
	 *            Activity
	 */
	public MyFragmentPagerAdapter(FragmentManager fm) {
		super(fm);
		this.fragments = new ArrayList<Fragment>();
	}

	/**
	 * Add a new fragment in the list.
	 * 
	 * @param fragment
	 *            a new fragment
	 */
	public void addFragment(Fragment fragment) {
		this.fragments.add(fragment);
	}

	@Override
	public Fragment getItem(int arg0) {
		return this.fragments.get(arg0);
	}

	@Override
	public int getCount() {
		return this.fragments.size();
	}

}

MainActivity.java

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

	/**
	 * The pager widget, which handles animation and allows swiping horizontally
	 * to access previous and next pages.
	 */
	ViewPager pager = null;

	/**
	 * The pager adapter, which provides the pages to the view pager widget.
	 */
	MyFragmentPagerAdapter pagerAdapter;

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

		// Create an adapter with the fragments we show on the ViewPager
		MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(
				getSupportFragmentManager());
		adapter.addFragment(ScreenSlidePageFragment.newInstance(getResources()
				.getColor(R.color.android_blue), 0));
		adapter.addFragment(ScreenSlidePageFragment.newInstance(getResources()
				.getColor(R.color.android_purple), 1));
		adapter.addFragment(ScreenSlidePageFragment.newInstance(getResources()
				.getColor(R.color.android_green), 2));
		adapter.addFragment(ScreenSlidePageFragment.newInstance(getResources()
				.getColor(R.color.android_yellow), 3));
		adapter.addFragment(ScreenSlidePageFragment.newInstance(getResources()
				.getColor(R.color.android_red), 4));
		this.pager.setAdapter(adapter);

	}

	@Override
	public void onBackPressed() {

		// Return to previous page when we press back button
		if (this.pager.getCurrentItem() == 0)
			super.onBackPressed();
		else
			this.pager.setCurrentItem(this.pager.getCurrentItem() - 1);

	}

}

ejemplo-viewpager-parte1

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