GridView
Un GridView es un tipo de layout (diseño) que nos muestra una serie de elementos en forma de tabla y que podemos deslizar verticalmente. El GridView mostrará una cuadrícula de vistas, cada una de ellas puede representar diversos elementos. Estas vistas se mostrarán en forma de cuadrícula, automáticamente scrolleable arriba y abajo.
Para definir un GridView se requieren cuatro elementos. Para empezar, deberemos introducir el GridView en un layout para mostrarlo al usuario. En segundo lugar, necesitaremos una actividad que lo muestre y lo controle. Esta actividad también será la que recibirá los eventos que el GridView genere. En tercer lugar, precisaremos un adaptador, definido en otra clase, que rellene cada elemento del GridView, introduciendo la información necesaria en cada uno. Por último, necesitaremos un layout para los ítems del GridView. El adaptador utilizará este diseño y lo modificará con la información de cada elemento.
El uso de un GridView es muy parecido al de un ListView. Puedes encontrar información sobre el uso de ListView en androidcurso.como en el tercer capítulo de El gran libro de Android.
Ejercicio paso a paso: Primera versión de Audiolibros
con un GridView.
En este ejercicio crearemos una aplicación simple con un GridView como única vista. Este GridView mostrará una lista de libros, permitiendo al usuario seleccionar uno de ellos.
1. Crea un nuevo proyecto con los siguientes datos:
Application Name: Audiolibros
Project Name: Audiolibrosv1
Package name: com.example.audiolibros
Minimum Required SDK: API 4 (1.6)
Target SDK: API 17 (4.2)
Compile With: API 17 (4.2)
Utiliza los valores por defecto en el resto de los campos.
2. Para empezar, necesitaremos definir un GridView en el layout a mostrar. Modificares/layout/activity_main.xml para que contenga el siguiente código:
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="120dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:gravity="top"
/>
Como puedes ver, el layout contiene solo un elemento: el GridView. Veamos qué significan los atributos indicados.
En el primero, android:columnWidth, estamos indicando al GridView el ancho de las columnas; esta propiedad va emparejada con la siguiente, android:numColumns, que indica la cantidad de columnas a mostrar. Para estas propiedades tenemos dos posibilidades: dar un ancho fijo para cada columna y dejar que el sistema ajuste la cantidad de columnas, o indicar la cantidad de columnas y dejar al sistema el ancho de estas. Las siguientes dos propiedades indican el margen a dejar entre elementos.
3. Ahora modifica la clase principal (MainActivity) para que contenga el siguientecódigo:
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridview = (GridView)
findViewById(R.id.gridview);
gridview.setAdapter(new SelectorAdapter(this));
gridview.setOnItemClickListener(newOnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Toast.makeText(MainActivity.this, "Seleccionado el elemento: "
+ position, Toast.LENGTH_SHORT).show();
}
});
}
}
Nota:Tras incluir nuevas clases tendrás que indicar los inputs adecuados. Para que Eclipse lo haga automáticamente pulsa «Ctrl+Shift+O».
En esta clase, lo único que hacemos es mostrar el XML que contiene el GridView, le asignamos el adaptador que tiene que utilizar y crearemos un escuchador de eventos, para que cuando se pulse sobre un elemento muestre en una notificación toast el elemento que se ha pulsado.
4. El siguiente paso será crear la clase SelectorAdapter, que se encargará de rellenar el GridView. Crea esta clase con el siguiente código:
Articulo en construcción....
Preguntas de repaso: GridView.