SimpleAdapter personalizado en Android con ejemplo

El adaptador actúa como un puente entre el componente de interfaz de usuario y la fuente de datos. Convierte los datos de las fuentes de datos en elementos de vista que se pueden mostrar en el componente de la interfaz de usuario. En Android, SimpleAdapter es un adaptador sencillo para asignar datos estáticos a vistas definidas en un archivo XML (diseño). Puede especificar los datos que respaldan la lista como una ArrayList of Maps. Cada entrada en ArrayList corresponde a una fila en la lista. Los mapas contienen los datos de cada fila.

¿Por qué usar CustomSimpleAdapter? 

SimpleAdapter nos permite agregar eventos a cada elemento de la lista, pero si queremos agregar diferentes eventos a diferentes vistas que forman parte de nuestro elemento de la lista, no podemos lograrlo usando el propio SimpleAdapter. En una aplicación típica de Android, un elemento de lista puede consistir en un diseño complejo que puede contener diferentes vistas. En esa condición, tenemos que usar personalizar SimpleAdapter. La sintaxis básica de SimpleAdapter.

Sintaxis:

public SimpleAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to)

Parámetros:

context: el contexto donde se ejecuta la vista asociada con este SimpleAdapter

datos: una lista de mapas. Cada entrada en la Lista corresponde a una fila en la lista. Los mapas contienen los datos de cada fila y deben incluir todas las entradas especificadas en «desde»

recurso: identificador de recurso de un diseño de vista que define las vistas para este elemento de lista. El archivo de diseño debe incluir al menos las vistas nombradas definidas en «to»

from: una lista de nombres de columnas que se agregarán al mapa asociado con cada elemento.

a: las vistas que deben mostrar la columna en el parámetro «desde». Todos estos deberían ser TextViews. Las primeras N vistas de esta lista reciben los valores de las primeras N columnas en el parámetro from.

Dos métodos más importantes de SimpleAdapter:

1. getCount(): cuántos elementos hay en el conjunto de datos representado por este adaptador.
2. getView(): Obtenga una vista que muestra los datos en la posición especificada en el conjunto de datos. Puede crear una vista manualmente o inflarla desde un archivo de diseño XML. Cuando la Vista está inflada, la Vista principal (GridView, ListView…) aplicará los parámetros de diseño predeterminados a menos que use LayoutInflater.inflate(int, android.view.ViewGroup, boolean) para especificar una vista raíz y evitar que se adjunte a la raíz.

Ejemplo

A continuación se muestra el gif de la aplicación final que vamos a crear para este artículo. En esto, notará que al hacer clic en list_item no sucede nada, pero cuando hacemos clic en Imagen, solo se muestra Toast.

Implementación paso a paso

Paso 1: Crear un nuevo Proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio usando Kotlin. Vamos a usar Kotlin .

Paso 2: Trabajando con activity_main.xml

Ahora abra activity_main.xml e inserte el siguiente código en él. Creará un ConstraintLayout que consiste en un ListView . A continuación se muestra el código para el archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <!-- This is the listView which will
         display our list_items -->
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
     
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 3: Creación de un nuevo archivo XML de diseño para ListItem.

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en > Nuevo > Archivo de recursos de diseño y cree un archivo XML. Nombre el archivo como list_item . A continuación se muestra el código para el archivo list_item.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="2dp">
 
    <!-- ImageView which is display
         to the left of list_item -->
    <ImageView
        android:id="@+id/avatarImageView"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:clickable="true"
        android:focusable="true"
        tools:srcCompat="@tools:sample/avatars" />
 
    <!-- LinearLayout to hold title and subtite -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginStart="4dp"
        android:orientation="vertical">
 
        <!-- TextView to display title -->
        <TextView
            android:id="@+id/titleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="18sp"
            android:textStyle="bold"
            tools:text="Title" />
 
        <!-- TextView to display subtitle -->
        <TextView
            android:id="@+id/subtitleTextView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:maxLines="2"
            tools:text="Subtitle" />
         
    </LinearLayout>
</LinearLayout>

Paso 4: Implementación de CustomSimpleAdapter

Ahora cree un nuevo archivo de clase de Kotlin y asígnele el nombre CustomSimpleAdapter . En este archivo, anularemos el método getView() para agregar el código personalizado. A continuación se muestra el código del archivo CustomSimpleAdapter.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.content.Context
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.SimpleAdapter
import android.widget.TextView
import android.widget.Toast
import androidx.annotation.IdRes
import androidx.annotation.LayoutRes
 
class CustomSimpleAdapter(
    private val mContext: Context,
    data: MutableList<HashMap<String, String>>,
    @LayoutRes
    res: Int,
    from: Array<String>,
    @IdRes
    to: IntArray
) :
    // Passing these params to SimpleAdapter
    SimpleAdapter(mContext, data, res, from, to) {
 
    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
         
        // Get the view in our case list_item.xml
        val view = super.getView(position, convertView, parent)
 
        // Getting reference of ImageView that we
        // have used in our list_item.xml file
        // so that we can add user defined code
        val avatarImageView = view.findViewById<ImageView>(R.id.avatarImageView)
 
        // Reference of TextView which is treated a title
        val titleTextView = view.findViewById<TextView>(R.id.titleTextView)
 
        // Adding an clickEvent to the ImageView, as soon as we click this
        // ImageView we will see a Toast which will display a message
        // Note: this event will only fire when ImageView is pressed and
        //       not when whole list_item is pressed
        avatarImageView.setOnClickListener {
            Toast.makeText(
                mContext,
                "Image with title ${titleTextView.text} is pressed",
                Toast.LENGTH_SHORT
            ).show()
        }
 
        // Finally returning our view
        return view
    }
}

Paso 5: trabajar con el archivo MainActivity.kt

Antes de escribir cualquier código en el archivo MainActivity.kt, agregue las imágenes que desea mostrar. A continuación se muestra el código para el archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle
import android.widget.ListView
import androidx.appcompat.app.AppCompatActivity
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // Because SimpleAdapter works with static
        // data so we need to initialize static data
 
        // This is the array for TitleText
        val titles = arrayOf("Test1", "Test2", "Test3")
 
        // This array is for SubtitleText
        val subtitles= arrayOf("This is test1 subtitle", "This is test2 subtitle", "This is test3 subtitle")
 
        // These are the Id's of the images that will be displayed as avatar
        val images = arrayOf(R.drawable.test1, R.drawable.test2, R.drawable.test3)
 
        // Instantiating our data List, which is a list of HashMap
        val data: MutableList<HashMap<String, String>> = mutableListOf()
 
        // Populating our data List with the
        // arrays that we have already defined
        for (i in titles.indices) {
            val cur: HashMap<String, String> = HashMap()
            cur["titleText"] = titles[i]
            cur["subtitleText"] = subtitles[i]
            cur["avatarImage"] = "${images[i]}"
            data.add(cur)
        }
 
        // From and To array which will be used to map, HashMap values
        // to the Views that are defined in the XML file (in our case list_item.xml)
        val from = arrayOf("avatarImage", "titleText", "subtitleText")
        val to = intArrayOf(R.id.avatarImageView, R.id.titleTextView, R.id.subtitleTextView)
 
        // Instantiating customSimpleAdapter with the above values
        val customSimpleAdapter = CustomSimpleAdapter(this, data, R.layout.list_item, from, to)
 
        // Getting reference of listView which is defined in activity_main.xml
        val listView = findViewById<ListView>(R.id.listView)
 
        // Finally, setting adapter to our customSimpleAdapter
        listView.adapter = customSimpleAdapter
    }
}

Producción: