Crear listas personalizadas en Android Introducción Bienvenidos a la sección de programación Android, hoy voy a explicar cómo crear listas personalizadas en Android. Las listas en Android son elementos que nos permiten desplegar colecciones de información ordenadamente como un grupo de datos relacionados, resultados y alguno que otro menú de interacción. La lista básica por defecto en Android es como se muestra en la Figura 1. Figura 1. Lista básica en Android Por otra parte las listas personalizadas nos permiten mostrar algo más que solo un texto, estas listas permiten desplegar más información ya que un ítem de la lista se convierte en una vista en XML a la que se le pueden agregar diferentes controles como parte de su personalización, controles que a su misma vez pueden ser diferentes, un ejemplo se muestra en la Figura 2.
ImageView TextView TextView TextView Figura 2. Controles dentro de una lista personalizada Elementos necesarios Los elementos básicos que necesitamos para construir una lista personalizada son los siguientes: 1. Una vista XML con todos los elementos de un ítem. Componentes base de un ítem de la lista personalizada. 2. Clase que extienda (herede) de la clase BaseAdapter. Clase que nos ayudará a construir la vista personalizada. 3. Clase de titular. Contiene las propiedades en base a un ítem. Crear la lista personalizada Como principal punto creamos un proyecto normal en Android Studio, ya que tenemos el proyecto creado, en la vista principal (activity_main.xml) agregamos el siguiente fragmento de código:
<ListView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/listitems" /> En la parte de res/layout con el clic del proyecto agregamos un nuevo recurso de Layout a través de New -> Layout resource file como se muestra en la Figura 3. Figura 3. Agregar un recurso de Layout
Se nos abrirá luego una ventana en la que podemos especificar el nombre del archivo y el tipo de Layout, aquí especificamos en File name un nombre como ítems y en Root element pondremos RelativeLayout como se muestra en la Figura 4. Una vez creado presionamos el botón OK. Figura 4. Ventana de creación de un nuevo archivo de recurso Luego de creado la vista XML procedemos a modificar su contenido. <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="5dip"> <LinearLayout android:id="@+id/thumbnail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dip" android:layout_alignparentleft="true"
android:layout_marginright="5dip"> <! Elemento ImageView para la imagen del item--> <ImageView android:id="@+id/imgitem" android:layout_width="60dip" android:paddingleft="16dp" android:layout_height="60dip"/> </LinearLayout> <! Elemento TexView para el Título --> <TextView android:id="@+id/txttitle" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_aligntop="@+id/thumbnail" android:layout_torightof="@+id/thumbnail" android:textcolor="#009688" android:text="" android:paddingleft="16dp" android:paddingright="16dp" android:paddingtop="5dp" android:textsize="22dip" android:fontfamily="sans-serif-condensed" android:textstyle="normal"/> <! Elemento TexView para la descripción -->
<TextView android:id="@+id/txtdescription" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/txttitle" android:textcolor="#546e7a" android:text="" android:textsize="17dip" android:paddingleft="16dp" android:paddingright="16dp" android:fontfamily="sans-serif-thin" android:textstyle="normal" android:layout_margintop="1dip" android:layout_torightof="@+id/thumbnail" /> </RelativeLayout> Ahora que tenemos la vista del ítem de la lista, procedemos a crear la clase titular a través de una nueva clase de Java a la cual le pondremos como nombre TitularItems esta clase nos ayudará para identificar los componentes dentro del código.
Figura 5. Creación de una nueva clase Java
El código queda de la siguiente manera: public class TitularItems { String title; // Título del item String description; // Descripción del item int img; // Imagen del ítem // Constructor por defecto de la clase public TitularItems(){ // Constructor con parámetros para inicializar el item public TitularItems(String _title, String _description, int _img){ this.title = _title; this.description = _description; this.img = _img; // Aqui inicia el GET y el SET para cada propiedad de la clase public String gettitle() { return title; public void settitle(string title) { this.title = title; public String getdescription() { return description; public void setdescription(string description) { this.description = description; public int getimg() { return img; public void setimg(int img) { this.img = img;
Terminado esto agregamos otra clase que va actuar como el adaptador de los datos entre la clase TitularItems y el archivo ítems.xml. public class Adaptador extends BaseAdapter{ private Activity activity; //Activity desde el cual se hace referencia al llenado de la lista private ArrayList<TitularItems> arrayitems; // Lista de items // Constructor con parámetros que recibe la Acvity y los datos de los items. public Adaptador(Activity activity, ArrayList<TitularItems> listaitems){ super(); this.activity = activity; this.arrayitems = new ArrayList<TitularItems>(listaItems); // Retorna el número de items de la lista @Override public int getcount() { return arrayitems.size(); // Retorna el objeto TitularItems de la lista @Override public Object getitem(int position) { return arrayitems.get(position); // Retorna la posición del item en la lista @Override public long getitemid(int position) { return position;
/* Clase estática que contiene los elementos de la lista */ public static class Fila { TextView txttitle; TextView txtdescription; ImageView img; // Método que retorna la vista formateada @Override public View getview(int position, View convertview, ViewGroup parent) { Fila view = new Fila(); LayoutInflater inflator = activity.getlayoutinflater(); TitularItems itm = arrayitems.get(position); /* Condicional para recrear la vista y no distorcionar el número de elementos */ if(convertview==null) { convertview = inflator.inflate(r.layout.items, parent, false); view.txttitle = (TextView) convertview.findviewbyid(r.id.txttitle); view.txtdescription = (TextView) convertview.findviewbyid(r.id.txtdescription); view.img = (ImageView)convertView.findViewById(R.id.imgItem); convertview.settag(view); else { view = (Fila)convertView.getTag();
// Se asigna el dato proveniente del objeto TitularItems view.txttitle.settext(itm.gettitle()); view.txtdescription.settext(itm.getdescription()); view.img.setimageresource(itm.getimg()); // Retornamos la vista return convertview; Finalmente en la clase MainActivity ponemos el siguiente código: // Variables de la clase private ArrayList<TitularItems> Items; private Adaptador Adaptador; private ListView listaitems; Dentro del método oncreate( ) ponemos: // Vinculamos el objeto ListView con el objeto del archivo XML listaitems = (ListView)findViewById(R.id.listItems); // Llamamos al método loaditems() loaditems(); Creamos el método loaditems() // Método cargar Items private void loaditems(){ Items = new ArrayList<TitularItems>(); // Creamos un objeto ArrayList de tipo TitularItems // Agregamos elementos al ArrayList Items.add(new TitularItems("Python", "Descripción de Python", this.getresources().getidentifier("ic_python", "drawable", this.getpackagename()))); Items.add(new TitularItems("Desempeño", "Descripción de Desempeño", this.getresources().getidentifier("ic_level", "drawable", this.getpackagename())));
Items.add(new TitularItems("Google Plus", "Descripción de Google Plus", this.getresources().getidentifier("ic_google_plus", "drawable", this.getpackagename()))); // Creamos un nuevo Adaptador y le pasamos el ArrayList Adaptador = new Adaptador(this, Items); // Desplegamos los elementos en el ListView listaitems.setadapter(adaptador); Como podemos ver en la Figura 6, las listas personalizadas nos ayudan a estilizar y a presentar de una mejor manera la vista de los datos. Figura 6. Despliegue de la lista personalizada