Exemple de grille Android simple utilisant RecyclerView avec GridLayoutManager (comme l'ancien GridView)


227

Je sais que cela RecyclerViewa remplacé la fonctionnalité de l'ancien ListViewet GridView. Je cherche un exemple très basique qui montre une configuration de grille minimale à l'aide RecyclerView. Je ne cherche pas de longues explications de style tutoriel, juste un exemple minimal. J'imagine que la grille la plus simple qui imite l'ancienne GridView comprendrait les fonctionnalités suivantes:

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

Réponses:


556

Réponse courte

Pour ceux qui sont déjà familiarisés avec la création d'un RecyclerViewpour 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 GridLayoutManagerau lieu d'un LinearLayoutManagerlorsque vous configurez la RecyclerViewconfiguration.

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.

entrez la description de l'image ici

Commencez par une activité vide. Vous allez effectuer les tâches suivantes pour ajouter la RecyclerViewgrille. 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.buildfichier 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 RecyclerViewgrille 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 RecyclerViewbesoin 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 GridViewet 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 ItemClickListenerque 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


2
@ MarianPaździoch, Oui, je viens de faire cela comme exemple minimal. Il pourrait certainement utiliser des travaux d'embellissement. J'essaierai de mettre à jour cette réponse dans le futur.
Suragch

1
Je me suis connecté juste pour souligner que des gens comme vous ont gardé ce portail en vie et que j'ai été bloqué pendant deux jours avant de voir cette solution. merci beaucoup
VarunJoshi129

1
@androiddeveloper, les éléments de la grille sont disposés de gauche à droite, de haut en bas. Le défilement est vertical lorsqu'il y a plus d'éléments que ne peut en contenir l'écran.
Suragch

13
Futurs lecteurs, permettez-moi de vous faire gagner du temps, l'essentiel estrecyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
daka

1
@daka, bon point. J'ai modifié ma réponse pour l'inclure au début.
Suragch

7

Bien que j'aime et apprécie la réponse de Suragch , je voudrais laisser une note parce que j'ai trouvé que le codage de Adapter ( MyRecyclerViewAdapter) pour définir et exposer la méthode Listener onItemClickn'est pas la meilleure façon de le faire, car je n'utilise pas l'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 de les séparer de l'activité qui utilise l' adaptateur ( MainActivity). Voici donc comment je définirais la classe Adapter:

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);
    }
}

Veuillez noter que la onItemClickméthode maintenant définie MyRecyclerViewAdapterest l'endroit où vous souhaitez coder vos tâches pour l'événement / l'action reçue.

Il n'y a qu'un petit changement à faire pour achever cette transformation: l' activité n'a plus besoin d'être implémentée MyRecyclerViewAdapter.ItemClickListener, car maintenant cela est fait complètement par l' adaptateur . Ce serait alors la dernière modification:

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);
    }
}

3
Que faire si l'activité a besoin d'écouter les événements de clic? Par exemple, passer des données au présentateur, faire de la logique en fonction de l'élément cliqué, du suivi, etc.
Ahmad Fadli

J'accepte que l'adaptateur gère les événements de clic, car il contient les éléments contenant les données. @AhmadFadli si vous avez besoin de travailler sur l'hôte de l'adaptateur (un fragment ou une activité), vous devez créer une interface de rappel avec les méthodes dont vous avez besoin. Votre hôte implémente cette interface. Et puis vous passez une instance de votre hôte dans le constructeur de l'adaptateur. En ayant l'instance de l'hôte, vous pouvez appeler ses méthodes lorsque vous en avez besoin depuis votre adaptateur. Et votre hôte reçoit des rappels. Ceci est souvent utilisé lorsque vous devez travailler avec ActionMode. Lorsque vous cliquez longtemps pour sélectionner des éléments et utiliser les boutons ActionBar.
Kirill Karmazin

Je ne suis pas d'accord et je pense que les événements de clic doivent être traités dans l'hébergement Activity. Parce que il écoute de clic peut connaître les Activitypoints de vue et d' autres Fragments, Activitiesetc. L'adaptateur ne peut envoyer cliquer sur les événements au niveau supérieur. Il doit avoir l'interface ItemClickListener avec autant d'événements, comme peuvent le produire de nombreuses vues d'adaptateur d'événements. Cette solution a été écrite encore plus tôt: stackoverflow.com/a/40563598/2914140 .
CoolMind

4

Vous devez définir votre gestionnaire de présentation de vue de recyclage en mode Gridlayout, pour cela, il vous suffit de modifier votre code lorsque vous souhaitez définir votre RecyclerView LayoutManager:

Remarque: remplacez le nombre de colonnes que vous souhaitez par ### HELP ###

   recyclerView.setLayoutManager(new GridLayoutManager(getActivity(),###HELP###));
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.