El ListView estándar sólo muestra una lista de elementos. Ideal cuando sólo hay que mostrar una lista de texto, pero no es suficiente para las aplicaciones con diseños más elaborados. Los ejemplos de lista que tenemos vienen acompañados de una imagen. Así que tenemos que generar nuestro propio Adaptador para crear la vista que necesitamos de una imagen con su título de la canción (En este caso)

Para crear una lista en Android Studio necesitamos definir:

1.- Datos de la lista. – Declarar un Array con los datos de nuestra lista. (Java)

2.- Vista - Crear la fila que conformara la lista (fila_lista.xml) - Colocar un <ListView> en nuestro Layout (Archivo XML)

3.- Código – Programar la comunicación entre nuestros datos y el ListView por medio de un adaptador después establecer alguna acción a realizar cuando se presione un elemento de la lista. (Archivo Java)

¿Qué es un adaptador?

Un adaptador representa una interfaz común al modelo de datos que existe por detrás de todos los controles de selección. Dicho de otra forma, todos los controles de selección accederán a los datos que contienen a través de un adaptador.

Además de proveer de datos a los controles visuales, el adaptador también será responsable de generar a partir de estos datos las vistas específicas que se mostrarán dentro del control de selección. Por ejemplo, si cada elemento de una lista estuviera formado a su vez por una imagen y varias etiquetas, el responsable de generar y establecer el contenido de todos estos “sub-elementos” a partir de los datos será el propio adaptador.

Android proporciona de serie varios tipos de adaptadores sencillos, aunque podemos extender su funcionalidad fácilmente para adaptarlos a nuestras necesidades. Hoy usaremos ArrayAdapter

• ArrayAdapter. Es el más sencillo de todos los adaptadores, y provee de datos a un control de selección a partir de un array de objetos de cualquier tipo.

Práctica:

1. Crear un proyecto nuevo en Android Studio con el nombre de MiListaMusica API 19 y con un Blank Activity.
2. Crear un archivo layout con el nombre de fila_lista.xml. Este archivo será el diseño de cada fila que mi lista contendrá. Está compuesto por una imagen y una etiqueta. Sus atributos son los siguientes:

<ImageView

android:id="@+id/icon"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_marginBottom="4dp"

android:layout_marginLeft="4dp"

android:layout_marginRight="4dp"

android:layout_marginTop="4dp"

android:src="@mipmap/ic_launcher" />

<TextView

android:id="@+id/nombre_fila_lista"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="24sp"

android:paddingTop="6dp"/>

3. Abrir archivo content_main.xml, arrastrar un ListView (ubicado en Palette sección Containers) y colocarlo dentro de nuestro layout.

4. Abrir el archivo MainActivity.java

Crear un arreglo tipo String con el nombre de canciones. El arreglo lo definimos después de la declaración de la clase.

private String canciones[]=new String[]{"Across the universe","Eleanor Rigby","Hey Jude","Let it be","Something","Ticket to Ride","Yellow Submarine","Yesterday"};

5. Crearemos nuestro adapter de la siguiente forma:

ArrayAdapter<String> adaptador =(new ArrayAdapter<String>(

this, R.layout.fila_lista,

R.id.nombre_fila_lista, canciones));

También se enviaron siguientes parámetros:

a. (this) El contexto, que normalmente será simplemente una referencia a la actividad donde se crea el adaptador.

b. (R.layout.fila_lista) El ID del layout sobre el que se mostrarán los datos del control. En este caso le pasamos el ID de nuestro layout, formado por un control ImageView y un TextView.

c. (R.id.nombre_fila_lista) EL ID del TextView donde se mostraran los nombres de las canciones.

d. (canciones) El array que contiene los datos a mostrar.

6. Ahora queda volcar los datos cargados en el adapter en nuestra lista. Creando un objeto de la clase ListView llamado lista. Con este objeto tomamos nuestro ListView y al final con la instrucción setAdapter asignamos el Adapter.

Probaremos nuestra app

8. Para agregar un evento y que nuestra lista muestre un mensaje Toast en el ítem que se seleccione, vamos a agregar la escucha y el método onItemClick.

lista.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

String Slecteditem = canciones[+position];

Toast.makeText(getApplicationContext(), Slecteditem, Toast.LENGTH_SHORT).show();

}

});

9. Probaremos nuevamente la app

Fin de la práctica

Elaborado por: Lic. Karina Campero Varela - Desarrollo de Apps - Web y entusiasta programadora de Java y PHP