Exemple de grid Android simple utilisant RecyclerView avec GridLayoutManager (comme l’ancien GridView)

Je sais que RecyclerView a remplacé les fonctionnalités de l’ancien ListView et GridView . Je cherche un exemple très basique qui montre une configuration de grid minimale en utilisant RecyclerView . Je ne cherche pas d’explications de style tutoriel longues, juste un exemple minimal. J’imagine que la grid la plus simple qui imite l’ancienne GridView comporterait les fonctionnalités suivantes:

  • plusieurs cellules par ligne
  • vue unique dans chaque cellule
  • répond aux événements de clic

Réponse courte

Pour ceux qui sont déjà familiers avec la mise en place d’un RecyclerView pour faire une liste , la bonne nouvelle est que la création d’une grid est sensiblement la même. Vous utilisez juste un GridLayoutManager au lieu d’un LinearLayoutManager lorsque vous définissez RecyclerView .

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

Si vous avez besoin de plus d’aide, consultez l’exemple suivant.

Exemple complet

Voici un exemple minimal qui ressemblera à l’image ci-dessous.

entrer la description de l'image ici

Commencez par une activité vide. Vous allez effectuer les tâches suivantes pour append la grid RecyclerView . 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 à graduer
  • Ajouter les fichiers de présentation xml pour l’activité et pour la cellule de la grid
  • Faire l’adaptateur RecyclerView
  • Initialiser le RecyclerView dans votre activité

Mettre à jour les dépendances Gradle

Assurez-vous que les dépendances suivantes figurent dans votre fichier app gradle.build :

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

Vous pouvez mettre à jour les numéros de version à tout ce qui est le plus récent .

Créer une disposition d’activité

Ajoutez le RecyclerView à votre disposition XML.

activity_main.xml

     

Créer une disposition de cellule de grid

Chaque cellule de notre grid RecyclerView ne va avoir qu’un seul TextView . Créez un nouveau fichier de ressources de présentation.

recyclerview_item.xml

     

Créer l’adaptateur

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 { private Ssortingng[] mData; private LayoutInflater mInflater; private ItemClickListener mClickListener; // data is passed into the constructor MyRecyclerViewAdapter(Context context, Ssortingng[] 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 Ssortingng 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 cela ne soit pas ssortingctement nécessaire, j’ai inclus la fonctionnalité permettant d’écouter les événements de clic sur les cellules. C’était disponible dans l’ancien GridView et est un besoin commun. Vous pouvez supprimer ce code si vous n’en avez pas besoin.

Initialiser RecyclerView dans l’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 Ssortingng[] 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 ItemClickListener que nous avons défini 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 lancer votre projet maintenant et obtenir quelque chose de similaire à l’image en haut.

Continuer

Coins arrondis

  • Utilisez une CardView

Colonnes à ajustement automatique

  • GridLayoutManager – comment ajuster automatiquement les colonnes?

Une étude plus approfondie

  • Android RecyclerView avec exemple de didacticiel GridView GridLayoutManager
  • Exemple de disposition de grid Android RecyclerView
  • Apprendre RecyclerView avec un exemple dans Android
  • RecyclerView: Grille avec en-tête
  • Android GridLayoutManager avec RecyclerView dans Material Design
  • Démarrer avec RecyclerView et CardView sur Android

Bien que j’apprécie et apprécie la réponse de Suragch , j’aimerais laisser une note car j’ai trouvé que le codage de l’ adaptateur ( MyRecyclerViewAdapter ) pour définir et exposer la méthode onItemClick n’est pas la meilleure façon de le faire. encapsulation de classe correctement. Donc, ma suggestion est de laisser l’ adaptateur gérer uniquement les opérations d’écoute (c’est son but!) Et séparer ceux de l’activité qui utilise l’ adaptateur ( MainActivity ). Voici comment je définirais la classe de l’adaptateur:

MyRecyclerViewAdapter.java

 public class MyRecyclerViewAdapter extends RecyclerView.Adapter { private Ssortingng[] mData = new Ssortingng[0]; private LayoutInflater mInflater; // Data is passed into the constructor public MyRecyclerViewAdapter(Context context, Ssortingng[] 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) { Ssortingng 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 Ssortingng 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).toSsortingng() + ", which is at cell position " + position); } } 

Notez la méthode onItemClick maintenant définie dans MyRecyclerViewAdapter qui est l’endroit où vous souhaitez coder vos tâches pour l’événement / l’action reçu.

Il n’ya qu’un petit changement à faire pour terminer cette transformation: l’ Activité n’a plus besoin d’implémenter MyRecyclerViewAdapter.ItemClickListener , car cela se fait maintenant complètement par l’ Adaptateur . Ce serait alors la modification finale:

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 Ssortingng[] 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); } }