Close

Lista Agrupada

ListView con secciones o cabeceras.

En ocaciones necesitamos visualizar una lista de datos agrupados por alguna característica en común, en el siguiente post enseñare lo necesario para crear una lista con cabeceras.

Creamos nuestra actividad.

En este caso contendría un ListView para poder visualizar los datos

ActivityMain.java

Creamos nuestro layout

activity_main.xml

Vamos a definir nuestra cabecera y nuestro item de la lista.

item_header.xml

item_content.xml

Bueno hasta aquí nada nuevo ¿verdad?.

Sigamos.

Agrupar nuestros items (Lista de usuarios).

En este caso tenemos varias formas de hacerlo.

1. Añadiendo una característica a nuestro objeto para saber si es un item o es una cabecera (is_header).

2. Creando un objeto diferente para añadirlo a la lista como cabecera.

Aquí explicare como usar la segunda opción.

Una vez que tenemos nuestros recursos vamos a codificar un poco.

Crear una List<Object> agrupada.

Creamos un método que nos ayude a agrupar la lista e ir creando la lista agrupada. para ello creamos el método que reciba una lista de usuarios y los ordene por nombre.

Ahora como ya tenemos ordenada nuestra lista (por nombre), vamos a recorrerla y por cada nuevo item que encontremos vamos  a crear un objeto header

De este modo recogemos la clave por la que queremos agrupar, en este caso solo compruebo la primera letra, como nos da igual si es mayúscula o minúscula  usamos toLowerCase() para comparar con minúsculas y comprobar si el siguiente empieza por la letra buscada, si nos fijamos por cada letra nueva que encuentre creamos un objeto Header y añadimos a nuestros items agrupados.

El método completo nos quedaria asi.

Creación de nuestro ArrayAdapter (La parte más compleja).

Lo mas importante aquí es distinguir que tipo de objeto vamos a representar, y en función de este pintamos una vista u otra.

para usar la opción 1 usaremos esto

Como en este ejemplo estamos usando la opción 2

Tenemos que usar el reciclado de la lista para ello tenemos que comprobar si la vista que vamos a usar es nula o es del tipo header o tipo contenido, para ello tenemos que tener un campo único en el item_header e item_contenido para poder distinguirlo

En este caso:

El item_header tengo un TextView txt_header que no existe en el item_contenido y

En el item_contenido tengo un TextView txt_name que no existe en el item_header

De este modo podemos reciclar la vista actual (View contentview).

UserGroupAdapter.java

Con esto ya estaria todo.

Efecto desplazamiento.

En algunas listas que tienen este tipo de contenido agrupado vemos que si presionamos en su header nos pone la el header arriba del todo haciendo un efecto de barrido, esto queda muy chulo, y es una linea de código que lo hace automaticamente depende del contenido de nuestra lista.

Codificando método OnItemClickListener del listView

Yo lo he codificado como un método fuera para que el código esté un poco más limpio.

En este caso también tenemos que distinguir el tipo de objeto. (Ya lo vimos en el apartado de arriba)

Espero que les sirva.

Leave a Reply

Your email address will not be published. Required fields are marked *