Vistas de tipo cuadrícula

Una vista de tipo GridView es una vista de grupo que muestra sus elementos distribuidos en una cuadrícula permitiendo desplazamiento de pantalla. Los elementos se pueden añadir automáticamente a la plantilla usando un adaptador de tipo ListAdapter.

Ejemplo.

En el siguiente ejemplo vamos a visualizar un número determinado de imágenes que distribuiremos a modo de cuadrícula. Además, cuando el usuario pulse sobre una imagen, mostraremos un mensaje emergente al usuario indicando su posición:

1. Creamos un nuevo proyecto HelloGridView.
2. Descargamos las imágenes de ejemplo y las guardamos dentro de la carpeta res/drawable/.
3. Abrimos el archivo res/layout/main.xml y sustituimos su contenido por el siguiente:
   

   <?xml version="1.0" encoding="utf-8"?>
   <GridView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/gridview"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:columnWidth="90dp"
       android:numColumns="auto_fit"
       android:verticalSpacing="10dp"
       android:horizontalSpacing="10dp"
       android:stretchMode="columnWidth"
       android:gravity="center"
   />
   

   Ajustamos el tamaño de la vista GridView a la pantalla.
   
4. Actualizamos el archivo HelloGridView.java con el código siguiente:
   

   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
   
       GridView gridview = (GridView) findViewById(R.id.gridview);
       gridview.setAdapter(new ImageAdapter(this));
   
       gridview.setOnItemClickListener(new OnItemClickListener() {
           public void onItemClick(AdapterView parent, View v, int position, long id) {
               Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
           }
       });
   }
   

   Donde asociamos la plantilla main.xml a la actividad y obtenemos su vista GridView utilizando el método findViewById(int). Posteriormente a la vista le asociamos un adaptador de tipo ImageAdapter con el método setAdapter() con el que mostraremos las imágenes en la cuadrícula a partir de la fuente de datos.
   
   Además, cada vez que el usuario pulse sobre una imagen, mostraremos un mensaje emergente con la posición que ésta ocupa. Para ello, nos suscribimos al evento asociado con el método setOnItemClickListener(), al que tendremos que pasar como argumento una implementación de la interfaz AdapterView.OnItemClickListener. Esta interfaz define un único método llamado onItemClick() en el que utilizaremos un objeto de tipo Toast para mostrar dicho mensaje.
   
5. Creamos nuestro adaptador ImageAdapter a partir de la clase BaseAdapter:
   

   public class ImageAdapter extends BaseAdapter {
       private Context mContext;
   
       public ImageAdapter(Context c) {
           mContext = c;
       }
   
       public int getCount() {
           return mThumbIds.length;
       }
   
       public Object getItem(int position) {
           return null;
       }
   
       public long getItemId(int position) {
           return 0;
       }
   
       // Creamos la vista ImageView para cada posición del la cuadrícula.
       public View getView(int position, View convertView, ViewGroup parent) {
           ImageView imageView;
           if (convertView == null) {  // Si la imagen es nueva.
               imageView = new ImageView(mContext);
               imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
               imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
               imageView.setPadding(8, 8, 8, 8);
           } else {
               imageView = (ImageView) convertView;
           }
   
           imageView.setImageResource(mThumbIds[position]);
           return imageView;
       }
   
       // Referencias a los recursos de tipo imagen.
       private Integer[] mThumbIds = {
               R.drawable.sample_2, R.drawable.sample_3,
               R.drawable.sample_4, R.drawable.sample_5,
               R.drawable.sample_6, R.drawable.sample_7,
               R.drawable.sample_0, R.drawable.sample_1,
               R.drawable.sample_2, R.drawable.sample_3,
               R.drawable.sample_4, R.drawable.sample_5,
               R.drawable.sample_6, R.drawable.sample_7,
               R.drawable.sample_0, R.drawable.sample_1,
               R.drawable.sample_2, R.drawable.sample_3,
               R.drawable.sample_4, R.drawable.sample_5,
               R.drawable.sample_6, R.drawable.sample_7
       };
   }
   

   Sobreescribimos los métodos necesarios de la clase BaseAdapter. El constructor getCount() devolverá el número total de imágenes. Normalmente, el método getItem(int) debería devolver un objeto a partir de una posición específica pero para nuestro ejemplo esto no será necesario.
   
   El primer método que necesitamos implementar es getView. Este método seré el encargado de crear y devolver la vista (ImageView) para cada una de las imágenes que serán mostradas en la plantilla. El método comprueba si la imagen (argumento covertView) se había creado con anterioridad y en caso contrario, la crea y le asigna sus propiedades:
   
   • setLayoutParams(ViewGroup.LayoutParams). Definimos el ancho y el alto para cada imagen. No nos tendremos que preocupar por el tamaño original de las imágenes ya que sus tamaños serán ajustados y recortados a las dimensiones especificadas.
   • setScaleType(ImageView.SacaleType). Especificamos que el recorte de las imágenes se haga tomando como referencia su centro.
   • setPadding(int, int, int, int). Especificamos el relleno.
   
   Si el argumento covertView ya existía de antes, lo reutilizamos.
   Al final del proceso, utilizamos el argumento position para asociar el recurso de imagen con la vista de tipo ImageView.
   
6. Por último, ejecutamos la aplicación.