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

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

Introduzca aquí la descripción de la imagen

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 en onItemClick .

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); } } 
  • Recyclerview no llama al método Adapter: onCreateViewHolder, onBindViewHolder,
  • Reciclaje multi-expansible
  • ¿Cómo puedo acceder al visor de un elemento en una vista de reciclador?
  • No se puede agregar vista vacía abajo Recyclerview
  • RecyclerView no recicla las vistas si el recuento de vistas es pequeño
  • ¿Cómo puedo hacer que WRAP_CONTENT funcione en un RecyclerView
  • El evento RecyclerView onScrollStateChanged / onScrolled no se activa cuando no se ha producido desplazamiento
  • Arrastrar y soltar RecyclerView que se rellena desde SQLiteDatabase
  • ¿Hay alguna forma de calcular la posición final de desplazamiento
  • Cuando se enfoca EditText dentro de ListView o RecyclerView, el teclado muestra pero el desplazamiento no funciona
  • Clic en el elemento programáticamente en RecyclerView
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.