En el artículo Android RecyclerView en Kotlin , se demuestra cómo implementar RecyclerView en Android. Pero en el caso de la experiencia del usuario, los elementos deben distinguirse con el divisor y el relleno y los márgenes adecuados en cada elemento. En este caso, RecyclerView ItemDecoration entra en escena. Entonces, en esto se ha demostrado cómo usar RecyclerView ItemDecoration y usar los divisores y divisores personalizados entre RecyclerView Items. Eche un vistazo a la siguiente imagen para obtener una descripción general de toda la discusión.
Crear un proyecto de actividad vacío
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .
Agregar dependencia requerida
Incluya la dependencia de componentes de diseño de materiales de Google en el archivo build.gradle . Después de agregar las dependencias, no olvide hacer clic en el botón «Sincronizar ahora» presente en la esquina superior derecha.
implementación «androidx.recyclerview:recyclerview:1.2.1»
Tenga en cuenta que mientras sincroniza el proyecto, debe estar conectado a la red y asegúrese de agregar la dependencia al archivo Gradle de nivel de aplicación como se muestra a continuación.
Pasos para implementar la decoración de artículos en RecyclerView
Paso 1: trabajar con el archivo activity_main.xml
El diseño principal del proyecto contiene un RecyclerView para fines de demostración. Para implementar lo mismo, invoque el siguiente código dentro del archivo activity_main.xml.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Antes de ir a la salida, debemos completar el RecyclerView con los datos. Entonces, ahora debemos trabajar con el adaptador RecyclerView y una vista personalizada para RecyclerView.
Paso 2: Cree una vista personalizada para RecyclerView
La vista personalizada para RecyclerView contiene un ícono simple a la izquierda y dos TextViews . Para implementar lo mismo, cree un archivo llamado recycler_data_view.xml dentro de la carpeta de diseño e invoque el siguiente código.
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="wrap_content" android:padding="16dp"> <ImageView android:id="@+id/imageView" android:layout_width="54dp" android:layout_height="54dp" android:src="@drawable/ic_android" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/tvNumber" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:textSize="24sp" android:textStyle="bold" app:layout_constraintBottom_toTopOf="@+id/tvNumbersInText" app:layout_constraintStart_toEndOf="@+id/imageView" app:layout_constraintTop_toTopOf="parent" tools:text="1" /> <TextView android:id="@+id/tvNumbersInText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="@+id/tvNumber" app:layout_constraintTop_toBottomOf="@+id/tvNumber" tools:text="One" /> </androidx.constraintlayout.widget.ConstraintLayout>
La vista personalizada anterior produce el siguiente resultado para cada elemento de la lista:
Paso 3: crear una clase de datos para RecyclerView
Ahora crea los datos para la vista personalizada anterior creando una clase de datos, usando el siguiente código.
Kotlin
data class RecyclerViewData( val text1: String, val text2: String )
Paso 4: Creación del adaptador RecyclerView
El siguiente código debe invocarse en una clase separada creando la clase denominada MyRecyclerAdapter.
Kotlin
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
class MyRecyclerViewAdapter(private val items: List<RecyclerViewData>) :
RecyclerView.Adapter<MyRecyclerViewAdapter.MyRecyclerViewDataHolder>() {
inner class MyRecyclerViewDataHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyRecyclerViewDataHolder {
val view: View =
LayoutInflater.from(parent.context).inflate(R.layout.recycler_data_view, parent, false)
return MyRecyclerViewDataHolder(view)
}
override fun onBindViewHolder(holder: MyRecyclerViewDataHolder, position: Int) {
val currentItem: RecyclerViewData = items[position]
val tvNumber: TextView = holder.itemView.findViewById(R.id.tvNumber)
tvNumber.text = currentItem.text1
val tvNumbersInText: TextView = holder.itemView.findViewById(R.id.tvNumbersInText)
tvNumbersInText.text = currentItem.text2
}
override fun getItemCount(): Int {
return items.size
}
}
Paso 5: trabajar con el archivo MainActivity.kt
En esta clase, tenemos que crear algunos datos de muestra para RecyclerView en forma de lista. Para implementar lo mismo, invoque el siguiente código dentro del archivo MainActivity.kt (se agregan comentarios para una mejor comprensión).
Kotlin
package com.adityamshidlyali.gfgautohidefab
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// create instance of RecyclerView
// and register with the appropriate ID
val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
// create list of RecyclerViewData
var recyclerViewData = listOf<RecyclerViewData>()
recyclerViewData = recyclerViewData + RecyclerViewData("1", "One")
recyclerViewData = recyclerViewData + RecyclerViewData("2", "Two")
recyclerViewData = recyclerViewData + RecyclerViewData("3", "Three")
recyclerViewData = recyclerViewData + RecyclerViewData("4", "Four")
recyclerViewData = recyclerViewData + RecyclerViewData("5", "Five")
recyclerViewData = recyclerViewData + RecyclerViewData("6", "Six")
recyclerViewData = recyclerViewData + RecyclerViewData("7", "Seven")
recyclerViewData = recyclerViewData + RecyclerViewData("8", "Eight")
recyclerViewData = recyclerViewData + RecyclerViewData("9", "Nine")
recyclerViewData = recyclerViewData + RecyclerViewData("10", "Ten")
recyclerViewData = recyclerViewData + RecyclerViewData("11", "Eleven")
recyclerViewData = recyclerViewData + RecyclerViewData("12", "Twelve")
recyclerViewData = recyclerViewData + RecyclerViewData("13", "Thirteen")
recyclerViewData = recyclerViewData + RecyclerViewData("14", "Fourteen")
recyclerViewData = recyclerViewData + RecyclerViewData("15", "Fifteen")
// create a vertical layout manager
val layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)
// create instance of MyRecyclerViewAdapter
val myRecyclerViewAdapter = MyRecyclerViewAdapter(recyclerViewData)
// attach the adapter to the recycler view
recyclerView.adapter = myRecyclerViewAdapter
// also attach the layout manager
recyclerView.layoutManager = layoutManager
// make the adapter the data set
// changed for the recycler view
myRecyclerViewAdapter.notifyDataSetChanged()
}
}
Producción:
Crear el divisor predeterminado para los elementos en RecyclerView
Tenemos que crear un divisor predeterminado usando el método addItemDecoration() con la instancia de RecyclerView, necesitamos pasar la instancia de ItemDecoration (en este caso es DividerItemDecoration() ) y la orientación del LayoutManager (en este caso es vertical) del vista del reciclador. Para implementar lo mismo, invoque el siguiente código dentro del archivo MainActivity.kt (se agregan comentarios para una mejor comprensión).
Kotlin
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.DividerItemDecoration
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// create instance of RecyclerView and register with the appropriate ID
val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
// create list of RecyclerViewData
var recyclerViewData = listOf<RecyclerViewData>()
recyclerViewData = recyclerViewData + RecyclerViewData("1", "One")
recyclerViewData = recyclerViewData + RecyclerViewData("2", "Two")
recyclerViewData = recyclerViewData + RecyclerViewData("3", "Three")
recyclerViewData = recyclerViewData + RecyclerViewData("4", "Four")
recyclerViewData = recyclerViewData + RecyclerViewData("5", "Five")
recyclerViewData = recyclerViewData + RecyclerViewData("6", "Six")
recyclerViewData = recyclerViewData + RecyclerViewData("7", "Seven")
recyclerViewData = recyclerViewData + RecyclerViewData("8", "Eight")
recyclerViewData = recyclerViewData + RecyclerViewData("9", "Nine")
recyclerViewData = recyclerViewData + RecyclerViewData("10", "Ten")
recyclerViewData = recyclerViewData + RecyclerViewData("11", "Eleven")
recyclerViewData = recyclerViewData + RecyclerViewData("12", "Twelve")
recyclerViewData = recyclerViewData + RecyclerViewData("13", "Thirteen")
recyclerViewData = recyclerViewData + RecyclerViewData("14", "Fourteen")
recyclerViewData = recyclerViewData + RecyclerViewData("15", "Fifteen")
// create a vertical layout manager
val layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)
// create instance of MyRecyclerViewAdapter
val myRecyclerViewAdapter = MyRecyclerViewAdapter(recyclerViewData)
// attach the adapter to the recycler view
recyclerView.adapter = myRecyclerViewAdapter
// also attach the layout manager
recyclerView.layoutManager = layoutManager
// call the method addItemDecoration with the
// recyclerView instance and add default Item Divider
recyclerView.addItemDecoration(
DividerItemDecoration(
baseContext,
layoutManager.orientation
)
)
// make the adapter the data set
// changed for the recycler view
myRecyclerViewAdapter.notifyDataSetChanged()
}
}
Producción:
Ahora creando un divisor personalizado para elementos RecyclerView
Si el divisor necesita ser personalizado, entonces es necesario crear nuestra propia forma en la carpeta dibujable. Así que aquí la forma es un rectángulo con una altura de 2dp y el color verde. Para implementar la misma forma, invoque el siguiente código dentro del archivo divider.xml y cree este archivo dentro de la carpeta dibujable.
XML
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <size android:height="2dp" /> <solid android:color="@color/green_500" /> </shape>
Ahora necesitamos crear nuestra propia clase ItemDecoration y anular el método onDraw() . Este método se llama una vez y este método decide dónde se debe dibujar el divisor y cómo dibujarlo. Una cosa importante aquí es no agregar el divisor para el primer y el último elemento. Para implementar lo mismo, invoque el siguiente código dentro del archivo RecyclerViewItemDecoration.kt (se agregan comentarios para una mejor comprensión).
Kotlin
import android.content.Context
import android.graphics.Canvas
import android.graphics.drawable.Drawable
import android.view.View
import androidx.core.content.ContextCompat
import androidx.recyclerview.widget.RecyclerView
class RecyclerViewItemDecoration(
context: Context,
resId: Int
) : RecyclerView.ItemDecoration() {
private var mDivider: Drawable = ContextCompat.getDrawable(context, resId)!!
override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
super.onDraw(c, parent, state)
// left margin for the divider
val dividerLeft: Int = 32
// right margin for the divider with
// reference to the parent width
val dividerRight: Int = parent.width - 32
// this loop creates the top and bottom
// divider for each items in the RV
// as each items are different
for (i in 0 until parent.childCount) {
// this condition is because the last
// and the first items in the RV have
// no dividers in the list
if (i != parent.childCount - 1) {
val child: View = parent.getChildAt(i)
val params = child.layoutParams as RecyclerView.LayoutParams
// calculating the distance of the
// divider to be drawn from the top
val dividerTop: Int = child.bottom + params.bottomMargin
val dividerBottom: Int = dividerTop + mDivider.intrinsicHeight
mDivider.setBounds(dividerLeft, dividerTop, dividerRight, dividerBottom)
mDivider.draw(c)
}
}
}
}
Ahora, este ItemDecoration personalizado debe adjuntarse a la vista del reciclador. Así que ahora estamos trabajando con el archivo MainActivity.kt, donde necesitamos pasar la instancia de la clase personalizada ItemDecoration (en este caso, RecyclerViewItemDecoration). Para implementar lo mismo, invoque el siguiente código dentro del archivo MainActivity.kt.
Kotlin
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.DividerItemDecoration
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// create instance of RecyclerView and register with the appropriate ID
val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
// create list of RecyclerViewData
var recyclerViewData = listOf<RecyclerViewData>()
recyclerViewData = recyclerViewData + RecyclerViewData("1", "One")
recyclerViewData = recyclerViewData + RecyclerViewData("2", "Two")
recyclerViewData = recyclerViewData + RecyclerViewData("3", "Three")
recyclerViewData = recyclerViewData + RecyclerViewData("4", "Four")
recyclerViewData = recyclerViewData + RecyclerViewData("5", "Five")
recyclerViewData = recyclerViewData + RecyclerViewData("6", "Six")
recyclerViewData = recyclerViewData + RecyclerViewData("7", "Seven")
recyclerViewData = recyclerViewData + RecyclerViewData("8", "Eight")
recyclerViewData = recyclerViewData + RecyclerViewData("9", "Nine")
recyclerViewData = recyclerViewData + RecyclerViewData("10", "Ten")
recyclerViewData = recyclerViewData + RecyclerViewData("11", "Eleven")
recyclerViewData = recyclerViewData + RecyclerViewData("12", "Twelve")
recyclerViewData = recyclerViewData + RecyclerViewData("13", "Thirteen")
recyclerViewData = recyclerViewData + RecyclerViewData("14", "Fourteen")
recyclerViewData = recyclerViewData + RecyclerViewData("15", "Fifteen")
// create a vertical layout manager
val layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)
// create instance of MyRecyclerViewAdapter
val myRecyclerViewAdapter = MyRecyclerViewAdapter(recyclerViewData)
// attach the adapter to the recycler view
recyclerView.adapter = myRecyclerViewAdapter
// also attach the layout manager
recyclerView.layoutManager = layoutManager
// call the method addItemDecoration with the
// recyclerView instance and pass custom ItemDecoration instance
recyclerView.addItemDecoration(RecyclerViewItemDecoration(this, R.drawable.divider))
// make the adapter the data set changed
// for the recycler view
myRecyclerViewAdapter.notifyDataSetChanged()
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por adityamshidlyali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA