Android: ViewPager para transiciones entre pantallas (Slides)

Standard

Hablando de aplicaciones móviles (en nuestro caso particular, Android), los Sliders son usados con bastante frecuencia para mostrar transiciones entre pantallas completas sin necesidad de incluir botones o enlaces que nos permitan navegar entre ellas valiéndonos de Intents. Esto proporciona un aspecto más limpio y elegante a nuestra aplicación.

Mediante la vista ViewPager, es posible deslizarse de un layout a otro dentro del mismo Activity con un solo gesto en la pantalla (swipe) y observar una animación en la transición.

ViewPager on Android

Imagen tomada de Amatellanes.wordpress

En este post les comparto un ejemplo que me fue muy útil sobre la implementación de esta vista y su uso.

Es importante mencionar que para usar la vista ViewPager es necesario tener instalada la biblioteca de soporte de Android (Support Library) en su versión 3 o superior.

En este ejemplo serán descritos los siguientes archivos:

  • layout/fragment_screen_slide_page.xml
  • layout/activity_screen_slide.xml
  • src/ScreenSlidePageFragment.java
  • src/ScreenSlideActivity.java

 

Creación de un Layout

Se crea un archivo xml para cada uno de los layouts de las pantallas a mostrar en el slider. Para fines prácticos, el layout puede contener cualquier cosa que se desee mostrar en la interfaz. En el siguiente ejemplo nuestro layout contiene de manera visible sólo un TextView:

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

    <TextView style="?android:textAppearanceMedium"
        android:padding="16dp"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/lorem_ipsum" />
</ScrollView>

También es necesario definir strings en el archivo strings.xml para el contenido de las vistas, no es recomendable amarrar strings fijas en el código.

 

Creación de un Fragment

Para continuar, es necesario crear una clase que extiende a la clase Fragment. Ésta se encarga de regresar el layout recién creado en el método onCreate(), mostrado en el snippet de código anterior. Es posible crear instancias de este Fragment en el Activity padre para cada una de las páginas a mostrar en el slider.

/** 
 * ScreenSlidePageFragment.java 
 */
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
...
public class ScreenSlidePageFragment extends Fragment {
 /**
 * La clave del argumento para el número de página que representa 
 * el fragment.
 */
 public static final String ARG_PAGE = "page";

 /**
 * El número de páginas a mostrar en el ejemplo.
 */
 private int mPageNumber;

 /**
 * Método "factory" para la clase. Construye un nuevo fragmento para 
 * el número de página correspondiente.
 */
 public static ScreenSlidePageFragment create(int pageNumber) {
     ScreenSlidePageFragment fragment = new ScreenSlidePageFragment();
     Bundle args = new Bundle();
     args.putInt(ARG_PAGE, pageNumber);
     fragment.setArguments(args);

     return fragment;
 }

 public ScreenSlidePageFragment() {
 }

 @Override
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     mPageNumber = getArguments().getInt(ARG_PAGE);
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
 Bundle savedInstanceState) {
     // Despliega el layout que contiene el contenido de la página.
     ViewGroup rootView = (ViewGroup) inflater
          .inflate(R.layout.fragment_screen_slide_page, container, false);

     // Asigna a la vista el título a mostrar en la página.
     ((TextView) rootView.findViewById(android.R.id.text1)).setText(
          getString(R.string.title_template_step, mPageNumber + 1));

     return rootView;
 }

 /**
 * Regresa el número de página representado por el fragmento.
 */
 public int getPageNumber() {
     return mPageNumber;
 }
}

 

Agregando un ViewPager

ViewPager incorpora animaciones por default en las transiciones entre pantallas, por lo que no es necesario agregarlas pero éstas pueden ser configurables.

Esta vista se vale de la clase PageAdapter como un proveedor de las páginas a mostrar, para lo cual PageAdapter utiliza a la clase Fragment que acabamos de crear con el snippet de código anterior.

Para esto, agregamos en el layout de nuestro Activity padre la vista ViewPager:

<!-- activity_screen_slide.xml -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 

Creación del Activity

Nuestro Activity padre se encarga, esencialmente, de lo siguiente:

  • Asigna el contenido que será el layout visualizado mediante la vista ViewPager.
  • Extiende a la clase abstracta FragmentStatePageAdapter, la cual proporciona instancias de la clase ScreenSlidePageFragment que fue descrita previamente. Esto para cada nueva página a visualizar.
  • Conecta el PageAdapter al ViewPager.
  • Maneja la tecla “back” del teclado para regresar en el stack virtual que contiene a los fragments de cada una de las páginas. Si se encuentra en la primera de estas páginas, sale de la aplicación.
/** 
 * ScreenSlideActivity.java
 */
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
...
public class ScreenSlidePagerActivity extends FragmentActivity {
    /**
     * El número de páginas a mostrar en el ejemplo.
     */
    private static final int NUM_PAGES = 5;

    /**
     * La vista Viewpager, que maneja las animaciones y se encarga de 
     * deslizar horizontalmente para visualizar las diferentes páginas.
     */
    private ViewPager mPager;

    /**
     * El PageAdapter, que proporciona las páginas a visualizar.
     */
    private PagerAdapter mPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_screen_slide);

        // Instanciamos el ViewPager y el PagerAdapter.
        mPager = (ViewPager) findViewById(R.id.pager);
        mPagerAdapter = new ScreenSlidePagerAdapter(
             getSupportFragmentManager()
        );
        mPager.setAdapter(mPagerAdapter);
    }

    @Override
    public void onBackPressed() {
        if (mPager.getCurrentItem() == 0) {
            /**
             * Si el usuario se encuentra en la primera página, permite 
             * al sistema manejar la tecla Back. Llama al método finish() 
             * y hace pop al stack de Activities.
             */
            super.onBackPressed();
        } else {
            // En caso contrario, selecciona a la página anterior.
            mPager.setCurrentItem(mPager.getCurrentItem() - 1);
        }
    }

    /**
     * Un PageAdapter que representa a 5 objetos consecutivos de la 
     * clase ScreenSlidePageFragment. 
     */
    private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter   {
        public ScreenSlidePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return new ScreenSlidePageFragment();
        }

        @Override
        public int getCount() {
            return NUM_PAGES;
        }
    }
}

 

Ejemplo tomado de este artículo en inglés, del sitio oficial Android Developers. En el mismo puede ser descargado el código completo.

 

Leave a Reply

Your email address will not be published. Required fields are marked *