RecyclerView es una versión más flexible y avanzada de ListView y GridView . RecyclerView se usa para proporcionar una ventana limitada a un gran conjunto de datos, lo que significa que se usa para mostrar una gran cantidad de datos que se pueden desplazar de manera muy eficiente al mantener un número limitado de vistas. En RecyclerView proporcionamos datos y definimos cómo se ve cada elemento, y la biblioteca RecyclerView crea dinámicamente el contenido cuando es necesario. RecyclerView se introdujo en Material Design en Android 5.0 (nivel de API 21.0).
¿Cómo funciona RecyclerView?
- RecyclerView es un ViewGroup que contiene Vistas correspondientes a sus datos. Es en sí mismo una vista, por lo que se agrega al archivo de diseño como se agrega cualquier otro elemento de la interfaz de usuario.
- ViewHolder Object se usa para definir cada elemento individual en la lista. El titular de la vista no contiene nada cuando se creó, RecyclerView le vincula los datos. ViewHolder se define al extender RecyclerView.ViewHolder .
- Los adaptadores se utilizan para vincular datos a las Vistas. RecyclerView solicita vistas y vincula las vistas a sus datos llamando a métodos en el adaptador. El adaptador se puede definir extendiendo RecyclerView.Adapter .
- LayoutManager organiza los elementos individuales en la lista. Contiene la referencia de todas las vistas que se llenan con los datos de la entrada.
La clase LayoutManager de RecyclerView proporciona tres tipos de LayoutManagers integrados
- LinearLayoutManager: se utiliza para mostrar la lista horizontal y vertical
- GridLayoutManager: se utiliza para mostrar elementos en forma de cuadrículas
- StaggeredGridLayoutManager: se utiliza para mostrar elementos en forma de cuadrículas escalonadas
Ejemplo
En este ejemplo, vamos a utilizar RecyclerView como ListView. Aquí, vamos a mostrar la lista de cursos con sus imágenes como una lista vertical usando RecyclerView.
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 Java como lenguaje de programación.
Paso 2: agregar dependencia
Vamos a utilizar RecyclerView como ListView. Entonces, necesitamos agregar la dependencia para ello. Para agregar la dependencia, vaya a Gradle Scripts > build.gradle(Module: app) y agregue la siguiente dependencia. Después de agregar la dependencia, haga clic en Sincronizar ahora .
dependencias {
implementación «androidx.recyclerview:recyclerview:1.1.0»
}
Antes de continuar, agreguemos algunos atributos de color para mejorar la barra de la aplicación. Vaya a aplicación > res > valores > colores.xml y agregue los siguientes atributos de color.
XML
<resources> <color name="colorPrimary">#0F9D58</color> <color name="colorPrimaryDark">#16E37F</color> <color name="colorAccent">#03DAC5</color> </resources>
Paso 3: trabajar con el archivo activity_main.xml
En este paso, agregaremos un RecyclerView a nuestro archivo activity_main.xml que se usa para mostrar datos de listItems. Vaya a la aplicación > res > diseño > actividad_principal.xml y el siguiente fragmento de código.
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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"> <!--RecyclerView--> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>
Paso 4: Cree un nuevo archivo de diseño list_item.xml
En este paso, crearemos un nuevo archivo de diseño para la vista de elemento de lista única. Vaya a app > res > layout > haga clic con el botón derecho en > New > Layout Resource File y asígnele el nombre list_item . list_item.xml contiene un ImageView y un TextView que se utilizan para completar el RecyclerView.
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <!--For image src we have used ic_launcher and for text "courseName" they are used only for reference how it will looks"--> <ImageView android:id="@+id/courseImg" android:layout_width="72dp" android:layout_height="72dp" android:padding="8dp" android:src="@mipmap/ic_launcher_round" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center"> <TextView android:id="@+id/courseName" android:text="courseName" android:textStyle="bold" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout>
Paso 5: crea una nueva clase de adaptador
Ahora, crearemos una clase de adaptador que actúe como puente entre el componente de la interfaz de usuario y la fuente de datos, es decir, CourseImg, CourseName y RecyclerView. Vaya a la aplicación> java> paquete> haga clic con el botón derecho y cree una nueva clase java y asígnele el nombre Adaptador . A continuación se muestra el fragmento de código que se proporciona para ello.
Java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
// Extends the Adapter class to RecyclerView.Adapter
// and implement the unimplemented methods
public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
ArrayList courseImg, courseName;
Context context;
// Constructor for initialization
public Adapter(Context context, ArrayList courseImg, ArrayList courseName) {
this.context = context;
this.courseImg = courseImg;
this.courseName = courseName;
}
@NonNull
@Override
public Adapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// Inflating the Layout(Instantiates list_item.xml
// layout file into View object)
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
// Passing view to ViewHolder
Adapter.ViewHolder viewHolder = new Adapter.ViewHolder(view);
return viewHolder;
}
// Binding data to the into specified position
@Override
public void onBindViewHolder(@NonNull Adapter.ViewHolder holder, int position) {
// TypeCast Object to int type
int res = (int) courseImg.get(position);
holder.images.setImageResource(res);
holder.text.setText((String) courseName.get(position));
}
@Override
public int getItemCount() {
// Returns number of items
// currently available in Adapter
return courseImg.size();
}
// Initializing the Views
public class ViewHolder extends RecyclerView.ViewHolder {
ImageView images;
TextView text;
public ViewHolder(View view) {
super(view);
images = (ImageView) view.findViewById(R.id.courseImg);
text = (TextView) view.findViewById(R.id.courseName);
}
}
}
Paso 6: trabajar con el archivo MainActivity
En la clase MainActivity.java creamos dos ArrayList para almacenar CourseImg y CourseName. Estas imágenes se colocan en la carpeta dibujable ( aplicación > res > dibujable ). Puede usar cualquier imagen en lugar de estas. Y luego obtenemos la referencia RecyclerView y configuramos LayoutManager como LinearLayoutManager y Adapter, para mostrar elementos en RecyclerView. A continuación se muestra el código del archivo MainActivity.java.
Java
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import java.util.ArrayList;
import java.util.Arrays;
public class MainActivity extends AppCompatActivity {
RecyclerView recyclerView;
// Using ArrayList to store images data
ArrayList courseImg = new ArrayList<>(Arrays.asList(R.drawable.data_structure, R.drawable.c_plus_plus,
R.drawable.c_hash, R.drawable.java_script,
R.drawable.java, R.drawable.c,
R.drawable.html, R.drawable.css));
ArrayList courseName = new ArrayList<>(Arrays.asList("Data Structure", "C++", "C#", "JavaScript", "Java",
"C-Language", "HTML 5", "CSS"));
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Getting reference of recyclerView
recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
// Setting the layout as linear
// layout for vertical orientation
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext());
recyclerView.setLayoutManager(linearLayoutManager);
// Sending reference and data to Adapter
Adapter adapter = new Adapter(MainActivity.this, courseImg, courseName);
// Setting Adapter to RecyclerView
recyclerView.setAdapter(adapter);
}
}
Salida: ejecutar en el emulador
