Ejemplo simple de red de Android con RecyclerView con GridLayoutManager (como el GridView antiguo)
Sé que RecyclerView
ha reemplazado la funcionalidad de los antiguos ListView
y GridView
. Estoy buscando un ejemplo muy básico que muestra una configuración mínima de la cuadrícula con RecyclerView
. No estoy buscando largas explicaciones de estilo tutorial, sólo un ejemplo mínimo. Me imagino que la cuadrícula más simple que imita el antiguo GridView consistiría en las siguientes características:
- Varias celdas por fila
- Vista única en cada celda
- Responde a eventos de clic
- RecyclerView: resalta el elemento seleccionado
- Facebook NativeAdsManager saliendo de la excepción de memoria en RecyclerView
- Configurar RecyclerView para trabajar como chat
- ¿Por qué usar estática con RecyclerView.ViewHolder
- Android: Control Desplazamiento suave sobre la vista del reciclador
- Ordenar los elementos de una visita de reciclaje mediante arrastrar y soltar
- RecyclerView BackgroundColor
- La lista de arreglos de Android RecyclerView cambia dinámicamente
- Imagen parpadeando mientras se desplaza en RecyclerView
- ¿Cómo puedo dibujar ItemDecoration correctamente cuando el elemento RecyclerView está animando su altura?
- El uso del ejemplo de RecyclerView no compila
- RecyclerView GridLayoutManager con el encabezado de ancho completo
- ¿Cómo agregar un simple encabezado 8dp / pie de página a RecyclerView de Android?
El siguiente es un ejemplo mínimo que se verá como la imagen de abajo.
Comience con una actividad vacía. Realizaremos las siguientes tareas para agregar la cuadrícula de RecyclerView
. Todo lo que necesitas hacer es copiar y pegar el código en cada sección. Más adelante usted puede modificarlo para requisitos particulares para caber sus necesidades.
- Añadir dependencias a gradle
- Agregue los archivos de diseño xml para la actividad y para la celda de cuadrícula
- Hacer el adaptador RecyclerView
- Inicialice el RecyclerView en su actividad
Actualizar las dependencias de Gradle
Asegúrese de que las siguientes dependencias se encuentren en su archivo gradle.build
:
compile 'com.android.support:appcompat-v7:25.0.0' compile 'com.android.support:recyclerview-v7:25.0.0'
Puede actualizar los números de versión a lo que sea más actual .
Crear un diseño de actividad
Agregue el RecyclerView
a su diseño xml.
Activity_main.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/rvNumbers" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>
Crear un diseño de celda de cuadrícula
Cada celda en nuestra cuadrícula de RecyclerView
sólo va a tener un único TextView
. Cree un nuevo archivo de recursos de diseño.
Recyclerview_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:padding="5dp" android:layout_width="50dp" android:layout_height="50dp"> <TextView android:id="@+id/info_text" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:background="@color/colorAccent"/> </LinearLayout>
Cree el adaptador
El RecyclerView
necesita un adaptador para rellenar las vistas de cada celda con sus datos. Cree un nuevo archivo java.
MyRecyclerViewAdapter.java
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> { private String[] mData = new String[0]; private LayoutInflater mInflater; private ItemClickListener mClickListener; // data is passed into the constructor public MyRecyclerViewAdapter(Context context, String[] data) { this.mInflater = LayoutInflater.from(context); this.mData = data; } // inflates the cell layout from xml when needed @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = mInflater.inflate(R.layout.recyclerview_item, parent, false); ViewHolder viewHolder = new ViewHolder(view); return viewHolder; } // binds the data to the textview in each cell @Override public void onBindViewHolder(ViewHolder holder, int position) { String animal = mData[position]; holder.myTextView.setText(animal); } // total number of cells @Override public int getItemCount() { return mData.length; } // stores and recycles views as they are scrolled off screen public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener { public TextView myTextView; public ViewHolder(View itemView) { super(itemView); myTextView = (TextView) itemView.findViewById(R.id.info_text); itemView.setOnClickListener(this); } @Override public void onClick(View view) { if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition()); } } // convenience method for getting data at click position public String getItem(int id) { return mData[id]; } // allows clicks events to be caught public 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 celdas. Esto estaba disponible en el viejo
GridView
y es una necesidad común. Puede quitar este código si no lo necesita.
Inicializar RecyclerView en la actividad
Agregue el código siguiente a su actividad principal.
MainActivity.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 String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"}; // set up the RecyclerView RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rvNumbers); int numberOfColumns = 6; recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns)); adapter = new MyRecyclerViewAdapter(this, data); adapter.setClickListener(this); recyclerView.setAdapter(adapter); } @Override public void onItemClick(View view, int position) { Log.i("TAG", "You clicked number " + adapter.getItem(position) + ", which is at cell position " + position); } }
Notas
- Observe que la actividad implementa
ItemClickListener
que definimos en nuestro adaptador. Esto nos permite manejar eventos de clics de celda enonItemClick
.
Terminado
Eso es. Debe ser capaz de ejecutar su proyecto ahora y obtener algo similar a la imagen en la parte superior.
Continuando
Esquinas redondeadas
- Utilizar un CardView
Columnas de ajuste automático
- GridLayoutManager – cómo ajustar automáticamente las columnas?
Estudio adicional
- Android RecyclerView con GridView GridLayoutManager ejemplo tutorial
- Android RecyclerView Grid Layout Ejemplo
- Aprende RecyclerView con un ejemplo en Android
- RecyclerView: Cuadrícula con cabecera
- Android GridLayoutManager con RecyclerView en Diseño de materiales
- Introducción a RecyclerView y CardView en Android
Aunque me gusta y aprecio la respuesta de Suragch , me gustaría dejar una nota porque encontré que la codificación del adaptador ( MyRecyclerViewAdapter
) para definir y exponer el método Listener onItemClick
no es la mejor manera de hacerlo, debido a no usar Encapsulación de clase correctamente. Así que mi sugerencia es dejar que el Adaptador maneje las operaciones de Listening exclusivamente (ese es su propósito!) Y separar las de la Actividad que usa el Adaptador ( MainActivity
). Así que esto es cómo yo fijaría la clase del adaptador:
MyRecyclerViewAdapter.java
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> { private String[] mData = new String[0]; private LayoutInflater mInflater; // Data is passed into the constructor public MyRecyclerViewAdapter(Context context, String[] data) { this.mInflater = LayoutInflater.from(context); this.mData = data; } // Inflates the cell layout from xml when needed @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = mInflater.inflate(R.layout.recyclerview_item, parent, false); ViewHolder viewHolder = new ViewHolder(view); return viewHolder; } // Binds the data to the textview in each cell @Override public void onBindViewHolder(ViewHolder holder, int position) { String animal = mData[position]; holder.myTextView.setText(animal); } // Total number of cells @Override public int getItemCount() { return mData.length; } // Stores and recycles views as they are scrolled off screen public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener { public TextView myTextView; public ViewHolder(View itemView) { super(itemView); myTextView = (TextView) itemView.findViewById(R.id.info_text); itemView.setOnClickListener(this); } @Override public void onClick(View view) { onItemClick(view, getAdapterPosition()); } } // Convenience method for getting data at click position public String getItem(int id) { return mData[id]; } // Method that executes your code for the action received public void onItemClick(View view, int position) { Log.i("TAG", "You clicked number " + getItem(position).toString() + ", which is at cell position " + position); } }
Tenga en cuenta el método onItemClick
ahora definido en MyRecyclerViewAdapter
que es el lugar donde desea codificar sus tareas para el evento / acción recibida.
Sólo hay un pequeño cambio que se debe hacer para completar esta transformación: la Actividad no necesita implementar MyRecyclerViewAdapter.ItemClickListener
ya, porque ahora eso es hecho completamente por el Adaptador . Esta sería entonces la modificación final:
MainActivity.java
public class MainActivity extends AppCompatActivity { MyRecyclerViewAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // data to populate the RecyclerView with String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"}; // set up the RecyclerView RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rvNumbers); int numberOfColumns = 6; recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns)); adapter = new MyRecyclerViewAdapter(this, data); adapter.setClickListener(this); recyclerView.setAdapter(adapter); } }
- Cree un progressDialog sólo con el spinner (en el medio)
- Recuperar el archivo Xml eliminado de la aplicación en android