Απλό παράδειγμα πλέγματος Android χρησιμοποιώντας RecyclerView με GridLayoutManager (όπως το παλιό GridView)

Question

Περισσότερα

Πηγή Μη AMP-έκδοση Επεξεργασία

Απλό παράδειγμα πλέγματος Android χρησιμοποιώντας RecyclerView με GridLayoutManager (όπως το παλιό GridView)

Γνωρίζω ότι το RecyclerView έχει αντικαταστήσει τη λειτουργικότητα των παλαιών ListView και GridView. Ψάχνω για ένα πολύ βασικό παράδειγμα που να δείχνει μια ελάχιστη ρύθμιση πλέγματος χρησιμοποιώντας το RecyclerView. Δεν ψάχνω για μακροσκελείς επεξηγήσεις σε στυλ σεμιναρίου, απλώς ένα ελάχιστο παράδειγμα. Φαντάζομαι ότι το απλούστερο πλέγμα που μιμείται το παλιό GridView θα αποτελείται από τα ακόλουθα χαρακτηριστικά:

πολλαπλά κελιά ανά γραμμή
ενιαία προβολή σε κάθε κελί
ανταποκρίνεται σε συμβάντα κλικ

Suragch

Επεξεργασμένη ερώτηση Κάνε Ιανουάριος 2017 в 3:19

Προγραμματισμός

android gridview android-recyclerview gridlayoutmanager

Κάνε Νοέμβριος 2016 в 11:02

1 προβολή

jonypera

Πηγή Μη AMP-έκδοση Επεξεργασία

Παρόλο που μου αρέσει και εκτιμώ την απάντηση του Suragch's, θα ήθελα να αφήσω μια σημείωση επειδή διαπίστωσα ότι η κωδικοποίηση του Adapter (MyRecyclerViewAdapter) για τον ορισμό και την έκθεση της μεθόδου Listener onItemClick δεν είναι ο καλύτερος τρόπος για να το κάνετε, λόγω της μη σωστής χρήσης της ενθυλάκωσης της κλάσης. Έτσι, η πρότασή μου είναι να αφήσετε τον Adapter να χειριστεί τις λειτουργίες Listening αποκλειστικά (αυτός'είναι ο σκοπός του!) και να τις διαχωρίσετε από τη Δραστηριότητα που χρησιμοποιεί τον Adapter (MainActivity). Έτσι, λοιπόν, με τον εξής τρόπο θα όριζα την κλάση 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);
    }
}

Παρακαλούμε σημειώστε τη μέθοδο onItemClick που ορίζεται τώρα στο MyRecyclerViewAdapter και είναι το μέρος όπου θα θέλατε να κωδικοποιήσετε τις εργασίες σας για το γεγονός/δράση που λαμβάνετε.

Υπάρχει μόνο μια μικρή αλλαγή που πρέπει να γίνει για να ολοκληρωθεί αυτός ο μετασχηματισμός: η Activity δεν χρειάζεται πλέον να υλοποιεί την MyRecyclerViewAdapter.ItemClickListener, επειδή τώρα αυτό γίνεται εξ ολοκλήρου από τον Adapter. Αυτή θα ήταν τότε η τελική τροποποίηση:

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

7

0

Σχόλια (3)

MR Coder

Πηγή Μη AMP-έκδοση Επεξεργασία

Πρέπει να ορίσετε τον διαχειριστή διάταξης recyclerview σας σε λειτουργία Gridlayout, για να το κάνετε αυτό απλά αλλάξτε τον κώδικά σας όταν θέλετε να ορίσετε τον διαχειριστή διάταξης RecyclerView σας:

