¿Qué son y cómo se configuran los Adaptadores (Adapters) para mostrar Listas y Grids en Android? (parte 1)

- Andrés Cruz

In english
¿Qué son y cómo se configuran los Adaptadores (Adapters) para mostrar Listas y Grids en Android? (parte 1)

Podemos decir que el objetivo principal de la mayoría de las aplicaciones desarrolladas para dispositivos móviles incluyendo Android, es la de consumir contenido: noticias, notas u otros listados de información son algunos ejemplos; los llamados Adaptadores o Adapters son una potente herramienta provista en la API de android.widget que podemos usar para esta labor; consiste en mostrar un conjunto de información a través de listas o grids (personalizables a nivel de definición, estilo y eventos); en esta entrega veremos como crear un Adaptador o Adapter personalizado para Android.

¿Qué es un Adapter según la API de Android?

En la API de Android definen los adapters como:

An Adapter object acts as a bridge between an AdapterView and the underlying data for that view. The Adapter provides access to the data items. The Adapter is also responsible for making a View for each item in the data set.

Una posible traducción de lo anterior sería como: Un objeto Adapter actúa como un puente entre el AdapterView y los datos de una vista. El Adapter proporciona acceso a cada item. El adaptador también es responsable de hacer una vista para cada producto en el conjunto de datos.

Tenemos vários elementos aquí:

  • Colección de datos: Datos que se desean mostrar; generalmente están almacenados en un List, ArrayList o array.
  • Vista: Definición de cómo lucirá un elemento de la lista mediante un layout XML.
  • Adapter: Finalmente definimos el puente entre los datos y la vista; el Adapter se encarga de tomar la vista y repetirla para cada colección de datos además de interactuar con los elementos que componen la vista.

Básicamente podemos usar una interfaz de un Adapter para crear y mostrar listados de información de una lista de objetos u otro tipo de dato de una forma eficiente e interactuar con ella mediante eventos.

Definiendo un Adapter en cuatro pasos...

Para poder trabajar con los Adapter que veremos en esta entrega, tenemos que realizar los siguientes pasos:

componente de una vista, listview
  • Debemos utilizar ListView; si deseamos que nuestro listado sean cuadrículas:
componente de una vista, gridview

1. Creando el aspecto de nuestra lista

Definimos el layout del Adapter dentro de la carpeta layout que luzca de la siguiente manera:

layout del listview
        <?xml version = "1.0" encoding = "utf-8"
        ?>
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:layout_margin = "10dp"
        android:background = "#0088BB"
        android:orientation = "vertical"
        android:padding = "5dp" >

        <TextView
        android:id = "@+id/nameTextView"
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:textColor = "#FFFFFF" />

        </LinearLayout/>

Este layout representa el aspecto que tendrá cada item en el listado, como podrá darse cuenta, solo representa el aspecto de un item de la colección de datos, queda por parte del Adapter repetir el proceso para cada uno de los elementos que forman la colección de datos.

Este layout puede ser tan complejo como desee; puede contar de vários campos de texto (TextView), botones (Button) o cualquier otro elementos ofrecido por la API de Android.

2. Creando el ArrayAdapter

Ya definido y creado el layout, el siguiente paso consiste en crear una clase que extienda de ArrayAdapter<String> con el siguiente contenido:

        public class ListAdapter extends ArrayAdapter<String> {

        private Activity activity;
        ArrayList<String> mensajes;

        public ListAdapter(Activity activity, ArrayList<String> mensajes) {
          super(activity, R.layout.list_view);
          this.activity = activity;
          this.mensajes = mensajes;
        }

        static class ViewHolder {
        }

        public int getCount() {
          return mensajes.size();
        }

        public long getItemId(int position) {
          return position;
        }

        public View getView(final int position, View convertView,
          final ViewGroup parent) {
          View view = NULL;
          return view;
        }

        }

ViewHolder: Permite referenciar los elementos que componen al listado; en nuestro ejemplo el listado solo esta compuesto de un TextView:

	static class ViewHolder {
		protected TextView nameTextView;

	}

Y el getView; en donde son referenciados y establecidos los valores de los elementos de la vista:

		// inflamos nuestra vista con el layout
		View view = NULL;
		LayoutInflater inflator = activity.getLayoutInflater();
		view = inflator.inflate(R.layout.list_view, NULL);
		final ViewHolder viewHolder = new ViewHolder();

		// *** instanciamos a los recursos
		viewHolder.nameTextView = (TextView) view
				.findViewById(R.id.nameTextView);

		// importante!!! establecemos el mensaje
		viewHolder.nameTextView.setText(mensajes.get(position));

		return view;
  • Inflamos el menu con nuestro layout ya definido en el paso uno.
  • Referenciamos los elementos del layout (el TextView).
  • Y hacemos algo con los elementos ya referenciados, en este ejemplo le establecemos un valor de la lista mensajes.

Un punto interesante, es que es posible definir los eventos dentro del Adapter como veremos en el siguiente artículo.

3. Agregando el Adapter al layout de la Actividad (Activity)

Definimos el siguiente elemento dentro del main_layout.xml o el layout de la actividad:

    <ListView
        android:id="@+id/listview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

4. Invocando al Adapter desde la Actividad (Activity)

Ahora solo falta invocar al Adapter desde la Actividad:

		// creamos nuestra coleccion de datos
		mensajes = new ArrayList<String>();
		mensajes.add("uno");
		mensajes.add("dos");
		mensajes.add("tres");
		mensajes.add("cuatro");
		mensajes.add("cinco");

		// creamos el listado
		listAdapter = new ListAdapter(this, mensajes);

		// establecemos el adaptador en la lista
		listView.setAdapter(listAdapter);

Al ejecutar la aplicación, veremos una pantalla como esta:

adapter corriendo en un android, listview

Puedes ver el código completo del ejemplo en nuestro repositorio de GitHub.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.