No es un bug, es una característica no documentada

martes, 3 de noviembre de 2015

Programación multimedia. ListView personalizados

¿Os acordáis de la aplicación con la que trabajamos los ListView? Bien, pues vamos a mejorarla para que en cada opción que nos dé aparezca un icono además del texto. La idea a conseguir, aproximadamente, es algo como el siguiente ejemplo:



Esto conseguiremos hacerlo mediante un layout de ítem propio.
Crearemos un RelativeLayout para el ítem, donde el alto se establece a partir de un parámetro de configuración del sistema para alturas de ítems en ListView: ?android:attr/listPrefferedItemHeight.

El primer elemento que contiene es un ImageView alineado a la izquierda. Su alto y su ancho también pueden ser el mismo parámetro indicado.

En el código Java de la actividad debe crearse el adaptador indicando el nombre del layout que debe utilizarse y el nombre del elemento donde se visualizará el valor de cada ítem.

Sabiendo esto, vayamos por pasos.

Nuestro activity_listas presentaba el siguiente aspecto:


El XML por si se quiere generar de nuevo es el siguiente:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".Listas"
    android:background="#FF5722">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Ejemplo de listado"
        android:id="@+id/lblTitulo"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textColor="#FFFFFF"
        android:textSize="@dimen/abc_action_button_min_width_overflow_material"
        android:textStyle="bold"
        android:gravity="center_horizontal" />

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@android:id/list"
        android:layout_below="@+id/lblTitulo"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="40dp"
        android:touchscreenBlocksFocus="false"
        android:textAlignment="center"
        android:gravity="center" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Resultado"
        android:id="@+id/lblResultado"
        android:layout_below="@+id/lblTitulo"
        android:layout_centerHorizontal="true"
        android:textSize="@dimen/abc_dialog_padding_material"
        android:textColor="#FFFFFF"
        android:gravity="center_horizontal" />

</RelativeLayout>

El siguiente paso será alojar en el directorio drawable el icono que usaremos para colocarlo en los ítems de nuestra lista. En mi caso este:


Y generamos un nuevo layout, ítem_layout por ejemplo, en el que dentro del Relative_layout insertaremos un ImageView y un TextView, este último con el texto vacío, y la imagen haciendo referencia a la que querremos usar de icono.


Y para las propiedades de altura y anchura de los elementos colocaremos la siguiente medida:

?android:attr/listPreferredItemHeight

Dejo el XML completo para poder hacernos idea:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="?android:attr/listPreferredItemHeight">

    <ImageView
        android:layout_width="?android:attr/listPreferredItemHeight"
        android:layout_height="?android:attr/listPreferredItemHeight"
        android:id="@+id/icono"
        android:src="@drawable/android"
        android:layout_alignParentLeft="true" />

    <TextView
        android:layout_width="?android:attr/listPreferredItemHeight"
        android:layout_height="?android:attr/listPreferredItemHeight"
        android:id="@+id/titulo"
        android:layout_marginLeft="70dp" />
</RelativeLayout>

Y por último, en la clase Listas.java escribiremos lo siguiente:

private TextView resultado;
private ListView lista;
private String[] cursos;
private String[] asignaturas;

@Override
protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_listas);
     resultado = (TextView)findViewById(R.id.lblResultado);
     lista = (ListView)findViewById(android.R.id.list);

     asignaturas = getResources().getStringArray(R.array.opcion);
     ListAdapter adapter = new ArrayAdapter<String>(this, R.layout.item_layout, R.id.titulo, asignaturas);
     lista.setAdapter(adapter);
}

@Override
protected void onListItemClick(ListView l, View v, int position, long id){
     super.onListItemClick(l, v, position, id);
     cursos = getResources().getStringArray(R.array.curso);
     resultado.setText(l.getItemAtPosition(position) + " es de " + cursos[position]);
}

Es decir, ahora haremos la referencia con la nueva activity también para cargar los iconos.
Si ejecutas la aplicación, aparecerá algo así:

0 comentarios:

Publicar un comentario