17.11.11

Tutorial Android parte 9: Utilizando un GridView en Android

Este tutorial está basado en el tutorial "Hello, views" de la documentación de Android SDK.

http://developer.android.com/resources/tutorials/views/hello-gridview.html

Seguimos viendo más cosas sobre las vistas en Android. Este tutorial va a ser un poco más complicado que los anteriores.

Lo cual hace que mole mucho más.

Los gridviews son un tipo de layout en el que los elementos se colocan dentro de una cuadrícula de dos dimensiones por la que se puede navegar con los scroles verticales y horizontales.

En este ejemplo vamos a modificar el archivo xml de la vista de una aplicación y vamos a colocar un grupo de imágenes en las casillas de un gridview.

El código fuente de este tutorial podéis encontrarlo en la siguiente dirección:

https://sites.google.com/site/libreyextremo/codigo-fuente-tutorial-aprender-android-parte-9

Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:

- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloGridLayout
Build target: (El que queráis, yo en este caso he marcado...) Android 1.5
Application name: Hello, GridLayout!
Package name: com.example.hellogridlayout
Create Activity: HelloGridLayout

- Hacer click en Finish.

Ahora vamos a añadir el conjunto de imágenes a la carpeta res/drawable.

Podéis coger las imágenes que queráis o las que vienen en el tutorial en la web de Android SDK.

http://developer.android.com/shareables/sample_images.zip

Para copiar las imágenes en el directorio res/drawable, descomprimirlas en cualquier carpeta. Y después ir a Eclipse buscar la carpeta res/drawable, pulsar con el botón derecho sobre ella, seleccionar Import, File System y seleccionar las imágenes de la carpeta donde las descomprimisteis para agregarlas al proyecto.

Cambiar el contenido del fichero res/layout/main.xml por el código que viene en el tutorial:

       

 
       
     
        

Ahora vamos a abrir el fichero HelloGridLayout.java y vamos a modificar el código del evento OnCreate().

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(HelloGridLayout.this, "" + position, Toast.LENGTH_SHORT).show();
}}
);
}

También hay que agregar los siguientes imports:

import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.Toast;

Va a seguir dando error porque no encuentra la clase ImageAdapter. Y no la encuentra porque la vamos a crear ahora.

El código asigna al GridView un adaptador que crearemos a continuación (ImageAdapter) y que se encargará de obtener todas las imágenes que cargaremos en el GridView.
El código también define para el GridView un evento y un listener que capturará los clicks que el usuario realice en uno de los elementos del gridview.

Vamos a crear la clase ImageAdapter. Para ello:

- Pinchar con el botón derecho en el proyecto HelloGridLayout,
- seleccionar New -> Class.
- Poner los siguientes valores:

Source folder: HelloGridLayout/src
Package: com.example.hellogridlayout
Name: ImageAdapter

Y escribimos el siguiente código en esta clase:


package com.example.hellogridlayout;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

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;
}

// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {  // if it's not recycled, initialize some attributes
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;
}

// references to our images
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
};
}

Os dejo como ejercicio que analiceis el código del adaptador y veáis cómo se cargan las imágenes.

Y ya podemos ejecutar el programa (menú Run -> Run).


Si pulsáis en las imágenes, aparecerá un mensaje con la posición de la imagen.


Nada más. Espero que hayáis disfrutado con este tutorial.

5 comments:

  1. Creo que te equivocas en el titulo, dices que usas GridLayout pero en verdad usas GridView.

    ReplyDelete
  2. Buenas, cómo puedes hacer que se cambie la imagen por otra cuando la pulsas?? gracias!

    ReplyDelete
  3. La misma pregunta como cambiar la imagen al pulsarla en el gridview


    Saludos

    ReplyDelete
  4. Hola. Yo estoy usando el mismo ejemplo, pero lo hago en un fragment que llamo desde mi NavigationDrawer, el problema que tengo es que al hacer:
    gridview.setAdapter(new ImageAdapter(this));
    no tengo el context

    Alguna sugerencia.
    Salu2

    ReplyDelete