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

Je sais que RecyclerView a remplacé les fonctionnalités des anciennes ListView et GridView. Je suis à la recherche d'un exemple très basique qui montre une configuration minimale de grille utilisant RecyclerView. Je ne cherche pas de longues explications de type tutoriel, juste un exemple minimal. J'imagine que la grille la plus simple qui imite l'ancien GridView serait composée des caractéristiques suivantes :

  • plusieurs cellules par ligne
  • vue unique dans chaque cellule
  • répond aux événements de clics
Suragch
Question modifiée 31 janvier 2017 в 3:19
Programmation
android gridview android-recyclerview gridlayoutmanager
14 novembre 2016 в 11:02
1 voir
Solution

Réponse courte

Pour ceux qui sont déjà familiers avec [la configuration d'un RecyclerView pour faire une liste][1], la bonne nouvelle est que faire une grille est largement la même chose. Vous utilisez simplement un GridLayoutManager au lieu d'un LinearLayoutManager lorsque vous configurez le RecyclerView.

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

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

Exemple complet

L'exemple suivant est un exemple minimal qui ressemblera à l'image ci-dessous.

[!Entrez la description de l'image ici][2]][2]

Commencez par une activité vide. Vous allez effectuer les tâches suivantes pour ajouter la grille RecyclerView. Tout ce que vous avez à faire est de copier et coller le code dans chaque section. Plus tard, vous pourrez le personnaliser pour l'adapter à vos besoins.

  • Ajouter les dépendances à gradle
  • Ajouter les fichiers xml de mise en page pour l'activité et pour la cellule de la grille.
  • Créez l'adaptateur RecyclerView
  • Initialiser le RecyclerView dans votre activité

Mise à jour des dépendances de Gradle

Assurez-vous que les dépendances suivantes sont dans le fichier gradle.build de votre 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 en fonction de la plus récente.

Créer la mise en page de l'activité

Ajoutez le RecyclerView à votre layout xml.

*Activité principale.xml

<?xml version="1.0" encoding="utf-8"?>

Créer la disposition des cellules de la grille

Chaque cellule de notre grille RecyclerView n'aura qu'un seul TextView. Créez un nouveau fichier de ressources de mise en page.

*`recyclerview_item.xml'.

<?xml version="1.0" encoding="utf-8"?>

Créer l'adaptateur

Le RecyclerView a besoin d'un adaptateur pour remplir les vues de chaque cellule avec vos données. Créez un nouveau fichier java.

MonRecyclerViewAdapter.java

public class MyRecyclerViewAdapter extends RecyclerView.Adapter {

    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 ce ne soit pas strictement nécessaire, j'ai inclus la fonctionnalité d'écoute des événements de clics sur les cellules. Ceci était disponible dans l'ancienne 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 (en anglais)

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

  • Remarquez que l'activité implémente le ItemClickListener que nous avons défini dans notre adaptateur. Cela nous permet de gérer les événements de clic de cellule dans onItemClick.

Terminé

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

Going on

Coins arrondis

  • Utiliser un CardView] [4]

Ajustement automatique des colonnes

Étude complémentaire

Suragch
Réponse modifiée 25 août 2018 в 7:56
Commentaires (20)

Bien que j'aime et apprécie la réponse de [Suragch'1], je voudrais laisser une note parce que j'ai trouvé que coder le Adapter (MyRecyclerViewAdapter) pour définir et exposer la méthode Listener onItemClick n'est pas la meilleure façon de le faire, à cause d'une mauvaise utilisation de l'encapsulation de classe. Je suggère donc de laisser l'adaptateur Adapter gérer uniquement les opérations d'écoute (c'est son but !) et de les séparer de l'activité qui utilise l'adaptateur Adapter (MainActivity). Voici donc comment je définirais la classe de l'adaptateur :

MonRecyclerViewAdapter.java.

public class MyRecyclerViewAdapter extends RecyclerView.Adapter {

    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 méthode onItemClick est maintenant définie dans MyRecyclerViewAdapter. C'est l'endroit où vous voulez coder vos tâches pour l'événement/action reçu.

Il n'y a qu'un petit changement à faire pour compléter cette transformation : l'Activité n'a plus besoin d'implémenter MyRecyclerViewAdapter.ItemClickListener, car maintenant cela est fait complètement par l'Adapteur. Il s'agit donc de 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);
    }
}
Commentaires (3)

Vous devez définir votre gestionnaire de mise en page RecyclerView en mode Gridlayout. Pour ce faire, il suffit de modifier votre code lorsque vous souhaitez définir votre gestionnaire de mise en page RecyclerView :

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

   recyclerView.setLayoutManager(new GridLayoutManager(getActivity(),###HELP###)) ;
lczapski
Réponse modifiée 8 novembre 2019 в 12:26
Commentaires (0)