Ejemplo simple de Android RecyclerView
He hecho una lista de elementos varias veces usando Android RecyclerView
, pero es un proceso bastante complicado. Revisar uno de los numerosos tutoriales en línea funciona ( esto , esto y esto son buenos), pero estoy buscando un ejemplo básico que puedo copiar y pegar para comenzar a funcionar rápidamente. Sólo son necesarias las siguientes características:
- diseño vertical
- Un único TextView en cada fila
- Responde a eventos de clic
Debido a que he deseado esto varias veces, finalmente decidí dar la respuesta a continuación para mi futura referencia y la suya.
El siguiente es un ejemplo mínimo que se parecerá a la siguiente imagen.
Comience con una actividad vacía. Realizará las siguientes tareas para agregar RecyclerView. Todo lo que necesitas hacer es copiar y pegar el código en cada sección. Posteriormente podrás personalizarlo para que se ajuste a tus necesidades.
- Agregar dependencias a gradle
- Agregue los archivos de diseño xml para la actividad y para la fila RecyclerView
- Haga el adaptador RecyclerView
- Inicialice RecyclerView en su actividad
Actualizar las dependencias de Gradle
Asegúrese de que las siguientes dependencias estén en gradle.build
el archivo de su aplicación:
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'
Puede actualizar los números de versión a la versión más actual . Úselo compile
en lugar de implementation
si todavía está usando Android Studio 2.x.
Crear diseño de actividad
Agregue el RecyclerView
a su diseño xml.
actividad_principal.xml
<?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.support.v7.widget.RecyclerView
android:id="@+id/rvAnimals"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Crear diseño de fila
Cada fila en nuestro RecyclerView
solo tendrá un único TextView
. Cree un nuevo archivo de recursos de diseño.
recicladorview_row.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"
android:padding="10dp">
<TextView
android:id="@+id/tvAnimalName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"/>
</LinearLayout>
Crear el adaptador
Necesita RecyclerView
un adaptador para completar las vistas de cada fila con sus datos. Crea un nuevo archivo java.
MyRecyclerViewAdapter.java
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {
private List<String> mData;
private LayoutInflater mInflater;
private ItemClickListener mClickListener;
// data is passed into the constructor
MyRecyclerViewAdapter(Context context, List<String> data) {
this.mInflater = LayoutInflater.from(context);
this.mData = data;
}
// inflates the row layout from xml when needed
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = mInflater.inflate(R.layout.recyclerview_row, parent, false);
return new ViewHolder(view);
}
// binds the data to the TextView in each row
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
String animal = mData.get(position);
holder.myTextView.setText(animal);
}
// total number of rows
@Override
public int getItemCount() {
return mData.size();
}
// stores and recycles views as they are scrolled off screen
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
TextView myTextView;
ViewHolder(View itemView) {
super(itemView);
myTextView = itemView.findViewById(R.id.tvAnimalName);
itemView.setOnClickListener(this);
}
@Override
public void onClick(View view) {
if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
}
}
// convenience method for getting data at click position
String getItem(int id) {
return mData.get(id);
}
// allows clicks events to be caught
void setClickListener(ItemClickListener itemClickListener) {
this.mClickListener = itemClickListener;
}
// parent activity will implement this method to respond to click events
public interface ItemClickListener {
void onItemClick(View view, int position);
}
}
Notas
- Aunque no es estrictamente necesario, incluí la funcionalidad para escuchar eventos de clic en las filas. Esto estaba disponible en la antigüedad
ListViews
y es una necesidad común. Puede eliminar este código si no lo necesita.
Inicializar RecyclerView en actividad
Agregue el siguiente código a su actividad principal.
Actividad principal.java
public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {
MyRecyclerViewAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// data to populate the RecyclerView with
ArrayList<String> animalNames = new ArrayList<>();
animalNames.add("Horse");
animalNames.add("Cow");
animalNames.add("Camel");
animalNames.add("Sheep");
animalNames.add("Goat");
// set up the RecyclerView
RecyclerView recyclerView = findViewById(R.id.rvAnimals);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
adapter = new MyRecyclerViewAdapter(this, animalNames);
adapter.setClickListener(this);
recyclerView.setAdapter(adapter);
}
@Override
public void onItemClick(View view, int position) {
Toast.makeText(this, "You clicked " + adapter.getItem(position) + " on row number " + position, Toast.LENGTH_SHORT).show();
}
}
Notas
- Observe que la actividad implementa lo
ItemClickListener
que definimos en nuestro adaptador. Esto nos permite manejar eventos de clic en filas en formatoonItemClick
.
Finalizado
Eso es todo. Deberías poder ejecutar tu proyecto ahora y obtener algo similar a la imagen en la parte superior.
Continuando
Agregar un divisor entre filas
Puedes agregar un divisor simple como este.
DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
layoutManager.getOrientation());
recyclerView.addItemDecoration(dividerItemDecoration);
Si quieres algo un poco más complejo, consulta las siguientes respuestas:
- ¿Cómo agregar divisores y espacios entre elementos en RecyclerView?
- Cómo sangrar el divisor en un diseño lineal RecyclerView (es decir, agregar relleno, margen o un recuadro solo a ItemDecoration)
Cambiar el color de la fila al hacer clic
Consulte esta respuesta para saber cómo cambiar el color de fondo y agregar el efecto dominó cuando se hace clic en una fila.
Actualizando filas
Consulte esta respuesta para saber cómo agregar, eliminar y actualizar filas.
Otras lecturas
- Ruta del código
- tutoriales de youtube
- Ejemplo de Android RecyclerView (tutorial de sugerencias de pila)
- RecyclerView en Android: Tutorial
Vista mínima de Recycler lista para usar la plantilla Kotlin para:
- diseño vertical
- Un único TextView en cada fila
- Responde a eventos de clic (Single y LongPress)
Sé que este es un hilo antiguo, así que responda aquí. Agregando esta respuesta para referencia futura:
Agregar vista de reciclaje en la dependencia de compilación
implementation 'com.google.android.material:material:1.4.0-alpha02'
// RecyclerView
implementation "androidx.recyclerview:recyclerview:1.2.0"
Agregue una vista de reciclaje en su diseño
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/wifiList"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
Cree un diseño para mostrar elementos de la lista (list_item.xml)
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:padding="5dp"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/ssid"
android:text="@string/app_name"
android:layout_width="match_parent"
android:textSize="17sp"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
Ahora cree un Adaptador mínimo para contener datos, el código aquí se explica por sí mismo
class WifiAdapter(private val wifiList: ArrayList<ScanResult>) : RecyclerView.Adapter<WifiAdapter.ViewHolder>() {
// holder class to hold reference
inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
//get view reference
var ssid: TextView = view.findViewById(R.id.ssid) as TextView
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
// create view holder to hold reference
return ViewHolder( LayoutInflater.from(parent.context).inflate(R.layout.list_item, parent, false))
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
//set values
holder.ssid.text = wifiList[position].SSID
}
override fun getItemCount(): Int {
return wifiList.size
}
// update your data
fun updateData(scanResult: ArrayList<ScanResult>) {
wifiList.clear()
notifyDataSetChanged()
wifiList.addAll(scanResult)
notifyDataSetChanged()
}
}
Agregue esta clase para manejar eventos de clic único y clic largo en elementos de lista
import android.content.Context;
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.RecyclerView.OnItemTouchListener
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
public class RecyclerTouchListener implements RecyclerView.OnItemTouchListener {
public interface ClickListener {
void onClick(View view, int position);
void onLongClick(View view, RecyclerView recyclerView, int position);
}
private GestureDetector gestureDetector;
private ClickListener clickListener;
public RecyclerTouchListener(Context context, final RecyclerView recyclerView, final ClickListener clickListener) {
this.clickListener = clickListener;
gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onSingleTapUp(MotionEvent e) {
return true;
}
@Override
public void onLongPress(MotionEvent e) {
View child = recyclerView.findChildViewUnder(e.getX(), e.getY());
if (child != null && clickListener != null) {
clickListener.onLongClick(child,recyclerView, recyclerView.getChildPosition(child));
}
}
});
}
@Override
public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
View child = rv.findChildViewUnder(e.getX(), e.getY());
if (child != null && clickListener != null && gestureDetector.onTouchEvent(e)) {
clickListener.onClick(child, rv.getChildPosition(child));
}
return false;
}
@Override
public void onTouchEvent(RecyclerView rv, MotionEvent e) {
}
@Override
public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
}
Por último, configure su adaptador en Recycler View y agregue Touch Listener para comenzar a interceptar eventos táctiles con un toque simple o doble en los elementos de la lista.
wifiAdapter = WifiAdapter(ArrayList())
wifiList.apply {
// vertical layout
layoutManager = LinearLayoutManager(applicationContext)
// set adapter
adapter = wifiAdapter
// Touch handling
wifiList.addOnItemTouchListener(RecyclerTouchListener(applicationContext, wifiList, object : RecyclerTouchListener.ClickListener {
override fun onClick(view: View?, position: Int) {
Toast.makeText(applicationContext, "RV OnCLickj " + position, Toast.LENGTH_SHORT).show()
}
override fun onLongClick(view: View, recyclerView: RecyclerView, position: Int) {
Toast.makeText(applicationContext, "RV OnLongCLickj " + position, Toast.LENGTH_SHORT).show()
}
}
))
}
Bonificación : actualizar datos
wifiAdapter.updateData(mScanResults as ArrayList<ScanResult>)
Resultado:
Esta será la versión más simple de la implementación de RecyclerView.
actividad_principal.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recycler_view"/>
</FrameLayout>
lista_item_view.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="46dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textview"
android:text="TextView"
android:textSize="16dp" />
</LinearLayout>
Adaptador personalizado.java
public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder> {
private List<String> data;
public CustomAdapter (List<String> data){
this.data = data;
}
@Override
public CustomAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View rowItem = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_view, parent, false);
return new ViewHolder(rowItem);
}
@Override
public void onBindViewHolder(CustomAdapter.ViewHolder holder, int position) {
holder.textView.setText(this.data.get(position));
}
@Override
public int getItemCount() {
return this.data.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
private TextView textView;
public ViewHolder(View view) {
super(view);
view.setOnClickListener(this);
this.textView = view.findViewById(R.id.textview);
}
@Override
public void onClick(View view) {
Toast.makeText(view.getContext(), "position : " + getLayoutPosition() + " text : " + this.textView.getText(), Toast.LENGTH_SHORT).show();
}
}
}
Actividad principal.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.setAdapter(new CustomAdapter(generateData()));
recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
}
private List<String> generateData() {
List<String> data = new ArrayList<>();
for (int i = 0; i < 100; i++) {
data.add(String.valueOf(i) + "th Element");
}
return data;
}
}