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

Question

Je sais qu' RecyclerView a remplacé la fonctionnalité du vieux - ListView et GridView. Je suis à la recherche d'un exemple de base qui montre un minimum de paramètres de la grille à l'aide de RecyclerView. Je ne suis pas à la recherche pour le long tutoriel style explications, juste un exemple minimal. J'imagine que le plus simple grille qui imite l'ancien GridView serait composé des éléments suivants:

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

Answer 1

Réponse courte

Pour ceux qui sont déjà familiers avec la configuration d'un RecyclerView de faire une liste, la bonne nouvelle est que la fabrication d'une grille est en grande partie le même. Il vous suffit d'utiliser un GridLayoutManager au lieu de LinearLayoutManager lorsque vous définissez l' RecyclerView .

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

Si vous avez besoin de plus d'aide que les que les, de vérifier ensuite l'exemple suivant.

Exemple complet

Ce qui suit est un exemple minimal qui ressemblera à l'image ci-dessous.

Commencer avec une activité vide. Vous allez effectuer les tâches suivantes pour ajouter l' RecyclerView de la grille. Tout ce que vous devez faire est de copier et de coller le code dans chaque section. Plus tard, vous pouvez le personnaliser en fonction de vos besoins.

• Ajouter des dépendances à gradle
• Ajoutez le code xml fichiers de mise en page pour l'activité et pour la grille de la cellule
• Faire de la RecyclerView adaptateur
• Initialiser le RecyclerView dans votre activité

Mise à jour de Gradle dépendances

Assurez-vous que les dépendances suivantes sont en votre app gradle.build le fichier:

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 pour tout ce qui est le plus courant.

Créer de l'activité mise en page

Ajouter l' RecyclerView de 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 des cellules de grille de mise en page

Chaque cellule de notre - RecyclerView de la grille va seulement ont un seul TextView. Créer une nouvelle mise en page du fichier de ressources.

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 la carte

L' RecyclerView besoin d'un adaptateur pour remplir les vues de chaque cellule avec vos données. Créer 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);
    }
}

Notes

• Bien que n'étant pas strictement nécessaire, j'ai inclus la fonctionnalité d'écoute pour les événements de clic sur les cellules. Ce qui était disponible dans le vieux - GridView et 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);
    }
}

Notes

• Notez que l'activité met en œuvre l' ItemClickListener que nous avons défini dans notre carte. Cela nous permet de gérer cellule, cliquez sur les événements en onItemClick.

Fini

C'est tout. Vous devriez être en mesure d'exécuter votre projet et obtenir quelque chose de similaire à l'image ci-dessus.

Va sur

Coins arrondis

• Utiliser un CardView

Ajustement automatique des colonnes

• GridLayoutManager - comment ajuster automatiquement les colonnes?

Poursuite de l'étude

• Android RecyclerView avec GridView GridLayoutManager exemple tutoriel
• Android RecyclerView De La Grille De Mise En Page Exemple
• Apprendre RecyclerView Avec un Exemple dans Android
• RecyclerView: Grille avec en-tête
• Android GridLayoutManager avec RecyclerView dans la Conception de Matériel
• Mise en route Avec RecyclerView et CardView sur Android

Answer 2

Même si j'aime et apprécie Suragch's réponse, je voudrais laisser une note parce que j'ai trouvé que le codage de la Carte (MyRecyclerViewAdapter) de définir et d'exposer la méthode Écouteur onItemClick n'est pas la meilleure façon de le faire, grâce à la non-utilisation de la classe d'encapsulation correctement. Donc, ma suggestion est de laisser l' Adaptateur de la poignée à l'Écoute des opérations uniquement (c'est son but!) et de les séparer de ceux de l'Activité qui utilise l' Adaptateur (MainActivity). Donc, c'est comment je pourrais définir la classe d'Adaptateur:

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 l' onItemClick méthode définie en MyRecyclerViewAdapter qui est l'endroit où vous voulez le code de vos tâches pour l'événement/action reçues.

Il y a seulement un petit changement à faire pour compléter cette transformation: l' Activité n'a pas besoin de mettre en oeuvre MyRecyclerViewAdapter.ItemClickListener plus parce que maintenant que c'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);
    }
}