Uso de un ListView en Android para mostrar una lista de datos

Un ListView en Android es un objeto que nos permite mostrar una lista de elementos desplazables. Veamos ejemplo de cómo construirlo paso a paso.

En el siguiente ejemplo deseamos mostrar una lista compuesta por  5 estados de México utilizando un ListView en Android.

ListView que muestra una lista de datos estáticos

Paso 1. Crea un proyecto nuevo.

Paso 2. Coloca un ListView usando la vista Diseño.

Paso 3.  Crea las variables a utilizar

Entre ellas, una variable de tipo ListView (en MainActivity)

private ListView listview;
private ArrayList<String> names;

Paso 4. Enlazar

Enlaza la variable anterior con el elemento ListView de la vista Diseño. 

listview = (ListView) findViewById(R.id.listview);

Paso 5. Coloca los datos que quieras mostrar en un Array de Strings

names = new ArrayList<String>();         
names.add("Veracruz");         
names.add("Tabasco");         
names.add("Chiapas");         
names.add("Campeche");         
names.add("Quintana Roo”);

Paso 6. Crea un adaptador y agrégale la variable de Strings.

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, names);

Paso 7. Indica que el listview utilizará ese adaptador.

listview.setAdapter(adapter);

El resultado hasta aquí es el siguiente:

Agregar un evento Click a un ListView en Android

Paso 1. Creamos un evento ClickListener.

Paso 2. Sobreescribimos la función onItemClick

Pasamos la vista a mostrar, la posición del arreglo de nombres de estado. Si el usuario da clic se mostrará una pequeña ventana de texto mostrando el valor de esa determianda posición.

listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
        Toast.makeText(MainActivity.this, "Has pulsado: "+ names.get(position), Toast.LENGTH_LONG).show();
      }
   });

El resultado hasta aquí es el siguiente

Personalizar un ListView en Android

Vamos a Crear un Layout personalizado. 

Paso 1. Da clic derecho en layout (está en la rama de app->res->layot), y selecciona New->Layout resource file.

Paso 2. En la ventana que se abre, escribre como File name: list_item, y como Root element: LinearLayout. Pulse Ok.

Paso 3. Coloca un ImageView y un TextView en ese layout.

Paso 4. Personaliza los componentes para ajustar la imagen a la izquierda del texto, viéndose así:

El código XML utilizado fue el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="80dp">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="25dp"
        app:srcCompat="@android:drawable/btn_star_big_on" />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textColor="#333"
        android:layout_gravity="center_vertical"
        android:text="TextView" />
</LinearLayout>

Paso 5. Crea una nueva clase de Java llamada MyAdapter. 

Ve al menú File->New->Java Class

Como nombre de clase usa MyAdapter.

Paso 6. Código de la clase MyAdapter.

Esta clase crea un Adapter personalizado basado en el layout que creamos.  El código es el siguiente:

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import java.util.ArrayList;

public class MyAdapter extends BaseAdapter {
    private Context context;
    private int layout;
    private ArrayList<String> names;
    public MyAdapter(Context context, int layout, ArrayList<String> names){
        this.context = context;
        this.layout = layout;
        this.names = names;
    }

    @Override
    public int getCount() {
        return this.names.size();
    }

    @Override
    public Object getItem(int position) {
        return this.names.get(position);
    }

    @Override
    public long getItemId(int id) {
        return id;
    }

    @Override

    public View getView(int position, View convertView, ViewGroup viewGroup) {
        // Copiamos la vista
        View v = convertView;

        //Inflamos la vista con nuestro propio layout
        LayoutInflater layoutInflater = LayoutInflater.from(this.context);

        v= layoutInflater.inflate(R.layout.list_item, null);
        // Valor actual según la posición

        String currentName  = names.get(position);
       
        // Referenciamos el elemento a modificar y lo rellenamos
        TextView textView = (TextView) v.findViewById(R.id.textView);
        textView.setText(currentName);
        //Devolvemos la vista inflada
        return v;
    }

Paso 7. Enlazar con nuestro adaptador personalizado.

En el MainActivity, agregamos las siguientes líneas:

MyAdapter myAdapter = new MyAdapter(this, R.layout.list_item, names);
listview.setAdapter(myAdapter);

Y listo!

Referencias:

1. Android (2018). Vista de lista. Disponible en [https://developer.android.com/guide/topics/ui/layout/listview?hl=es-419]

Tu comentario

opiniones