Réponse courte
Pour ceux qui sont déjà familiarisés avec la création d'un RecyclerView
pour faire une liste , la bonne nouvelle est que la création d'une grille est en grande partie la même. Vous utilisez simplement un GridLayoutManager
au lieu d'un LinearLayoutManager
lorsque vous configurez la RecyclerView
configuration.
recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
Si vous avez besoin de plus d'aide que cela, consultez l'exemple suivant.
Exemple complet
Ce qui suit est un exemple minimal qui ressemblera à l'image ci-dessous.
Commencez par une activité vide. Vous allez effectuer les tâches suivantes pour ajouter la RecyclerView
grille. Il vous suffit de copier et coller le code dans chaque section. Plus tard, vous pouvez le personnaliser en fonction de vos besoins.
- Ajouter des dépendances à gradle
- Ajoutez les fichiers de disposition xml pour l'activité et pour la cellule de la grille
- Faire l'adaptateur RecyclerView
- Initialisez le RecyclerView dans votre activité
Mettre à jour les dépendances Gradle
Assurez-vous que les dépendances suivantes figurent dans votre gradle.build
fichier d' application :
compile 'com.android.support:appcompat-v7:27.1.1'
compile 'com.android.support:recyclerview-v7:27.1.1'
Vous pouvez mettre à jour les numéros de version vers la version la plus récente .
Créer une disposition d'activité
Ajoutez le RecyclerView
à votre mise en page 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>
Créer une disposition de cellule de grille
Chaque cellule de notre RecyclerView
grille n'en aura qu'une seule TextView
. Créez un nouveau fichier de ressources de mise en page.
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>
Créer l'adaptateur
Il a RecyclerView
besoin d'un adaptateur pour remplir les vues de chaque cellule avec vos données. Créez un nouveau fichier 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);
}
}
Remarques
- Bien que pas strictement nécessaire, j'ai inclus la fonctionnalité d'écoute des événements de clic sur les cellules. C'était disponible dans l'ancien
GridView
et c'est un besoin commun. Vous pouvez supprimer ce code si vous n'en avez pas besoin.
Initialiser RecyclerView en activité
Ajoutez le code suivant à votre activité principale.
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);
}
}
Remarques
- Notez que l'activité implémente celle
ItemClickListener
que nous avons définie dans notre adaptateur. Cela nous permet de gérer les événements de clic de cellule dans onItemClick
.
Fini
C'est tout. Vous devriez pouvoir exécuter votre projet maintenant et obtenir quelque chose de similaire à l'image en haut.
Continuant
Coins arrondis
Colonnes à ajustement automatique
Une étude plus approfondie