En este tutorial, aprenderá cómo implementar un ViewPager en GridView en su aplicación de Android. Un GridView le permite mostrar imágenes en forma de cuadrícula y ViewPager le permite al usuario pasar de izquierda a derecha a través de las imágenes. Crearemos un GridView y al hacer clic en la imagen se mostrará un ViewPager que permitirá al usuario desplazarse hacia la izquierda y hacia la derecha a través de las imágenes. Vamos a empezar…

Cree un nuevo proyecto en Eclipse  File  >  New  >  Android Application Project. Complete los detalles y nombre su proyecto  ViewPagerGridView .

Nombre de la aplicación:  ViewPagerGridView

Nombre del proyecto:  ViewPagerGridView

Nombre del paquete:  com.androidbegin.viewpagergridview

Abra su  MainActivity .java  y pegue el siguiente código.

Actividad principal .java

paquete com.androidbegin.viewpagergridview;

importar android.os.Bundle;
importar android.app.Actividad;
importar android.content.Intent;
importar android.view.Menú;
importar android.widget.AdapterView;
importar android.widget.AdapterView.OnItemClickListener;
importar android.widget.GridView;
importar android.widget.Toast;
importar android.view.View;

clase pública MainActivity extiende Actividad {

    @Anular
    public void onCreate (Paquete guardadoInstanceState) {
        super.onCreate(estadoDeInstanciaGuardado);
        // Establecer título para GridView
        setTitle("GridView");
        // Obtener la vista de grid_view.xml
        setContentView(R.layout.grid_view);

        // Establecer las imágenes de ImageAdapter.java a GridView
        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(nuevo ImageAdapter(este));

        // Escuchar el clic del elemento GridView
        gridview.setOnItemClickListener(nuevo OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {

            	// Inicie ImageViewPager.java al seleccionar GridView Item
            	Intent i = new Intent(getApplicationContext(), ImageViewPager.class);

            	// Mostrar un mensaje de brindis simple para la posición del elemento
            	Toast.makeText(MainActivity.this, "" + posición, Toast.LENGTH_SHORT).show();

            	// Enviar la posición del clic a ImageViewPager.java usando la intención
            	i.putExtra("id", posición);

                // Iniciar ImageViewPager
                iniciarActividad(i);
            }
        });
    }

    // No usar el menú de opciones para este tutorial
    @Anular
    public boolean onCreateOptionsMenu(Menú menú) {
        getMenuInflater().inflate(R.menu.actividad_principal, menú);
        devolver verdadero;
    }
}

Esta actividad recupera imágenes de un adaptador de imágenes y las establece en la vista de cuadrícula y, al hacer clic en el elemento de la vista de cuadrícula, se capturará la posición y la imagen seleccionadas y pasará a una nueva actividad. Un mensaje de brindis mostrará la posición actual del elemento en el que se hizo clic.

A continuación, cree un diseño gráfico XML para su MainActivity. Vaya a  res  >  diseño  > Haga clic con el botón derecho en el  diseño  >  Nuevo  >  Archivo XML de Android

Nombre su nuevo archivo XML  grid_view.xml  y pegue el siguiente código.

grid_view .xml

<?versión xml="1.0" codificación="utf-8"?>
<GridView xmlns_android="http://schemas.android.com/apk/res/android"
    android_id="@+id/vista de cuadrícula"
    android_layout_width="fill_parent"
    android_layout_height="fill_parent"
    android: ancho de columna = "90dp"
    android_numColumns="auto_fit"
    android: espacio vertical = "10dp"
    android: espacio horizontal = "10dp"
    android_stretchMode="columnWidth"
    android_gravedad="centro"
/>

Hemos preparado algunas imágenes de muestra para este tutorial. Inserte sus imágenes de muestra descargadas en su  res  >  drawable-hdpi.

Imágenes de muestra

[etiqueta wpfilebase = ID de archivo = 25 tpl = botón de descarga /]

A continuación, cree una clase de adaptador de imagen. Vaya a  Archivo  >  Nuevo  >  Clase  y asígnele el nombre  ImageAdapter .java. Seleccione su paquete llamado  com.androidbegin. viewpagergridview  y haga clic en  Finalizar .

Abra su  ImageAdapter .java  y pegue el siguiente código.

Adaptador de imagen .java

paquete com.androidbegin.viewpagergridview;

importar android.content.Context;
importar android.view.View;
importar android.view.ViewGroup;
importar android.widget.BaseAdapter;
importar android.widget.ImageView;

clase pública ImageAdapter extiende BaseAdapter {
    Contexto privado mContexto;

    ImageAdapter público (Contexto c) {
        mContexto = c;
    }

    public int getCount() {
        devuelve mThumbIds.longitud;
    }

    objeto público getItem (posición int) {
    	devuelve mThumbIds[posición];
    }

    getItemId largo público (posición int) {
        devolver 0;
    }

    // Crear un nuevo ImageView para cada elemento al que hace referencia el adaptador
    public View getView (posición int, View convertView, ViewGroup parent) {
        Vista de imagen Vista de imagen;
        if (convertView == null) { // Si no se recicla, inicializa algunos atributos
            imageView = new ImageView(mContext);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        } más {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[posición]);
        volver imageView;
    }

    // Referencias a nuestras imágenes en res > dibujable
    entero público[] mThumbIds = {
            R.dibujable.muestra_0, R.dibujable.muestra_1,
            R.dibujable.muestra_2, R.dibujable.muestra_3,
            R.dibujable.muestra_4, R.dibujable.muestra_5,
            R.dibujable.muestra_6, R.dibujable.muestra_7,
            R.dibujable.muestra_8, R.dibujable.muestra_9,
            R.dibujable.muestra_10, R.dibujable.muestra_11,
            R.dibujable.muestra_12, R.dibujable.muestra_13,
            R.dibujable.muestra_14, R.dibujable.muestra_15,
            R.dibujable.muestra_16, R.dibujable.muestra_17,
            R.dibujable.muestra_18
    };
}

Esta clase de adaptador de imagen recupera las imágenes de la carpeta dibujable y las establece en las vistas de imagen.

A continuación, cree una clase de buscapersonas de vista de imagen. Vaya a  Archivo  >  Nuevo  >  Clase  y asígnele el nombre  ImageViewPager .java. Seleccione su paquete llamado  com.androidbegin. viewpagergridview  y haga clic en  Finalizar .

Abra su  ImageViewPager .java  y pegue el siguiente código.

ImageViewPager .java

paquete com.androidbegin.viewpagergridview;

importar java.util.ArrayList;
importar java.util.List;

importar android.app.Actividad;
importar android.content.Intent;
importar android.os.Bundle;
importar android.support.v4.view.ViewPager;
importar android.widget.ImageView;

la clase pública ImageViewPager extiende la actividad {
	// Declarar variable
	posición int;

	@Anular
	public void onCreate (Paquete guardadoInstanceState) {
		super.onCreate(estadoDeInstanciaGuardado);
		// Establecer título para el ViewPager
		setTitle("Ver Paginador");
		// Obtener la vista de view_pager.xml
		setContentView(R.layout.view_pager);

		// Recuperar datos de MainActivity en el evento de clic en el elemento
		Intención p = getIntent();
		posición = p.getExtras().getInt("id");

		ImageAdapter imageAdapter = nuevo ImageAdapter(esto);
		List<ImageView> imágenes = new ArrayList<ImageView>();

		// Recuperar todas las imágenes
		for (int i = 0; i <adaptador de imagen.getCount(); i++) {
			ImageView imageView = new ImageView(esto);
			imageView.setImageResource(imageAdapter.mThumbIds[i]);
			imageView.setScaleType(ImageView.ScaleType.CENTER);
			imágenes.add(imageView);
		}

		// Establecer las imágenes en ViewPager
		ImagePagerAdapter pageradapter = new ImagePagerAdapter(imágenes);
		ViewPager viewpager = (ViewPager) findViewById(R.id.pager);
		viewpager.setAdapter(pageradapter);
		// Mostrar imágenes siguiendo la posición
		viewpager.setCurrentItem(posición);
	}
}

