Crear casilla de verificación para cada elemento en ListView en Android

Un ListView en Android es un elemento de la interfaz de usuario que se usa para mostrar una lista de elementos del código principal con el uso de un adaptador de array. Otras vistas similares requieren diseños separados para mostrar los datos. Mientras que ListView tiene diseños de elementos predeterminados disponibles debido a los cuales no se debe crear un diseño separado. Sin embargo, todos estos diseños solo admiten TextView, por lo que no se pueden agregar otros elementos de la interfaz de usuario. A continuación se muestra una imagen de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin .

Entonces, en este artículo, le mostraremos cómo puede agregar un CheckBox en el diseño del elemento ListView en Android. Siga los pasos a continuación una vez que el IDE esté listo.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Agregue un ListView como se muestra a continuación.

<?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">
  
    <ListView
        android:id="@+id/list_view_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
  
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 3: Cree un diseño para el archivo raw_item.xml del elemento ListView

Vaya a la aplicación > res > diseño y cree un nuevo diseño de recursos de Android haciendo clic con el botón derecho en la carpeta de diseño y seleccionando la opción adecuada. Llamamos a este archivo raw_item.xml . Ahora agregue un TextView y un CheckBox en este diseño como se muestra a continuación.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="2dp">
    
    <TextView
        android:id="@+id/txtName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:textColor="@android:color/background_dark"
        android:textSize="16sp" />
    
    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />
    
</RelativeLayout>

Paso 4: Cree una clase de elemento DataModel.kt

Cree una nueva clase de Kotlin para definir el objeto modelo como se muestra a continuación.

package org.geeksforgeeks.checkboxinlistview
  
class DataModel internal constructor(var name: String?, var checked: Boolean)

Paso 5: Cree un adaptador para la vista de lista CustomAdapter.kt

Cree un nuevo archivo Kotlin para desarrollar un adaptador. El nombre de este archivo es CustomAdapter.kt . El adaptador se usa para mostrar objetos DataModel en ListView. A continuación se muestra el código para el adaptador personalizado.

package org.geeksforgeeks.checkboxinlistview
  
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.CheckBox
import android.widget.TextView
  
class CustomAdapter(private val dataSet: ArrayList<*>, mContext: Context) :
    ArrayAdapter<Any?>(mContext, R.layout.raw_item, dataSet) {
    private class ViewHolder {
        lateinit var txtName: TextView
        lateinit var checkBox: CheckBox
    }
      
    override fun getCount(): Int {
        return dataSet.size
    }
      
    override fun getItem(position: Int): DataModel {
        return dataSet[position] as DataModel
    }
      
    override fun getView(
        position: Int,
        convertView: View?,
        parent: ViewGroup
    ): View {
        var convertView = convertView
        val viewHolder: ViewHolder
        val result: View
        if (convertView == null) {
            viewHolder = ViewHolder()
            convertView =
                LayoutInflater.from(parent.context).inflate(R.layout.raw_item, parent, false)
            viewHolder.txtName =
                convertView.findViewById(R.id.txtName)
            viewHolder.checkBox =
                convertView.findViewById(R.id.checkBox)
            result = convertView
            convertView.tag = viewHolder
        } else {
            viewHolder = convertView.tag as ViewHolder
            result = convertView
        }
          
        val item: DataModel = getItem(position)
        viewHolder.txtName.text = item.name
        viewHolder.checkBox.isChecked = item.checked
        return result
    }
}

Paso 6: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

package org.geeksforgeeks.checkboxinlistview
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.AdapterView
import android.widget.ListView
  
class MainActivity : AppCompatActivity() {
  
     // Declaring the DataModel Array
      private var dataModel: ArrayList<DataModel>? = null
    
    // Declaring the elements from the main layout file
    private lateinit var listView: ListView
    private lateinit var adapter: CustomAdapter
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Initializing the elements from the main layout file
        listView = findViewById<View>(R.id.list_view_1) as ListView
        
        // Initializing the model and adding data
        // False = not checked; True = checked
        dataModel = ArrayList<DataModel>()
        dataModel!!.add(DataModel("Apple Pie", false))
        dataModel!!.add(DataModel("Banana Bread", false))
        dataModel!!.add(DataModel("Cupcake", false))
        dataModel!!.add(DataModel("Donut", true))
        dataModel!!.add(DataModel("Eclair", true))
        dataModel!!.add(DataModel("Froyo", true))
        dataModel!!.add(DataModel("Gingerbread", true))
        dataModel!!.add(DataModel("Honeycomb", false))
        dataModel!!.add(DataModel("Ice Cream Sandwich", false))
        dataModel!!.add(DataModel("Jelly Bean", false))
        dataModel!!.add(DataModel("Kitkat", false))
        dataModel!!.add(DataModel("Lollipop", false))
        dataModel!!.add(DataModel("Marshmallow", false))
        dataModel!!.add(DataModel("Nougat", false))
          
        // Setting the adapter
        adapter = CustomAdapter(dataModel!!, applicationContext)
        listView.adapter = adapter
        
          // Upon item click, checkbox will be set to checked
        listView.onItemClickListener = AdapterView.OnItemClickListener { _, _, position, _ ->
            val dataModel: DataModel = dataModel!![position] as DataModel
            dataModel.checked = !dataModel.checked
            adapter.notifyDataSetChanged()
        }
    }
}

Producción:

Al hacer clic en el elemento, se comprobará el elemento.