Ejemplo de cuadrícula de Android simple usando RecyclerView con GridLayoutManager (como el antiguo GridView)

Sé que RecyclerView ha reemplazado la funcionalidad del antiguo ListView y GridView . Estoy buscando un ejemplo muy básico que muestre una configuración de cuadrícula mínima usando RecyclerView . No estoy buscando explicaciones de estilo tutoriales largas, solo un ejemplo mínimo. Imagino que la cuadrícula más simple que imita al antiguo GridView consistiría en las siguientes características:

  • múltiples celdas por fila
  • vista única en cada celda
  • responde a los eventos de clics

Respuesta corta

Para aquellos que ya están familiarizados con la configuración de un RecyclerView para hacer una lista , la buena noticia es que hacer una grilla es básicamente la misma. Simplemente usa un GridLayoutManager lugar de un LinearLayoutManager cuando configura el RecyclerView .

 recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns)); 

Si necesita más ayuda que eso, entonces vea el siguiente ejemplo.

Ejemplo completo

El siguiente es un ejemplo mínimo que se verá como la imagen de abajo.

enter image description here

Comience con una actividad vacía. Realizará las siguientes tareas para agregar la grilla RecyclerView . Todo lo que necesita hacer es copiar y pegar el código en cada sección. Más tarde puede personalizarlo para que se ajuste a sus necesidades.

  • Agregar dependencias a Gradle
  • Agregue los archivos de diseño xml para la actividad y para la celda de la cuadrícula
  • Haga el adaptador RecyclerView
  • Inicializa RecyclerView en tu actividad

Actualizar las dependencias de Gradle

Asegúrese de que las siguientes dependencias estén en su aplicación gradle.build file:

 compile 'com.android.support:appcompat-v7:27.1.1' compile 'com.android.support:recyclerview-v7:27.1.1' 

Puede actualizar los números de versión a lo que sea más actual .

Crear diseño de actividad

Agregue RecyclerView a su diseño xml.

activity_main.xml

     

Crear diseño de celda de cuadrícula

Cada celda de nuestra cuadrícula RecyclerView solo tendrá un solo TextView . Crea un nuevo archivo de recursos de diseño.

recyclerview_item.xml

     

Crea el adaptador

RecyclerView necesita un adaptador para llenar las vistas en cada celda con sus datos. Crea un nuevo archivo java.

MyRecyclerViewAdapter.java

 public class MyRecyclerViewAdapter extends RecyclerView.Adapter { private String[] mData; private LayoutInflater mInflater; private ItemClickListener mClickListener; // data is passed into the constructor MyRecyclerViewAdapter(Context context, String[] data) { this.mInflater = LayoutInflater.from(context); this.mData = data; } // inflates the cell layout from xml when needed @Override @NonNull public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = mInflater.inflate(R.layout.recyclerview_item, parent, false); return new ViewHolder(view); } // binds the data to the TextView in each cell @Override public void onBindViewHolder(@NonNull ViewHolder holder, int position) { holder.myTextView.setText(mData[position]); } // 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 { TextView myTextView; ViewHolder(View itemView) { super(itemView); myTextView = 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 String getItem(int id) { return mData[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 clics en las celdas. Esto estaba disponible en el viejo GridView y es una necesidad común. Puede eliminar este código si no lo necesita.

Inicializar RecyclerView en la actividad

Agregue el siguiente código 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 = 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 el ItemClickListener que definimos en nuestro adaptador. Esto nos permite manejar eventos de clic de celda en onItemClick .

Terminado

Eso es. Debería poder ejecutar su proyecto ahora y obtener algo similar a la imagen en la parte superior.

Continuando

Esquinas redondeadas

  • Use un CardView

Columnas de ajuste automático

  • GridLayoutManager: ¿cómo ajustar automáticamente las columnas?

Estudio adicional

  • Android RecyclerView con GridView GridLayoutManager tutorial de ejemplo
  • Ejemplo de diseño de cuadrícula de Android RecyclerView
  • Aprende RecyclerView con un ejemplo en Android
  • RecyclerView: cuadrícula con encabezado
  • Android GridLayoutManager con RecyclerView en Material Design
  • Comenzando con RecyclerView y CardView en Android

Aunque me gusta y aprecio la respuesta de Suragch , me gustaría dejar una nota porque descubrí que codificar el Adaptador ( MyRecyclerViewAdapter ) para definir y exponer el método Listener onItemClick no es la mejor manera de hacerlo, debido a que no se usa encapsulación de clase correctamente. Así que mi sugerencia es dejar que el Adaptador maneje las operaciones de Escucha únicamente (¡ese es su propósito!) Y MainActivity de la Actividad que usa el Adaptador ( MainActivity ). Así que así es como establecería la clase de adaptador:

MyRecyclerViewAdapter.java

 public class MyRecyclerViewAdapter extends RecyclerView.Adapter { 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.

Solo hay que hacer un pequeño cambio para completar esta transformación: ya no es necesario que la Actividad implemente MyRecyclerViewAdapter.ItemClickListener , porque ahora el Adaptador lo hace completamente. Esta sería 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); } }