Esta clase recupera todas las imágenes del adaptador de imágenes utilizando la intención y pasa la imagen seleccionada actual a una vista de imagen.

A continuación, cree una clase de buscapersonas de vista de imagen. Vaya a  Archivo  >  Nuevo  >  Clase  y asígnele el nombre  ImagePagerAdapter .java. Seleccione su paquete llamado  com.androidbegin. viewpagergridview  y haga clic en  Finalizar .

Abra su  ImagePagerAdapter .java  y pegue el siguiente código.

ImagePagerAdapter .java

paquete com.androidbegin.viewpagergridview;

importar java.util.List;

importar android.support.v4.view.PagerAdapter;
importar android.view.View;
importar android.view.ViewGroup;
importar android.widget.ImageView;

clase pública ImagePagerAdapter extiende PagerAdapter {

    lista privada<ImageView> imágenes;

    ImagePagerAdapter público (Lista de imágenes <ImageView>) {
        this.images = imágenes;
    }

    @Anular
    public Object instantiateItem (contenedor ViewGroup, posición int) {
        ImageView imageView = imágenes.get(posición);
        contenedor.addView(imageView);
        volver imageView;
    }

    @Anular
    public void destroyItem (contenedor ViewGroup, posición int, objeto Object) {
        contenedor.removeView(imágenes.get(posición));
    }

    @Anular
    public int getCount() {
        devolver imágenes.tamaño();
    }

    @Anular
    public boolean isViewFromObject(Ver vista, Objeto o) {
        regresar vista == o;
    }
}

Esta clase ayuda a eliminar e insertar imágenes en la vista de imagen mientras se voltea el visor hacia la izquierda o hacia la derecha.

A continuación, cree un diseño gráfico XML para su visor. Vaya a  res  >  diseño  > Haga clic con el botón derecho en el  diseño  >  Nuevo  >  Archivo XML de Android

Nombre su nuevo archivo XML  view_pager.xml  y pegue el siguiente código.

ver_paginador .xml

<?versión xml="1.0" codificación="utf-8"?>
<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_herramientas="http://esquemas.android.com/herramientas"
    android_layout_width="match_parent"
    android_layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android_id="@+id/localizador"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content" >
    </android.support.v4.view.ViewPager>

</RelativeLayout>

A continuación, cambie el nombre y los textos de la aplicación. Abra su  strings.xml  en su carpeta  res > valores  y pegue el siguiente código.

cadenas.xml

<recursos>

    <string name="app_name">ViewPager GridView</string>
    <string name="hello_world">¡Hola mundo!</string>
    <string name="menu_settings">Configuración</string>
    <string name="title_activity_main">ViewPager GridView</string>

</recursos>

En su  AndroidManifest.xml , debemos declarar una actividad. Abra su  AndroidManifest.xml  y pegue el siguiente código.

AndroidManifest.xml

<manifiesto xmlns_android="http://schemas.android.com/apk/res/android"
    paquete="com.androidbegin.viewpagergridview"
    android_versionCode="1"
    android_versionName="1.0" >

    <usos-sdk
        android_minSdkVersion="8"
        android_targetSdkVersion="15" />

    <aplicación
        android_icono="@dibujable/ic_launcher"
        android_etiqueta="@cadena/nombre_aplicación"
        android_tema="@estilo/AppTheme" >
        <actividad
            android_nombre=".Actividad principal"
            android_label="@cadena/título_actividad_principal" >
            <intent-filter>
                <acción android_name="android.intent.action.MAIN" />

                <categoría android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </actividad>
        <actividad android_name=".ImageViewPager" >
        </actividad>
    </aplicación>

</manifiesto>

Producción:

Código fuente

[purchase_link id=”7957″ text=”Comprar para descargar el código fuente” style=”button” color=”green”]