Actividad ListView II

Tras la última actividad de ListView hemos visto que no tiene nada nuevo comparado con el componente Spinner. A continuación vamos a ver como personalizar un ListView para hacer mas completas las filas de nuestro componente. Esto es extensible a otros componentes como el Spinner, aunque suele ser menos necesario debido a la finalidad de cada uno.

Para esta práctica vamos a añadir dos elementos, un campo de texto a modo de título y otro de subtítulo.

a) En primer lugar vamos a crear una nueva clase de java dandole a File > New > Class y añadimos las siguientes líneas:

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;

    }

}

b) Debemos modificar el xml de nuestra actividad (la principal) de la siguiente manera:

<ListView android:id="@+id/LstOpciones"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

 y crearemos un nuevo archivo xml en la carpeta layout llamado 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="match_parent"

    android:layout_height="wrap_content"

    android:textStyle="bold"

    android:textSize="20px" />

<TextView android:id="@+id/LblSubTitulo"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:textStyle="normal"

    android:textSize="12px" />

</LinearLayout>

c) El siguiente paso será crear otra clase llamada AdaptadorTitulares que extenderá de la clase ArrayAdapter, con su constructor como primer método al que le pasaremos nuestro contexto (que será la actividad desde la que se crea el adaptador). Al llamar al constructor padre super() le pasaremos el ID del layout que queremos utilizar 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()).

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

    }

}




d) Por último sólo tenemos que aplicar lo que ya sabemos sobre el ListView con las siguiente modificaciones:

Declaramos un array de objetos Titular en nuestra clase AdaptadorTitulares

public static 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")};

//...

//...y en la clase principal

AdaptadorTitulares adaptador =

        new AdaptadorTitulares(this);

lstOpciones = (ListView)findViewById(R.id.LstOpciones);

lstOpciones.setAdapter(adaptador);