Σημείωση: αντικαταστήστε τον αριθμό των στηλών σας που θέλετε με ###HELP###

   recyclerView.setLayoutManager(new GridLayoutManager(getActivity(),###HELP###)),

lczapski

Επεξεργασμένη απάντηση Κάνε Νοέμβριος 2019 в 12:26

0

Σχόλια (0)

Suragch · Accepted Answer · 2016-11-14T11:02:32+00:00

Short answer

Για όσους είναι ήδη εξοικειωμένοι με τη δημιουργία ενός RecyclerView για να φτιάξετε μια λίστα, τα καλά νέα είναι ότι η δημιουργία ενός πλέγματος είναι σε μεγάλο βαθμό η ίδια. Απλά χρησιμοποιείτε έναν GridLayoutManager αντί για έναν LinearLayoutManager όταν στήνετε το RecyclerView.

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

Αν χρειάζεστε περισσότερη βοήθεια από αυτό, τότε δείτε το ακόλουθο παράδειγμα.

Πλήρες παράδειγμα

Το παρακάτω είναι ένα ελάχιστο παράδειγμα που θα μοιάζει με την παρακάτω εικόνα.

2

Ξεκινήστε με μια κενή δραστηριότητα. Θα εκτελέσετε τις ακόλουθες εργασίες για να προσθέσετε το πλέγμα RecyclerView. Το μόνο που χρειάζεται να κάνετε είναι να αντιγράψετε και να επικολλήσετε τον κώδικα σε κάθε ενότητα. Αργότερα μπορείτε να τον προσαρμόσετε ανάλογα με τις ανάγκες σας.

Προσθέστε εξαρτήσεις στο gradle
Προσθέστε τα αρχεία διάταξης xml για τη δραστηριότητα και για το κελί του πλέγματος
Δημιουργήστε τον προσαρμογέα RecyclerView
Αρχικοποιήστε το RecyclerView στη δραστηριότητά σας

Ενημερώστε τις εξαρτήσεις Gradle

Βεβαιωθείτε ότι οι ακόλουθες εξαρτήσεις βρίσκονται στο αρχείο gradle.build της εφαρμογής σας:

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

Μπορείτε να ενημερώσετε τους αριθμούς εκδόσεων σε όποια είναι η πιο πρόσφατη.

Create activity layout

Προσθέστε το RecyclerView στη διάταξη xml.

activity_main.xml

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

Create grid cell layout

Κάθε κελί στο πλέγμα μας RecyclerView θα έχει μόνο ένα TextView. Δημιουργήστε ένα νέο αρχείο πόρων διάταξης.

recyclerview_item.xml

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

Δημιουργήστε τον προσαρμογέα

Το RecyclerView χρειάζεται έναν προσαρμογέα για να γεμίζει τις προβολές σε κάθε κελί με τα δεδομένα σας. Δημιουργήστε ένα νέο αρχείο 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);
    }
}

Σημειώσεις

Αν και δεν είναι απολύτως απαραίτητο, συμπεριέλαβα τη λειτουργικότητα για την ακρόαση συμβάντων κλικ στα κελιά. Αυτό ήταν διαθέσιμο στο παλιό GridView και είναι μια κοινή ανάγκη. Μπορείτε να αφαιρέσετε αυτόν τον κώδικα αν δεν τον χρειάζεστε.

Αρχικοποίηση του RecyclerView στη δραστηριότητα

Προσθέστε τον ακόλουθο κώδικα στην κύρια δραστηριότητά σας.

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

Σημειώσεις

Παρατηρήστε ότι η δραστηριότητα υλοποιεί τον ItemClickListener που ορίσαμε στον προσαρμογέα μας. Αυτό μας επιτρέπει να χειριζόμαστε γεγονότα κλικ κελιών στο onItemClick.

Finished

Αυτό είναι όλο. Θα πρέπει να είστε σε θέση να εκτελέσετε το έργο σας τώρα και να πάρετε κάτι παρόμοιο με την εικόνα στην κορυφή.

Going on

Στρογγυλεμένες γωνίες

Χρησιμοποιήστε ένα CardView

Αυτόματη προσαρμογή στηλών

https://stackoverflow.com/questions/33575731/gridlayoutmanager-how-to-auto-fit-columns

Απλό παράδειγμα πλέγματος Android χρησιμοποιώντας RecyclerView με GridLayoutManager (όπως το παλιό GridView)

Short answer

Πλήρες παράδειγμα

Ενημερώστε τις εξαρτήσεις Gradle

Create activity layout

Create grid cell layout

Δημιουργήστε τον προσαρμογέα

Αρχικοποίηση του RecyclerView στη δραστηριότητα

Finished

Going on

Περαιτέρω μελέτη