Diseño de la interfaz de usuario de Android: Paginación con vista horizontal

Tal vez hayas visto algunas de las nuevas características de la interfaz de usuario disponibles como parte del paquete de compatibilidad con Android. Una de estas características, las paginación de vista horizontal, permite pasar fácilmente a la izquierda y a la derecha para cargar diferentes pantallas (páginas), controladas por una sola Actividad. Esta característica se ha mostrado en varias aplicaciones de alto perfil como la aplicación Android Market y el cliente Google+ Android.

Hay varias clases en el paquete de compatibilidad con Android que se pueden utilizar para implementar el comportamiento de deslizamiento de página horizontal en los paquetes de Android. El control del ViewPager (androide.support.v4.view.ViewPager) proporciona el comportamiento de desplazamiento horizontal. Se puede utilizar dentro de tus diseños como lo haría un control de la interfaz de usuario de una Galería u otro adaptador. La clase PagerAdapter (android.support.v4.view.PagerAdapter) se utiliza para definir los datos mostrados por el control ViewPager. Hoy veremos un ejemplo sencillo de cómo usar estas clases para proporcionar un comportamiento de swiping (deslizamiento).

Paso 0: Comenzando

Proporcionamos el código fuente completo de la aplicación de muestra que se discute en este tutorial. Puedes descargar el código fuente de muestra que proporcionamos para su revisión.

Paso 1: Usa el paquete de compatibilidad

La paginación de vista horizontal se basa en las APIs que solo están disponibles con el paquete de compatibilidad Android v4, Revisión 3; estas APIs no están disponibles en el SDK estándar de Android en este momento. Por lo tanto, deberás agregar el paquete de compatibilidad con Android a tu proyecto Android para acceder a las APIs adecuadas.

Para añadir el paquete de compatibilidad con Android a tu proyecto Eclipse Android, haz clic con el botón derecho en el proyecto en el Project Explorer (Explorador del proyecto). Elige Android Tools (Herramientas de Android), Añade Biblioteca de compatibilidad. Ahora verás el archivo android-support-v4.jar en tu carpeta de proyecto de Bibliotecas de Referencia. Esto significa que haz agregado exitosamente el paquete a tu proyecto y ahora puedes comenzar a usarlo.

Paso 2: Define un ViewPager

A continuación, tendrás que definir un control de ViewPager en el archivo de recursos de diseño. En nuestro sencillo ejemplo, actualizamos el recurso de diseño main.xml utilizado por nuestra clase de actividad y definimos un control ViewPager en ese diseño. Este control debe ser referenciado por su nombre completo: android.support.v4.view.ViewPager.

Por ejemplo, aquí está el recurso de diseño actualizado main.xml con un ViewPager definido:

1

<?xml version="1.0" encoding="utf-8"?>

2

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3

    android:orientation="vertical"

4

    android:layout_width="fill_parent"

5

    android:layout_height="fill_parent">

6

<android.support.v4.view.ViewPager

7

    android:layout_width="match_parent" 

8

    android:layout_height="match_parent" 

9

    android:id="@+id/myfivepanelpager"/>

10

</LinearLayout>

Los controles del ViewPager suelen ocupar toda la pantalla, pero no tiene por qué ser así. Para este ejemplo, mostraremos cinco "páginas" de diseño diferente, por lo que llamamos a nuestro control del ViewPager por un identificador único llamado myfivepanelpager.

Paso 3: Crea recursos de diseño de páginas

A continuación, querrás crear un conjunto de recursos que formarán las "páginas" o "paneles" para el desplazamiento horizontal. Puedes utilizar el mismo archivo de recursos de diseño para cada página y añadir contenido diferente, o puedes cargar recursos de diseño completamente diferentes para las páginas individuales. Para este ejemplo, creamos cinco archivos de recursos de diseño separados, llamados farleft.xml, left.xml, middle.xml, right.xml y farright.xml. Cada recurso de diseño tiene un contenido diferente para mostrar. El contenido de cada recurso de diseño depende de ti. Puedes usar controles estáticos o dinámicos. Para mantener este ejemplo simple, nos quedaremos con los controles estáticos como los controles TextView e ImageView. Para las páginas del extremo izquierdo y del extremo derecho, incluiremos algunos controles Button.

Esta imagen muestra los resultados de los cinco archivos de recursos de diseño diferentes:

No hay nada especial en la implementación de estos archivos de diseño. No olvides implementar cualquier manejador de Button onClick en tu clase de actividad. Estos recursos de diseño serán cargados por el PagerAdapter en tiempo de ejecución para su visualización en la pantalla. Para detalles de implementación, mira el código fuente que acompaña a este proyecto.

Paso 4: Implementa un PagerAdapter personalizado

El ViewPager necesita un adaptador de datos para determinar y cargar el contenido apropiado para cada página a la que el usuario pase. Hemos llamado a nuestro archivo de recursos de diseño "páginas" en el orden que queremos que se muestren, de izquierda a derecha.

Cuando extiendas la clase de PagerAdapter, necesitarás implementar varios métodos clave.

Primero, tendrás que definir el tamaño de tu rango de pagina. En este caso, tenemos un conjunto de cinco páginas para mostrar. Por lo tanto, querrás que el método getCount() de la clase MyPagerAdapter devuelva un tamaño de página de 5.

A continuación, es necesario implementar el método instantiateItem() para inflar el archivo de recursos de diseño apropiado, dependiendo de la posición de deslizamiento del usuario. La página más lejana a la izquierda está en la posición 0, la siguiente a la derecha es la posición 1, y así sucesivamente. El método instantiateItem() utiliza el servicio LayoutInflater para inflar el diseño específico y añadirlo a la colección utilizada por el ViewPager.

Esta imagen muestra los cinco archivos de recursos de diseño diferentes y sus "posiciones" en términos de orden de pagina:

El último método importante que hay que implementar es el método destroyItem(), que elimina el diseño específico de la colección que utiliza el ViewPager cuando ya no se está mostrando.

He aquí una implementación básica para un adaptador de buscapersonas horizontal de cinco páginas, llamado MyPagerAdapter, que implementa estos métodos básicos así como algunos otros:

1

private class MyPagerAdapter extends PagerAdapter {

2

3

        public int getCount() {

4

            return 5;

5

        }

6

7

        public Object instantiateItem(View collection, int position) {

8

9

            LayoutInflater inflater = (LayoutInflater) collection.getContext()

10

                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

11

12

            int resId = 0;

13

            switch (position) {

14

            case 0:

15

                resId = R.layout.farleft;

16

                break;

17

            case 1:

18

                resId = R.layout.left;

19

                break;

20

            case 2:

21

                resId = R.layout.middle;

22

                break;

23

            case 3:

24

                resId = R.layout.right;

25

                break;

26

            case 4:

27

                resId = R.layout.farright;

28

                break;

29

            }

30

31

            View view = inflater.inflate(resId, null);

32

33

            ((ViewPager) collection).addView(view, 0);

34

35

            return view;

36

        }

37

38

        @Override

39

        public void destroyItem(View arg0, int arg1, Object arg2) {

40

            ((ViewPager) arg0).removeView((View) arg2);

41

42

        }

43

44

45

        @Override

46

        public boolean isViewFromObject(View arg0, Object arg1) {

47

            return arg0 == ((View) arg1);

48

49

        }

50

51

        @Override

52

        public Parcelable saveState() {

53

            return null;

54

        }

55

}

Paso 5: Vincular el adaptador de MyPager

Por último, es necesario actualizar el método onCreate() de la clase de actividad para vincular el adaptador de MyPager al control ViewPager definido en el archivo de recursos de diseño main.xml.

También puedes tomarte este tiempo para establecer la posición inicial del localizador. Por defecto, comenzarías en la posición 0 (la disposición del extremo izquierdo con el simple control del botón). Sin embargo, queremos permitir que el usuario pase a la izquierda y a la derecha, así que fijamos la posición inicial del ViewPager en el diseño del medio (el mono en el medio) usando el método setCurrentItem().

1

@Override

2

public void onCreate(Bundle savedInstanceState) {

3

    super.onCreate(savedInstanceState);

4

    setContentView(R.layout.main);

5

6

    MyPagerAdapter adapter = new MyPagerAdapter();

7

    ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);

8

    myPager.setAdapter(adapter);

9

    myPager.setCurrentItem(2);

10

}

Ahora, si ejecutas tu aplicación, comenzarás con el mono en la página central, y podrás pasar dos páginas a la izquierda o a la derecha, como se muestra aquí:

Conclusión

El control de la interfaz de usuario del buscapersonas de vista horizontal es un control de la interfaz de usuario ordenado que se pone a disposición de los desarrolladores de Android a través del paquete de compatibilidad con Android. Los datos de las "páginas" individuales son administrados por un adaptador de datos especial llamado PagerAdapter. También hay clases dentro de la biblioteca de compatibilidad para construir adaptadores de datos compatibles con los fragmentos para manejar los controles de ViewPager.