XML que mejora la eficiencia de ListViews y GridViews En este artículo, explicaremos cómo crear elementos de vista de reciclador expandible en Android. A continuación se muestra el video de muestra para mostrar lo que vamos a construir. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin .
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 . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.
Paso 2: Agregar dependencia de enlace de vista
Vaya a build.gradle (aplicación) y la siguiente dependencia dentro de la etiqueta de Android y haga clic en sincronizar ahora.
construir características {
viewBinding true
}
Paso 3: Trabajando con activity_main.xml
Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.xml . Solo tiene una vista de Reciclador que usaremos para mostrar nuestros datos.
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:background="#F5F8FD" android:layout_height="match_parent" tools:context=".MainActivity"> <!--Add recycler view to main activity--> <androidx.recyclerview.widget.RecyclerView android:id="@+id/rv_list" android:layout_width="match_parent" android:layout_height="match_parent" tools:listitem="@layout/single_item" app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" /> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 4: Cree un nuevo archivo de diseño y llámelo como archivo single_item.xml
Vaya al archivo single_item.xml y consulte el siguiente código. A continuación se muestra el código para el archivo single_item.xml . Es el diseño de elemento único que usaremos en RecyclerView.
XML
<?xml version="1.0" encoding="utf-8"?> <com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/card_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="5dp" android:layout_marginEnd="5dp" android:layout_marginBottom="10dp"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!--Text view for showing the language name--> <TextView android:id="@+id/tv_lang_name" android:layout_width="wrap_content" android:layout_height="40dp" android:layout_marginStart="20dp" android:layout_marginTop="10dp" android:text="Language" android:textColor="@color/black" android:textSize="20sp" android:textStyle="bold" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <!--This is the layout "expanded_view" we will hide initially and show as expanded layout when user clicks on any of the item--> <RelativeLayout android:id="@+id/expanded_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/tv_lang_name"> <!--It has a text view which we will use in our case as a description text for the languages--> <TextView android:id="@+id/tv_description" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="Description Text" android:textSize="18sp" /> </RelativeLayout> </androidx.constraintlayout.widget.ConstraintLayout> </com.google.android.material.card.MaterialCardView>
Paso 5: Crea una nueva clase modelo
Cree una nueva clase Language.kt. Usaremos datos de » Idioma » genérico personalizado para pasar la lista que se mostrará en RecyclerView.
Kotlin
// this is the Language model class class Language( val name : String ="", val description : String= "", var expand : Boolean = false )
Paso 6: trabajar con la clase de adaptador
Cree una nueva clase RvAdapter.kt que actuará como una clase de adaptador para la vista del reciclador. La lógica detrás de la vista del reciclador expandible es que, inicialmente, haremos que la visibilidad del diseño con id » vista_expandida » de » elemento_único.xm l» se haya IDO y una vez que el usuario haga clic en cualquier elemento de la vista del reciclador, haremos que su visibilidad sea VISIBLE. Los comentarios se agregan antes del código para una mejor comprensión.
Kotlin
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.geeksforgeeks.rvadapterviewbinding.databinding.SingleItemBinding
class RvAdapter(
private var languageList: List<Language>
) : RecyclerView.Adapter<RvAdapter.ViewHolder>() {
// create an inner class with name ViewHolder
// It takes a view argument, in which pass the generated class of single_item.xml
// ie SingleItemBinding and in the RecyclerView.ViewHolder(binding.root) pass it like this
inner class ViewHolder(val binding: SingleItemBinding) : RecyclerView.ViewHolder(binding.root)
// inside the onCreateViewHolder inflate the view of SingleItemBinding
// and return new ViewHolder object containing this layout
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val binding = SingleItemBinding.inflate(LayoutInflater.from(parent.context), parent, false)
return ViewHolder(binding)
}
// bind the items with each item of the list languageList which than will be
// shown in recycler view
// to keep it simple we are not setting any image data to view
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
with(holder){
with(languageList[position]){
// set name of the language from the list
binding.tvLangName.text = this.name
// set description to the text
// since this is inside "expandedView" its visibility will be gone initially
// after click on the item we will make the visibility of the "expandedView" visible
// which will also make the visibility of desc also visible
binding.tvDescription.text = this.description
// check if boolean property "extend" is true or false
// if it is true make the "extendedView" Visible
binding.expandedView.visibility = if (this.expand) View.VISIBLE else View.GONE
// on Click of the item take parent card view in our case
// revert the boolean "expand"
binding.cardLayout.setOnClickListener {
this.expand = !this.expand
notifyDataSetChanged()
}
}
}
}
// return the size of languageList
override fun getItemCount(): Int {
return languageList.size
}
}
Paso 7: Trabajar con 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.
Kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import com.geeksforgeeks.rvadapterviewbinding.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
// view binding for the activity
private var _binding: ActivityMainBinding? = null
private val binding get() = _binding!!
// get reference to the adapter class
private var languageList = ArrayList<Language>()
private lateinit var rvAdapter: RvAdapter
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
_binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
// define layout manager for the Recycler view
binding.rvList.layoutManager = LinearLayoutManager(this)
// attach adapter to the recycler view
rvAdapter = RvAdapter(languageList)
binding.rvList.adapter = rvAdapter
// create new objects
// add some row data
val language1 = Language(
"Java",
"Java is an Object Oriented Programming language." +
" Java is used in all kind of applications like Mobile Applications (Android is Java based), " +
"desktop applications, web applications, client server applications, enterprise applications and many more. ",
false
)
val language2 = Language(
"Kotlin",
"Kotlin is a statically typed, general-purpose programming language" +
" developed by JetBrains, that has built world-class IDEs like IntelliJ IDEA, PhpStorm, Appcode, etc.",
false
)
val language3 = Language(
"Python",
"Python is a high-level, general-purpose and a very popular programming language." +
" Python programming language (latest Python 3) is being used in web development, Machine Learning applications, " +
"along with all cutting edge technology in Software Industry.",
false
)
val language4 = Language(
"CPP",
"C++ is a general purpose programming language and widely used now a days for " +
"competitive programming. It has imperative, object-oriented and generic programming features. ",
false
)
// add items to list
languageList.add(language1)
languageList.add(language2)
languageList.add(language3)
languageList.add(language4)
rvAdapter.notifyDataSetChanged()
}
// on destroy of view make the binding reference to null
override fun onDestroy() {
super.onDestroy()
_binding = null
}
}
Producción:
Github Repo aquí .