ArrayAdapter personalizado con ListView en Android

En el artículo anterior ArrayAdapter en Android con ejemplo , se discutió cómo funciona ArrayAdapter y cuáles son las fuentes de datos que se pueden adjuntar a ArrayAdapter con ListView. En este artículo, se ha discutido cómo implementar ArrayAdapter personalizado con ListView. Eche un vistazo a la siguiente imagen en la que se puede personalizar una sola vista en el ArrayAdapter.

Pasos para implementar el ArrayAdapter personalizado

Paso 1: crear un proyecto de actividad vacía

• Cree un proyecto de estudio de Android de actividad vacía. Consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio?
• Y asegúrese de seleccionar la programación como Java .

Paso 2: Trabajando con activity_main.xml

• En el archivo activity_main.xml , la vista raíz es ListView . Invoque el siguiente código en el archivo activity_main.xml y mencione el ID apropiado para ListView.

<?xml version="1.0" encoding="utf-8"?>
<ListView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</ListView>

Paso 3: crear una vista personalizada para ListView

• En diseño, la carpeta crea un diseño como custom_list_view.xml e invoca el siguiente código.

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    tools:ignore="UselessParent">
  
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="84dp"
        android:layout_height="84dp"
        android:padding="16dp"
        tools:ignore="ContentDescription" />
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="vertical">
  
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:gravity="bottom|left"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold"
            tools:ignore="RtlHardcoded" />
  
        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:gravity="top|left"
            android:textColor="@android:color/black"
            android:textSize="14sp"
            tools:ignore="RtlHardcoded" />
  
    </LinearLayout>
  
</LinearLayout>

• Para cada elemento individual en ListView, este diseño crea la siguiente vista para cada elemento individual en el adaptador de array.

Paso 4: crea una clase personalizada para un diseño personalizado

• Al crear esta clase personalizada, invocamos el getter y setter manualmente para el diseño custom_list_view.
• Cree una clase personalizada llamada NumbersView en la carpeta del paquete de la aplicación.
• E invoque el siguiente código.

public class NumbersView {
  
    // the resource ID for the imageView
    private int ivNumbersImageId;
  
    // TextView 1
    private String mNumberInDigit;
  
    // TextView 1
    private String mNumbersInText;
  
    // create constructor to set the values for all the parameters of the each single view
    public NumbersView(int NumbersImageId, String NumbersInDigit, String NumbersInText) {
        ivNumbersImageId = NumbersImageId;
        mNumberInDigit = NumbersInDigit;
        mNumbersInText = NumbersInText;
    }
  
    // getter method for returning the ID of the imageview
    public int getNumbersImageId() {
        return ivNumbersImageId;
    }
  
    // getter method for returning the ID of the TextView 1
    public String getNumberInDigit() {
        return mNumberInDigit;
    }
  
    // getter method for returning the ID of the TextView 2
    public String getNumbersInText() {
        return mNumbersInText;
    }
}

Paso 5: ahora cree una clase ArrayAdapter personalizada del tipo NumbersView

• Con el mismo nombre de paquete, cree una clase NumbersViewAdapter.java del tipo NumbersView que amplía la clase ArrayAdapter.
• E invoque el siguiente código dentro del archivo NumbersViewAdapter.java. Se agregan comentarios para una mejor comprensión.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import java.util.ArrayList;
  
public class NumbersViewAdapter extends ArrayAdapter<NumbersView> {
  
    // invoke the suitable constructor of the ArrayAdapter class
    public NumbersViewAdapter(@NonNull Context context, ArrayList<NumbersView> arrayList) {
        
          // pass the context and arrayList for the super 
          // constructor of the ArrayAdapter class
        super(context, 0, arrayList);
    }
  
    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
  
        // convertView which is recyclable view
        View currentItemView = convertView;
  
        // of the recyclable view is null then inflate the custom layout for the same
        if (currentItemView == null) {
            currentItemView = LayoutInflater.from(getContext()).inflate(R.layout.custom_list_view, parent, false);
        }
  
        // get the position of the view from the ArrayAdapter
        NumbersView currentNumberPosition = getItem(position);
  
        // then according to the position of the view assign the desired image for the same
        ImageView numbersImage = currentItemView.findViewById(R.id.imageView);
        assert currentNumberPosition != null;
        numbersImage.setImageResource(currentNumberPosition.getNumbersImageId());
  
        // then according to the position of the view assign the desired TextView 1 for the same
        TextView textView1 = currentItemView.findViewById(R.id.textView1);
        textView1.setText(currentNumberPosition.getNumberInDigit());
  
        // then according to the position of the view assign the desired TextView 2 for the same
        TextView textView2 = currentItemView.findViewById(R.id.textView2);
        textView2.setText(currentNumberPosition.getNumbersInText());
  
        // then return the recyclable view
        return currentItemView;
    }
}

Paso 6: trabajar con el archivo MainActivity.java

• En este caso, es necesario crear una ArrayList personalizada de todos los elementos que son Imagen para ImageView , Texto para TextView 1, Texto para TextView 2.

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // create a arraylist of the type NumbersView
        final ArrayList<NumbersView> arrayList = new ArrayList<NumbersView>();
  
        // add all the values from 1 to 15 to the arrayList
        // the items are of the type NumbersView
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "1", "One"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "2", "Two"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "3", "Three"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "4", "Four"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "5", "Five"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "6", "Six"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "7", "Seven"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "8", "Eight"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "9", "Nine"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "10", "Ten"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "11", "Eleven"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "12", "Twelve"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "13", "Thirteen"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "14", "Fourteen"));
        arrayList.add(new NumbersView(R.drawable.geeks_logo, "15", "Fifteen"));
  
        // Now create the instance of the NumebrsViewAdapter and pass 
          // the context and arrayList created above
        NumbersViewAdapter numbersArrayAdapter = new NumbersViewAdapter(this, arrayList);
  
        // create the instance of the ListView to set the numbersViewAdapter
        ListView numbersListView = findViewById(R.id.listView);
  
        // set the numbersViewAdapter for ListView
        numbersListView.setAdapter(numbersArrayAdapter);
    }
}

Salida: ejecutar en el emulador