Búsqueda personalizada

Blog personal para aprender a programar en Android desde cero.

jueves, 4 de marzo de 2010

Hello Views IV

GridView

Un GridView también es un ViewGroup, que muestra sus hijos en una grid scrollable de manera bidimensional. A diferencia de las otras vistas, los elementos no se van añadiendo en el main.xml, sino que lo hacen a través de un ListAdapter.

En el ejemplo de AndroidLabs nos enseñan a crear una GridView con imágenes en miniatura. Los pasos que tenemos que seguir, y que luego explicaré, son los siguientes:

  1. Crear el proyecto con Eclipse indicando la Activity HelloGridView.
  2. Copiar las imágenes que queremos visualizar en res/drawable (las del ejemplo son estas
  3. Crear o copiar el contenido del fichero main.xml
  4. Crear y copiar el contenido de la clase ImageAdapter, que hereda de la clase BaseAdapter
  5. Copiar el siguiente texto en el método onCreate de la Activity:
              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();
                    }
            });

En este caso lo más importante no es el main.xml, pero que también voy a comentar:

  • android:columnWidth: ancho de la columna
  • android:numColumns: número de columnas. (auto-fit, se ajusta automáticamente)
  • android:verticalSpacing: separación vertical entre elementos
  • android:horizontalSpacing: separación horizontal entre elementos
  • android:stretchMode: forma de estirar el contenido. columnWidth, a lo ancho de la columna 


La 'chicha' empieza en el método onCreate de la Activity:

GridView gridview = (GridView) findViewById(R.id.gridview); 
gridview.setAdapter(new ImageAdapter(this));

Obtenemos el id de nuestra vista, la grid. Hemos indicado ese id en el fichero main.xml, cuando hemos creado el GridView.

gridview.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView parent, View v, int position, long id) {
  Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
}
});

Añadimos un Listener para cuando hacemos click en el item, una imagen. Al pulsar mostramos un Toast (especie de popup) en el que vemos la posicion de la imagen.

Por último encontramos la clase ImageAdapter, que hereda de la clase BaseAdapter. El método importante es getView(). Este método esta sobreescribiendo al método de la clase Adapter, de la que hereda BaseAdapter, y es llamado cada vez que se va a pintar un elemento de la GridView. En nuestro caso carga las imágenes que hemos descargado antes, y en el orden que le indicamos en el array mThumbIds.

Dudas 
Creo que el parámetro convertView viene a null la primera vez que cargamos la GridView, pero en las siguientes llamadas nos viene ya la ImageView. Por eso comprobamos si viene a null o no. ¿Me equivoco?

2 comentarios:

  1. ¿puedes colgar el código? es que no me funciona, me da un fallo.
    saludos y gracias por el tutorial

    ResponderEliminar
  2. a mi el gridview no me muestra las imagenes y he investigado MUCHOS enlaces y me guio por
    el mismo codigo y naa que ver, ya no se que mas hacer...

    ResponderEliminar