Cómo crear controles personalizables en Android (II)

Buenas, esta semana vamos a retomar el tema de crear controles personalizados para añadir más funcionalidad al control que hicimos la semana pasada.

Si os acordáis, la semana pasada creamos un control que consistía en un elemento cualquiera para una lista. Tenía un botón que al pulsarlo realizaba una acción, pero en el propio control. Esta semana veremos como trasladar estas acciones hacia el exterior del control. Concretamente veremos como añadir al control un listener que nos informarán cuando pulsamos el botón en un item.


Para ello partiremos del ejemplo de la semana pasada, abrimos el archivo ItemList.java. Este archivo se encargaba de pintar la plantilla definida en el archivo itemlist.xml y de setear el texto de la etiqueta y la imagen del botón. Dentro de este añadimos el siguiente código:


private int IdItem = 0; public void setIdItem(int idItem){ IdItem = idItem; }


Definimos una propiedad para el id del item de sólo lectura que setearemos en el momento de crear cada uno de los objetos.


public interface OnSelectItemListener{ void onSelectItem(int idItem); } private OnSelectItemListener listenerSelectItem; public void setOnSelectItemListener(OnSelectItemListener l){ listenerSelectItem = l; }


Definimos la estructura de nuestro listener el cual al ser lanzado nos devolverá el idItem que corresponda para que podamos trabajar con ese dato.


La semana pasada en el evento onClick de nuestro botón cambiabamos el texto de la etiqueta. Vamos a cambiar eso y en vez de ejecutar la instrucción lbl.setText("Cambiando texto etiqueta"); hacemos lo siguiente:


listenerSelectItem.onSelectItem(IdItem);


Con esto estamos lanzando el evento onSelectItem definido en nuestro listener, el cual recogeremos en el Activity donde estamos definiendo este control. Lo que debemos hacer ahora es ir a nuestro Activity y setear en nuestro item por un lado el idItem y lo que queremos que haga el item al pulsar en el botón.
Abrimos el archivo HolaMundoActivity.java, y nos fijamos donde teníamos el código que añadía cada uno de los items, el cual era así:


item = new ItemList(this); item.setLabelText("Texto 2"); item.setImage(R.drawable.icon); lyt.addView(item);


El cual vamos a modificar para que quede así:


item = new ItemList(this); item.setIdItem(2); item.setLabelText("Texto 2"); item.setImage(R.drawable.icon); item.setOnSelectItemListener(new OnSelectItemListener() { public void onSelectItem(int idItem) { //AÑADIMOS AQUI LO QUE VA HACER ESTE EVENTO } }); lyt.addView(item);


Vemos que aquí ahora le estamos dando valor al idItem y estamos seteando la instrucción que queremos ejecutar al hacer click en el botón. Lo bueno de hacerlo de esta forma es que así el item lo podemos utilizar para cualquier tipo de item. Es decir, si tuviéramos dos listas, una de usuarios y otra de libros, podríamos utilizar este item para ambos. En el evento de la lista de usuarios definiríamos que nos muestre los datos del usuario seleccionado y en la de libros podríamos definir que nos lleve a una pantalla donde realizar su compra.


De momento la lista se está rellenando de forma totalmente manual, pero lo ideal es que los datos con los que rellenar esta lista se lean de un origen de datos como una llamada a un servicio web o mediante una base de datos, pero eso ya lo iremos viendo más adelante.

Comments are closed.