Semplice esempio di griglia Android usando RecyclerView con GridLayoutManager (come la vecchia GridView)

So che la RecyclerView ha sostituito le funzionalità delle vecchie ListView e GridView. Sto cercando un esempio molto semplice che mostri una configurazione minima della griglia usando la RecyclerView. Non sto cercando lunghe spiegazioni in stile tutorial, solo un esempio minimo. Immagino che la griglia più semplice che imita la vecchia GridView consisterebbe nelle seguenti caratteristiche:

  • più celle per riga
  • vista singola in ogni cella
  • risponde agli eventi click
Suragch
Domanda modificata 31º gennaio 2017 в 3:19
Programmazione
android gridview android-recyclerview gridlayoutmanager
14º novembre 2016 в 11:02
Non ci sono ancora visualizzazioni
Soluzione

Risposta breve

Per coloro che hanno già familiarità con l'impostazione di un RecyclerView per fare una lista, la buona notizia è che fare una griglia è in gran parte lo stesso. Basta usare un GridLayoutManager invece di un LinearLayoutManager quando si imposta la RecyclerView.

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

Se hai bisogno di più aiuto, dai un'occhiata al seguente esempio.

Esempio completo

Quello che segue è un esempio minimo che assomiglierà all'immagine qui sotto.

Iniziate con un'attività vuota. Eseguirai le seguenti operazioni per aggiungere la griglia RecyclerView. Tutto quello che devi fare è copiare e incollare il codice in ogni sezione. In seguito potrai personalizzarlo in base alle tue esigenze.

  • Aggiungere le dipendenze a gradle
  • Aggiungere i file di layout xml per l'attività e per la cella della griglia
  • Creare l'adattatore RecyclerView
  • Inizializza il RecyclerView nella tua attività

Aggiornare le dipendenze di Gradle

Assicurati che le seguenti dipendenze siano nel file gradle.build della tua app:

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

Puoi aggiornare i numeri di versione a quello che è il più attuale.

Crea il layout dell'attività

Aggiungi la RecyclerView al tuo layout xml.

activity_main.xml

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

Crea il layout delle celle della griglia

Ogni cella della nostra griglia RecyclerView avrà solo una singola TextView. Creare un nuovo file di risorse per il layout.

recyclerview_item.xml

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

Crea l'adattatore

La RecyclerView ha bisogno di un adattatore per popolare le viste in ogni cella con i tuoi dati. Crea un nuovo file java.

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

Note

  • Anche se non è strettamente necessario, ho incluso la funzionalità per ascoltare gli eventi di click sulle celle. Questo era disponibile nella vecchia GridView ed è una necessità comune. Puoi rimuovere questo codice se non ne hai bisogno.

Inizializza RecyclerView nell'attività

Aggiungete il seguente codice alla vostra attività 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);
    }
}

Note

  • Notate che l'attività implementa il ItemClickListener che abbiamo definito nel nostro adattatore. Questo ci permette di gestire gli eventi di click delle celle in onItemClick.

Finito

Questo è tutto. Ora dovresti essere in grado di eseguire il tuo progetto e ottenere qualcosa di simile all'immagine in alto.

Andando avanti

Angoli arrotondati

  • Usa una CardView]4

Colonne autoadattanti

Ulteriori studi.

Suragch
Risposta modificata 25º agosto 2018 в 7:56
Commentari (20)

Anche se mi piace e apprezzo Suragch'la risposta, vorrei lasciare una nota perché ho scoperto che codificare l'Adattatore (MyRecyclerViewAdapter) per definire ed esporre il metodo Listener onItemClick non è il modo migliore per farlo, a causa di non usare correttamente l'incapsulamento della classe. Quindi il mio suggerimento è di lasciare che l'Adattatore gestisca esclusivamente le operazioni di ascolto (è il suo scopo!) e separarle dall'attività che usa l'adattatore (MainActivity). Quindi questo è il modo in cui imposterei la classe Adapter:

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

Notate il metodo onItemClick ora definito in MyRecyclerViewAdapterche è il posto dove vorreste codificare i vostri compiti per l'evento/azione ricevuta.

C'è solo una piccola modifica da fare per completare questa trasformazione: l'Activity non ha più bisogno di implementare MyRecyclerViewAdapter.ItemClickListener, perché ora questo viene fatto completamente dall'Adapter. Questa sarebbe quindi la modifica 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
        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);
    }
}
Commentari (3)

Devi impostare il tuo layoutmanager recyclerview in modalità Gridlayout, per fare questo basta cambiare il tuo codice quando vuoi impostare il tuo LayoutManager RecyclerView:

Nota: sostituire il conteggio delle colonne che si desidera con ###HELP####

   recyclerView.setLayoutManager(new GridLayoutManager(getActivity(),###HELP###));
lczapski
Risposta modificata 8º novembre 2019 в 12:26
Commentari (0)