Sederhana Android grid contoh menggunakan RecyclerView dengan GridLayoutManager (seperti GridView)

Saya tahu bahwa RecyclerView telah menggantikan fungsi tua ListView dan GridView. Saya mencari sebuah contoh yang sangat dasar yang menunjukkan minimal grid setup menggunakan RecyclerView. Saya tidak mencari panjang tutorial gaya penjelasan, hanya sedikit contoh. Saya membayangkan sederhana grid yang meniru tua GridView akan terdiri dari beberapa fitur berikut:

  • beberapa sel per baris
  • tampilan tunggal di setiap sel
  • merespon peristiwa klik
Suragch
Pertanyaan edit 31 Januari 2017 в 3:19
Pemrograman
android gridview android-recyclerview gridlayoutmanager
14 November 2016 в 11:02
46 tayangan
Larutan

Jawaban singkat

Bagi mereka yang sudah akrab dengan pengaturan RecyclerView untuk membuat daftar, kabar baiknya adalah bahwa membuat grid adalah sebagian besar sama. Anda hanya menggunakan GridLayoutManager bukan LinearLayoutManager ketika anda mengatur RecyclerView up.

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

Jika anda membutuhkan bantuan lebih dari itu, maka simak contoh berikut.

Contoh lengkap

Berikut adalah sedikit contoh yang akan terlihat seperti gambar di bawah ini.

Mulai dengan kosong kegiatan. Anda akan melakukan tugas-tugas berikut untuk menambah RecyclerView grid. Semua yang perlu anda lakukan adalah copy dan paste kode di setiap bagian. Kemudian anda dapat menyesuaikannya sesuai dengan kebutuhan anda.

  • Tambahkan dependensi untuk gradle
  • Tambahkan xml tata letak file untuk aktivitas dan untuk sel grid
  • Membuat RecyclerView adaptor
  • Menginisialisasi RecyclerView dalam aktivitas anda

Update Gradle dependensi

Pastikan berikut dependensi dalam aplikasi anda gradle.membangun file:

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

Anda dapat memperbarui nomor versi untuk apa pun yang terkini.

Membuat aktivitas tata letak

Tambahkan RecyclerView untuk xml layout.

activity_main.xml

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

Membuat sel grid layout

Setiap sel dalam RecyclerView grid hanya akan memiliki satu TextView. Membuat layout baru resource file.

recyclerview_item.xml

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

Membuat adaptor

The RecyclerView membutuhkan sebuah adaptor untuk mengisi dilihat di masing-masing cell dengan data anda. Buat sebuah 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);
    }
}

Catatan

  • Meskipun tidak benar-benar diperlukan, saya termasuk fungsi untuk mendengarkan klik peristiwa pada sel-sel. Ini tersedia di old GridView dan merupakan kebutuhan umum. Anda dapat menghapus kode ini jika anda don't membutuhkannya.

Menginisialisasi RecyclerView dalam Kegiatan

Tambahkan kode berikut untuk aktivitas utama anda.

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

Catatan

  • Pemberitahuan bahwa aktivitas mengimplementasikan ItemClickListener yang kita definisikan di adaptor. Hal ini memungkinkan kita untuk menangani sel klik acara di onItemClick.

Selesai

Yang's ini. Anda harus mampu untuk menjalankan proyek anda sekarang dan mendapatkan sesuatu yang mirip dengan gambar di atas.

Terjadi

Sudut-sudut membulat

Auto-pas kolom

Studi lebih lanjut

Suragch
Jawaban edit 25 Agustus 2018 в 7:56
Komentar (20)

Meskipun saya suka dan menghargai Suragch's jawaban, saya ingin meninggalkan catatan karena saya menemukan bahwa coding Adaptor (MyRecyclerViewAdapter) untuk menentukan dan mengekspos Pendengar metode onItemClick isn't cara terbaik untuk melakukannya, karena tidak menggunakan kelas enkapsulasi dengan benar. Jadi saran saya adalah untuk membiarkan Adaptor menangani Mendengarkan operasi semata-mata (yang's tujuan-nya!) dan memisahkan mereka dari Aktivitas yang menggunakan Adaptor ** (MainActivity). Jadi, ini adalah bagaimana saya akan membuat class 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);
    }
}

Harap dicatat onItemClick metode yang sekarang didefinisikan dalam MyRecyclerViewAdapter itu adalah tempat di mana anda ingin kode anda tugas untuk kegiatan/tindakan yang diterima.

Hanya ada perubahan kecil yang harus dilakukan dalam rangka untuk menyelesaikan transformasi: Kegiatan doesn't perlu menerapkan MyRecyclerViewAdapter.ItemClickListener lagi, karena sekarang yang dilakukan sepenuhnya oleh Adaptor. Hal ini kemudian akan menjadi akhir modifikasi:

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);
    }
}
Komentar (3)

Yo Harus Mengatur recyclerview layoutmanager untuk Gridlayout Mode , Untuk Melakukan hal Ini Hanya mengubah kode anda ketika anda Ingin Mengatur RecyclerView LayoutManager :

Catatan : mengganti Jumlah Kolom Yang anda inginkan dengan ###MEMBANTU###

recyclerView.setLayoutManager(baru GridLayoutManager(getActivity(),###MEMBANTU###));

lczapski
Jawaban edit 8 November 2019 в 12:26
Komentar (0)