final Spinner cmbOpciones = (Spinner)findViewById(R.id.CmbOpciones);
adaptador.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
cmbOpciones.setAdapter(adaptador);
Comenzamos como siempre por obtener una referencia al control a través de su ID. Y en la última línea asignamos el adaptador al control mediante el método setAdapter(). La segunda linea como ya se sabe le pasamos uno de los parámetros ID del layout que tan sólo se aplicará al elemento seleccionado en la lista, es decir, al que se muestra directamente sobre el propio control cuando no está desplegado. Sin embargo, antes indicamos que el funcionamiento normal del control Spinner incluye entre otras cosas mostrar una lista emergente con todas las opciones disponibles. Pues bien, para personalizar también el aspecto de cada elemento en dicha lista emergente tenemos el método setDropDownViewResource(ID_layout), al que podemos pasar otro ID de un layout distinto al primero sobre el que se mostrarán los elementos de la lista emergente. En este caso hemos utilizado otro layout predefinido en Android para las listas desplegables (android.R.layout.simple_spinner_dropdown_item).
Con estas simples lineas de código conseguiremos mostrar un control como el que vemos en las siguientes imágenes:
Como se puede observar en las imágenes, la representación del elemento seleccionado (primera imagen) y el de las opciones disponibles (segunda imagen) es distinto, incluyendo el segundo de ellos incluso algún elemento gráfico a la derecha para mostrar el estado de cada opción. Como hemos comentado, esto es debido a la utilización de dos layouts diferentes para uno y otros elementos.
En cuanto a los eventos lanzados por el control
Spinner, el más comunmente utilizado será el generado al seleccionarse una opción de la lista desplegable, onItemSelected. Para capturar este evento se procederá de forma similar a lo ya visto para otros controles anteriormente, asignadole su controlador mediante el método
setOnItemSelectedListener():
cmbOpciones.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> parent,
android.view.View v, int position, long id) {
lblMensaje.setText("Seleccionado: " + datos[position]);
}
public void onNothingSelected(AdapterView<?> parent) {
lblMensaje.setText("");
}
});
Para este evento definimos dos métodos, el primero de ellos (onItemSelected) que será llamado cada vez que se selecciones una opción en la lista desplegable, y el segundo (onNothingSelected) que se llamará cuando no haya ninguna opción seleccionada (esto puede ocurrir por ejemplo si el adaptador no tiene datos).
El control ListView muestra al usuario una lista de opciones seleccionables directamente sobre el propio control, sin listas emergentes como en el caso del control Spinner. En caso de existir más opciones de las que se pueden mostrar sobre el control se podrá por supuesto hacer scroll sobre la lista para acceder al resto de elementos.
Para empezar, veamos como podemos añadir un control ListView a nuestra interfaz de usuario:
<ListView android:id="@+id/LstOpciones"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Una vez más, podremos modificar el aspecto del control utilizando las propiedades de fuente y color ya comentadas. Por su parte, para enlazar los datos con el control podemos utlizar por ejemplo el mismo código que para el control Spinner. Definiremos primero un array con nuestros datos de prueba, crearemos posteriormente el adaptador de tipo ArrayAdapter y lo asignaremos finalmente al control mediante el método setAdapter():
final String[] datos =
new String[]{"Elem1","Elem2","Elem3","Elem4","Elem5"};
ArrayAdapter<String> adaptador =
new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, datos);
ListView lstOpciones = (ListView)findViewById(R.id.LstOpciones);
lstOpciones.setAdapter(adaptador);
En este caso, para mostrar los datos de cada elemento hemos utilizado otro layout genérico de Android para los controles de tipo ListView (android.R.layout.simple_list_item_1), formado únicamente por un TextView con unas dimensiones determinadas. La lista creada quedaría como se muestra en la imagen siguiente:
Como podéis comprobar el uso básico del control ListView es completamente análogo al ya comentado para el control Spinner.
Si quisiéramos realizar cualquier acción al pulsarse sobre un elemento de la lista creada tendremos que implementar el evento onItemClick. Veamos cómo con un ejemplo:
lstOpciones.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> a, View v, int position, long id) {
//Acciones necesarias al hacer click
}
});
Hasta aquí todo sencillo. Pero, ¿y si necesitamos mostrar datos más complejos en la lista? ¿qué ocurre si necesitamos que cada elemento de la lista esté formado a su vez por varios elementos? Pues vamos a provechar los ListView para conseguirlo, aunque todo lo que comentaré es extensible a otros controles de selección.
Para no complicar mucho el tema vamos a hacer que cada elemento de la lista muestre por ejemplo dos líneas de texto a modo de título y subtítulo con formatos diferentes (por supuesto se podrían añadir muchos más elementos, por ejemplo imágenes, checkboxes, etc).
En primer lugar vamos a crear una nueva clase java para contener nuestros datos de prueba. Vamos a llamarla Titular y tan sólo va a contener dos atributos, título y subtítulo.
package net.sgoliver;
public class Titular
{
private String titulo;
private String subtitulo;
public Titular(String tit, String sub){
titulo = tit;
subtitulo = sub;
}
public String getTitulo(){
return titulo;
}
public String getSubtitulo(){
return subtitulo;
}
}
En cada elemento de la lista queremos mostrar ambos datos, por lo que el siguiente paso será crear un layout XML con la estructura que deseemos. En mi caso voy a mostrarlos en dos etiquetas de texto (TextView), la primera de ellas en negrita y con un tamaño de letra un poco mayor. Llamaremos a este layout “listitem_titular.xml“:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="@+id/LblTitulo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="20px" />
<TextView android:id="@+id/LblSubTitulo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="normal"
android:textSize="12px" />
</LinearLayout>
Ahora que ya tenemos creados tanto el soporte para nuestros datos como el layout que necesitamos para visualizarlos, lo siguiente que debemos hacer será indicarle al adaptador cómo debe utilizar ambas cosas para generar nuestra interfaz de usuario final. Para ello vamos a crear nuestro propio adaptador extendiendo de la clase ArrayAdapter.
class AdaptadorTitulares extends ArrayAdapter {
Activity context;
AdaptadorTitulares(Activity context) {
super(context, R.layout.listitem_titular, datos);
this.context = context;
}
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View item = inflater.inflate(R.layout.listitem_titular, null);
TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo);
lblTitulo.setText(datos[position].getTitulo());
TextView lblSubtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
lblSubtitulo.setText(datos[position].getSubtitulo());
return(item);
}
}
Analicemos el código anterior. Lo primero que encontramos es el constructor para nuestro adaptador, al que sólo pasaremos el contexto (que será la actividad desde la que se crea el adaptador). En este constructor tan sólo guardaremos el contexto para nuestro uso posterior y llamaremos al constructor padre tal como ya vimos al principio de este artículo, pasándole el ID del layout que queremos utilizar (en nuestro caso el nuevo que hemos creado, “listitem_titular”) y el array que contiene los datos a mostrar.
Posteriormente, redefinimos el método encargado de generar y rellenar con nuestros datos todos los controles necesarios de la interfaz gráfica de cada elemento de la lista. Este método es getView().
El método getView() se llamará cada vez que haya que mostrar un elemento de la lista. Lo primero que debe hacer es “inflar” el layout XML que hemos creado. Esto consiste en consultar el XML de nuestro layout y crear e inicializar la estructura de objetos java equivalente. Para ello, crearemos un nuevo objeto LayoutInflater y generaremos la estructura de objetos mediante su método inflate(id_layout).
Tras esto, tan sólo tendremos que obtener la referencia a cada una de nuestras etiquetas como siempre lo hemos hecho y asignar su texto correspondiente según los datos de nuestro array y la posición del elemento actual (parámetro position del método getView()).
Una vez tenemos definido el comportamiento de nuestro adaptador la forma de proceder en la actividad principal será análoga a lo ya comentado, definiremos el array de datos de prueba, crearemos el adaptador y lo asignaremos al control mediante setAdapter():
private Titular[] datos =
new Titular[]{
new Titular("Título 1", "Subtítulo largo 1"),
new Titular("Título 2", "Subtítulo largo 2"),
new Titular("Título 3", "Subtítulo largo 3"),
new Titular("Título 4", "Subtítulo largo 4"),
new Titular("Título 5", "Subtítulo largo 5")};
//...
//...
AdaptadorTitulares adaptador =
new AdaptadorTitulares(this);
ListView lstOpciones = (ListView)findViewById(R.id.LstOpciones);
lstOpciones.setAdapter(adaptador);
Hecho esto, y si todo ha ido bien, nuestra nueva lista debería quedar como vemos en la imagen siguiente:
Aunque ya sabemos utilizar y personalizar las listas en Android, en el próximo artículo daremos algunas indicaciones para utilizar de una forma mucho más eficiente los controles de este tipo, algo que los usuarios de nuestra aplicación agradecerán enormemente al mejorarse la respuesta de la aplicación y reducirse el consumo de batería.
Cuando comentamos cómo crear nuestro propio adaptador, extendiendo de ArrayAdapter, para personalizar la forma en que nuestros datos se iban a mostrar en la lista escribimos el siguiente código:
class AdaptadorTitulares extends ArrayAdapter {
Activity context;
AdaptadorTitulares(Activity context) {
super(context, R.layout.listitem_titular, datos);
this.context = context;
}
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View item = inflater.inflate(R.layout.listitem_titular, null);
TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo);
lblTitulo.setText(datos[position].getTitulo());
TextView lblSubtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
lblSubtitulo.setText(datos[position].getSubtitulo());
return(item);
}
}
Centrándonos en la definición del método getView() vimos que la forma normal de proceder consistía en primer lugar en “inflar” nuestro layout XML personalizado para crear todos los objetos correspondientes (con la estructura descrita en el XML) y posteriormente acceder a dichos objetos para modificar sus propiedades. Sin embargo, hay que tener en cuenta que esto se hace todas y cada una de las veces que se necesita mostrar un elemento de la lista en pantalla, se haya mostrado ya o no con anterioridad, ya que Android no “guarda” los elementos de la lista que desaparecen de pantalla (por ejemplo al hacer scroll sobre la lista). El efecto de esto es obvio, dependiendo del tamaño de la lista y sobre todo de la complejidad del layout que hayamos definido esto puede suponer la creación y destrucción de cantidades ingentes de objetos (que puede que ni siquiera nos sean necesarios), es decir, que la acción de inflar un layout XML puede ser bastante costosa, lo que podría aumentar mucho, y sin necesidad, el uso de CPU, de memoria, y de batería.
Para aliviar este problema, Android nos propone un método que permite reutilizar algún layout que ya hayamos inflado con anterioridad y que ya no nos haga falta por algún motivo, por ejemplo porque el elemento correspondiente de la lista ha desaparecido de la pantalla al hacer scroll. De esta forma evitamos todo el trabajo de crear y estructurar todos los objetos asociados al layout, por lo que tan sólo nos quedaría obtener la referencia a ellos mediante findViewById() y modificar sus propiedades.
¿Pero cómo podemos reutilizar estos layouts “obsoletos”? Pues es bien sencillo, siempre que exista algún layout que pueda ser reutilizado éste se va a recibir a través del parámetro convertView del método getView(). De esta forma, en los casos en que éste no sea null podremos obviar el trabajo de inflar el layout. Veamos cómo quedaría el métod getView() tras esta optimización:
public View getView(int position, View convertView, ViewGroup parent)
{
View item = convertView;
if(item == null)
{
LayoutInflater inflater = context.getLayoutInflater();
item = inflater.inflate(R.layout.listitem_titular, null);
}
TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo);
lblTitulo.setText(datos[position].getTitulo());
TextView lblSubtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
lblSubtitulo.setText(datos[position].getSubtitulo());
return(item);
}
Si añadimos más elementos a la lista y ejecutamos ahora la aplicación podemos comprobar que al hacer scroll sobre la lista todo sigue funcionando con normalidad, con la diferencia de que le estamos ahorrando gran cantidad de trabajo a la CPU.
Pero vamos a ir un poco más allá. Con la optimización que acabamos de implementar conseguimos ahorrarnos el trabajo de inflar el layout definido cada vez que se muestra un nuevo elemento. Pero aún hay otras dos llamadas relativamente costosas que se siguen ejecutando en todas las llamadas. Me refiero a la obtención de la referencia a cada uno de los objetos a modificar mediante el método findViewById(). La búsqueda por ID de un control determinado dentro del árbol de objetos de un layout también puede ser una tarea costosa dependiendo de la complejidad del propio layout.¿Por qué no aprovechamos que estamos “guardando” un layout anterior para guardar también la referencia a los controles que lo forman de forma que no tengamos que volver a buscarlos? Pues eso es exactamente lo que vamos a hacer mediante lo que en los ejemplos de Android llaman un ViewHolder. La clase ViewHolder tan sólo va a contener una referencia a cada uno de los controles que tengamos que manipular de nuestro layout, en nuestro caso las dos etiquetas de texto. Definamos por tanto esta clase de la siguiente forma:
static class ViewHolder {
TextView titulo;
TextView subtitulo;
}
La idea será por tanto crear e inicializar el objeto ViewHolder la primera vez que inflemos un elemento de la lista y asociarlo a dicho elemento de forma que posteriormente podamos recuperarlo fácilmente. ¿Pero dónde lo guardamos? Fácil, en Android todos los controles tienen una propiedad llamada Tag (podemos asignarla y recuperarla mediante los métodos setTag() y getTag() respectivamente) que puede contener cualquier tipo de objeto, por lo que resulta ideal para guardar nuestro objeto ViewHolder. De esta forma, cuando el parámetro convertView llegue informado sabremos que también tendremos disponibles las referencias a sus controles hijos a través de la propiedad Tag. Veamos el código modificado de getView() para aprovechar esta nueva optimización:
public View getView(int position, View convertView, ViewGroup parent)
{
View item = convertView;
ViewHolder holder;
if(item == null)
{
LayoutInflater inflater = context.getLayoutInflater();
item = inflater.inflate(R.layout.listitem_titular, null);
holder = new ViewHolder();
holder.titulo = (TextView)item.findViewById(R.id.LblTitulo);
holder.subtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
item.setTag(holder);
}
else
{
holder = (ViewHolder)item.getTag();
}
holder.titulo.setText(datos[position].getTitulo());
holder.subtitulo.setText(datos[position].getSubtitulo());
return(item);
}
Con estas dos optimizaciones hemos conseguido que la aplicación sea mucho más respetuosa con los recursos del dispositivo de nuestros usuarios, algo que sin duda nos agradecerán.
El control GridView de Android presenta al usuario un conjunto de opciones seleccionables distribuidas de forma tabular, o dicho de otra forma, divididas en filas y columnas. Dada la naturaleza del control ya podéis imaginar sus propiedades más importantes, que paso a enumerar a continuación:
- android:numColumns, indica el número de columnas de la tabla o “auto_fit” si queremos que sea calculado por el propio sistema operativo a partir de las siguientes propiedades.
- android:columnWidth, indica el ancho de las columnas de la tabla.
- android:horizontalSpacing, indica el espacio horizontal entre celdas.
- android:verticalSpacing, indica el espacio vertical entre celdas.
- android:stretchMode, indica qué hacer con el espacio horizontal sobrante. Si se establece al valor “columnWidth” este espacio será absorbido a partes iguales por las columnas de la tabla. Si por el contrario se establece a “spacingWidth” será absorbido a partes iguales por los espacios entre celdas.
Veamos cómo definiríamos un
GridView de ejemplo en nuestra aplicación:
<GridView android:id="@+id/GridOpciones"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:columnWidth="80px"
android:horizontalSpacing="5px"
android:verticalSpacing="10px"
android:stretchMode="columnWidth" />
Una vez definida la interfaz de usuario, la forma de asignar los datos desde el código de la aplicación es completamente análoga a la ya comentada tanto para las listas desplegables como para las listas estáticas: creamos un array genérico que contenga nuestros datos de prueba, declaramos un adaptador de tipo ArrayAdapter pasándole en este caso un layout genérico (simple_list_item_1, compuesto por un simple TextView) y asociamos el adaptador al control GridView mediante su método setAdapter():
private String[] datos = new String[25];
//...
for(int i=1; i<=25; i++)
datos[i-1] = "Dato " + i;
ArrayAdapter<String> adaptador =
new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, datos);
final GridView grdOpciones = (GridView)findViewById(R.id.GridOpciones);
grdOpciones.setAdapter(adaptador);
Por defecto, los datos del array se añadirán al control GridView ordenados por filas, y por supuesto, si no caben todos en la pantalla se podrá hacer scroll sobre la tabla. Vemos en una imagen cómo queda nuestra aplicación de prueba:
En cuanto a los eventos disponibles, el más interesante vuelve a ser el lanzado al seleccionarse una celda determinada de la tabla: onItemSelected. Este evento podemos capturarlo de la misma forma que hacíamos con los controles Spinner y ListView. Veamos un ejemplo de cómo hacerlo:
grdOpciones.setOnItemSelectedListener(
new AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> parent,
android.view.View v, int position, long id) {
lblMensaje.setText("Seleccionado: " + datos[position]);
}
public void onNothingSelected(AdapterView<?> parent) {
lblMensaje.setText("");
}
});
sgoliver.net
