DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
08-11-2016

En esta entrada veremos cómo emplear los ViewPager los cuales permiten manejar convenientemente el caracteristico movimiento lateral (derecha/izquierda) o swipe de forma nativa sin nececidad de emplear código extra.

Los ViewPager son empleados frecuentemente en conjunto con los fragments.

Hace unas entradas anteriores vimos cómo Cómo establecer fragments en los tags en Android con los TabHost y hoy veremos un ejercicio similar pero con una tecnología más actualizada, la cual vendría siendo en un futuro el reemplazo de estos.

Los viewPager son unos tipos de vistas que cada vez son más comunes como en aplicaciones como la Google Play y permite desplazarnos entre distintas pantallas a través de un menú lateral:

Uso de viewPager en Legado Gourmet

Uso del ViewPager en Android.

Uso de viewPager en Google Play

Uso del ViewPager en Android.

Como puedes ver, puedes ubicarla donde quieras, arriba o abajo como cualquier otra vista en Android.

Un punto fuerte de los ViewPager es que permiten emplear de manera nativa el swipe que es el característico movimiento lateral para desplazarnos entre pantallas:

swipe  en Gmail

A la práctica:

Desde nuestro Android Studio creamos un layout como el siguiente:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/rlContainer"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context=".MainActivity">   <include
       android:id="@+id/appbar"
       layout="@layout/toolbar" />   <FrameLayout
       android:id="@+id/frameLayout"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:paddingTop="50dp">       <android.support.v4.view.ViewPager
           android:id="@+id/viewpager"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />
   </FrameLayout>   <android.support.design.widget.TabLayout
       android:id="@+id/appbartabs"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:layout_alignBottom="@+id/frameLayout"
       android:layout_alignParentBottom="true"
       app:tabGravity="fill"
       app:tabIndicatorColor="@color/colorAccent"
       app:tabMode="fixed"/>
</RelativeLayout>

Como vemos no hay nada raro, un elemento raíz que en nuestro ejemplo es un RelativeLayout pero puede ser cualquier otro como un LinearLayout, un toolbar cuyo contenido lo pueden detallar en el código fuente que puedes obtener al comienzo y final de esta entrada y el TabLayout que instanciamos para definir nuestros tabs que permiten trasladarnos entre los fragments que componentes el ViewPager (además del swipe).

Desde nuestra actividad instanciamos los objetos pertinentes :

Toolbar toolbar = (Toolbar) findViewById(R.id.appbar);
viewPager = (ViewPager) findViewById(R.id.viewpager);

Y el TabLayout:

final TabLayout tabLayout = (TabLayout) findViewById(R.id.appbartabs);

Ahora debemos definir un adapter que nos ayudará a construir nuestro tabs y desplazarnos entre los fragments correspondientes:

public class MiFragmentPagerAdapter extends FragmentPagerAdapter {
   private ArrayList<String> tags;   public MiFragmentPagerAdapter(FragmentManager fm, ArrayListArrayList<String> tags, Activity activity) {
       super(fm);
       this.tags = tags;
   }   @Override
   public int getCount() {
       return tags.size();
   }   @Override
   public Fragment getItem(int position) {       Fragment f = null;       switch(position) {
           case 0:
               f = new Fragment1(); //1
               break;
           case 1:
               f = new Fragment2(); //2
               break;
           case 2:
               f = new Fragment1();//v1
               break;
       }       return f;
   }   @Override
   public CharSequence getPageTitle(int position) {
       return tags.get(position);
   }
}

Cómo ves, nada complicado; sobreescribimos la clase FragmentPagerAdapter junto con el método es el getItem(int position) en donde definimos los fragments a desplazarnos, como puedes ver son tres fragments definidos para 3 tabs.

El método CharSequence permite definir el título para nuestros tabs.

Volviendo a nuestra actividad, invocamos al adapter anteriormente definido:

viewPager.setAdapter(new MiFragmentPagerAdapter(
       getSupportFragmentManager(), tags, MainActivity.this));

Ahora establecemos iconos a nuestros tabs: con la siguiente función:

tabLayout.getTabAt(0).setIcon(ICONS[0]);
tabLayout.getTabAt(1).setIcon(ICONS[1]);
tabLayout.getTabAt(2).setIcon(ICONS[2]);

Esto último es opcional, si no defines iconos simplemente aparecerán los textos, pero es buena idea siempre especificar algunos iconos.

Con esto estamos listos y tenemos una aplicación como la siguiente:

viewPager ejemplo

Pero aún podemos sacar más partido de los ViewPager como veremos a continuación.

Establecer vistas personalizados

Puede ser que la vista predefinida de los tabs nos cause algunos inconvenientes, la separación del texto a los iconos, no querer incluir textos etc, si este es tu caso debes saber que podemos definir una vista personalizada para los ViewPager de la siguiente forma.

En este ejemplo definiremos una vista que conste de una imagen, es decir, sin los textos que llamaremos customtab.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">   <ImageView
       android:id="@+id/ivIcon"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center_horizontal" />
</LinearLayout>

En nuestra actividad hacemos lo siguiente:

final int[] ICONS = new int[]{
       R.drawable.vino_off,
       R.drawable.cerveza_off,
       R.drawable.vinosint_off,
       R.drawable.gourmet_off
};...for (int i = 0; i 

Remover el swipe

Si por alguna razón te molesta el swipe, puedes quitarselo de encima definiendo nuestro propio ViewPager que llamaremos como no CustomViewPager:

public class CustomViewPager extends ViewPager {

   private boolean enabled;

   public CustomViewPager(Context context, AttributeSet attrs) {
       super(context, attrs);
       this.enabled = true;
   }   @Override
   public boolean onTouchEvent(MotionEvent event) {
       if (this.enabled) {
           return super.onTouchEvent(event);
       }       return false;
   }   @Override
   public boolean onInterceptTouchEvent(MotionEvent event) {
       if (this.enabled) {
           return super.onInterceptTouchEvent(event);
       }       return false;
   }   public void setPagingEnabled(boolean enabled) {
       this.enabled = enabled;
   }
}

Desde nuestra actividad no tenemos que hacer nada del otro mundo, solo colocar CustomViewPager en vez de ViewPager:

ViewPager viewPager = (CustomViewPager) findViewById(R.id.viewpager);

E invocar al método:

viewPager.setPagingEnabled(false);

Con esto podrás quitarte de encima el "terrible" efecto swipe.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Generador de launcher para Android sin padding

Generador de launcher para Android sin padding

Creando increibles Drawer en Android con MaterialDrawer

Creando increibles Drawer en Android con MaterialDrawer

Librería oficial de PayPal para Android

Librería oficial de PayPal  para Android

Algunos artículos que te pueden interesar

Cómo crear una notificación personalizada en Android

Cómo crear una notificación personalizada en Android

Se explica cómo crear una notificación personalizada en Android a través de un layout, además se explica los componentes de una notificación y cómo lanzarla.

Andrés Cruz 17-08-2017

Lo nuevo del Material Design: Los RecyclerView

Lo nuevo del Material Design: Los RecyclerView

Los RecyclerView al igual que los GridView y ListView, permite crear listados de ítems ya sea a través de listas o celdas y son una versión más flexible, potente y actualizada que los GridView ListView.

Andrés Cruz 07-10-2015

Realidad Aumentada con Wikitude

Realidad Aumentada con Wikitude

Wikitude es una SDK gratuita que permite la creación de aplicaciones de realidad aumentada con Android y IOS utilizando tecnologías web (HTML, javaScript,CSS) o código nativo y cuenta con características como soporte a geolocalización y reconocimiento de

Andrés Cruz 13-03-2017