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 cuadrícula es prácticamente lo mismo. Solo usa un en GridLayoutManager
lugar de un LinearLayoutManager
cuando configura la RecyclerView
configuración.
recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
Si necesita más ayuda que eso, consulte el siguiente ejemplo.
Ejemplo completo
El siguiente es un ejemplo mínimo que se verá como la imagen de abajo.
Comience con una actividad vacía. Realizará las siguientes tareas para agregar la RecyclerView
cuadrícula. Todo lo que necesita hacer es copiar y pegar el código en cada sección. Más tarde, puede personalizarlo para satisfacer sus necesidades.
- Agregar dependencias a gradle
- Agregue los archivos de diseño xml para la actividad y para la celda de cuadrícula
- Haga el adaptador RecyclerView
- Inicialice RecyclerView en su actividad
Actualizar dependencias de Gradle
Asegúrese de que las siguientes dependencias estén en su gradle.build
archivo de aplicación :
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 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 diseño de celda de cuadrícula
Cada celda de nuestra RecyclerView
cuadrícula solo tendrá una sola 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>
Crea el adaptador
El RecyclerView
necesita un adaptador para poblar los puntos de vista de cada celda con sus datos. Crea un nuevo archivo java.
MyRecyclerViewAdapter.java
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {
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 clic en las celdas. Esto estaba disponible en el antiguo
GridView
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.
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 lo
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
Columnas autoajustables
Estudio adicional