En este tutorial explicamos cómo crear una Lista expandible (expandible ListView) en Android Studio. Explicamos cómo agregarla a la UI, crear adaptadores, ingresar datos y mostrarla desde una actividad.
Esta es una lista Expandible:
Estos son los datos que usaremos:
Tendremos dos elementos principales:
- Grupos, es la lista de elementos para los títulos principales. (Animales terrestres, animales Voladores, etc.)
- Contenido, Child o individual. Nos referimos a un elemento dentro de un grupo. (Perro, Gato, Ratón, etc)
Pasos a seguir:
- Configuramos La Interfaz de usuario.
- Creamos el Item para los títulos (grupos) y el Item para el texto dentro del grupo (contenido).
- Creamos el Adaptador para la Expandible List View.
- En la actividad principal, declaramos variables con los datos de la tabla.
- En la actividad principal asignamos el Adaptador al Expandible Liste View de la UI.
Configurando la UI
Primero agregamos la lista expandible a la interfaz de usuario (IU).
Para esto tenemos que escribir el código, el objeto se llama “Expandable List View”. Y lo acomodamos en donde mejor se ajuste a nuestra Interfaz, como cualquier otro objeto. Nosotros usaremos ConstraintLayout.
La ID de este elemento será: “expandible”
Este es el código:
#code
Configurando el layout de los Items
El siguiente paso es crear el layout para los Items que aparecerán en la lista. Necesitaremos 2. Uno es para el Grupo, mientras que el otro es para los elementos del grupo.
Para crear un nuevo archivo XML para el layout, damos clic derecho en la carpeta res/layout seleccionamos new/Layout Resources File.
Nos preguntará el nombre del archivo, estos son los nombres que usaremos:
- group_item, para el Item de los grupos.
- child_item, para el ítem del contenido de los grupos.
Creando Item del Grupo.
Creamos un nuevo archivo XML donde daremos forma al Item del Grupo. Lo llamaremos grup_item como se muestra a continuación:
El contenido de este ítem será solo un texto, color negro, centrado, bold y de tamaño 16sp.
La ID del texto será: “txt_group”
Creando Item del Elemento.
Creamos el layout para el ítem de los elementos del contenido lo llamamos: child_item.xml.
Tendrá una imagen a la izquierda y un texto a un lado. La imagen será un símbolo de la palomita el cual obtenemos desde ImageAssets. Pero puedes usar cualquier símbolo o hasta una imagen y cargarla desde Drawables.
El texto le daremos un color Azul.
El ID del Texto es: “txt_child”
El ID de la imagen: “im_child”
El Adaptador para el Expandable ListView Adapter. (ELVAdapter)
Vamos a crear el adaptador, para esto:
Primero creamos una nueva clase Java, que llamaremos ELVAdapter.java
Extendemos la clase con BaseExpandibleListAdapter e implementamos todos los métodos que nos sugieren.
Métodos a implementar:
Creando un constructor.
Antes de configurar los métodos, debemos crear un constructor para poder recibir variables cuando se llame este método.. Tendremos 3 variables:
- context, es el contexto.
- colección, es una variable tipo Map, que tendrá una variable string y una Lista String en cada posición.
- tituloGrupos, una variable tipo Lista, que contrendra los títulos de cada sección, es decir, tiene la información de los grupos.
Así queda el constructor con las variables:
Configurando los métodos del adaptador.
Así configuramos los métodos, dejamos el código que cada método llevará.
Método getChild. Es el contenido de cada child, aquí regresamos el valor de un child.
return coleccion.get( titulosGrupo.get( i ) ) .get( i1 );
Método getGroup, el contenido de cada título de grupo.
return titulosGrupo.get( i );
Método getChildId, la ID de cada child. Solo regreso la id que viene en el método.
return i1;
Método getGroupId, la ID de cada grupo. Solo regreso la id que viene en el método.
return i;
Método getChildrenCount, es el número de elementos de cada grupo. Por ejemplo Animales Terrestres tiene 7 elementos.
return coleccion.get( titulosGrupo.get( i ) ).size();
Método getGroupCount, es el número de grupos que tenemos.
return titulosGrupo.size();
Método hasStableIds, lo colocamos en falso.
return false;
Método isChildrenSelectable, lo colocamos en verdadero.
return true;
Método getChildView, es la vista el Child o elemento individual. Aquí configuramos el contenido de cada child_item.xml.
- Primero obtenemos el valor que escribiremos, llamando al método getChild.
- Luego revisamos si la vista está vacía o no. Si está vacía, creamos la vista con un InflaterLayout y elegimos el layout de cada ítem, llamado child_item.xml
- Después con la vista encontramos los elementos del ítem en xml. Y podemos modificar sus características a nuestro gusto.
- El último paso es regresar la vista.
Método getGroupView, es la vista de cada Item del grupo. Aquí configuramos el contenido del Item Grupo. Es similar al getChldView, pero ahora con el Item group_item.xml
- Primero obtenemos el título en una variable tipo Sting, llamando al método getGroup(), con la posición.
- Luego revisamos si la vista es nula o no. Si es nula entonces la generamos con un inflaterLayout e indicamos el archivo XML, que contiene al ítem del grupo. group_item.xml
- Una vez que aseguramos la vista, personalizamos el contenido del Item del grupo. Con la vista podemos acceder a sus elementos XML.
- Por último regresamos la vista.
En la actividad principal.
Ya se hiso lo más difícil, ahora solo queda configurar la Actividad de donde configuraremos la lista expandible.
Primero debemos relacionar el lista en XML con una variable en Java, para poder editar sus parámetros.
Luego crearemos variables con los datos para la lista Expandible.
Por último usamos el adaptador que creamos (ELVAdapter) para configurar como se mostrarán los datos en la Lista expandible
Creamos variables
Primero relacionamos la ExpandableListView en XML con una variable en Java.
Luego declaramos las variables necesarias:
- El contexto en una variable.
- Un arreglo para los títulos de los grupos.
- Un arreglo que nos servirá de apoyo para el contenido de cada grupo.
- Un Map, que contendrá el título del grupo y todos los elementos que tiene cada grupo.
- Una variable de nuestro adaptador ELVAdapter.
Agregamos los datos a cada lista.
En este caso, generamos un arreglo por cada lista que se expandirá y al final se las agregamos a la variable tipo Map, que llamamos colección.
Los títulos los podemos obtener con el comando keySet.
titulosGrupo.clear(); titulosGrupo = new ArrayList<String>(coleccion.keySet());
Llamando al adaptador
El último paso es unir todo lo que hemos hecho. Y esto se hace mediante el adaptador.
Le damos como parámetro a nuestro adaptador las variables con los datos de la lista Expandible.
Y después agregamos ese adaptador a la variable que tiene la vista del ExpandableListView.
adaptador = new ELVAdapter(this, titulosGrupo, coleccion);
expandible.setAdapter(adaptador);
Con esto ya debe de funcionar correctamente la Lista Expandible (ExpandableListView) en Android Studio.
#im o gift
Para más tutoriales de Android ve a este enlace.
Algunos temas que te pueden interesar: