Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Cara Menambahkan Beberapa Seleksi ke Android RecyclerView

by
Difficulty:AdvancedLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Dian Sapta Priambogo (you can also view the original English article)

Widget RecyclerView merupakan bagian integral dari kebanyakan aplikasi Android saat ini. Sejak ditambahkan ke pustaka dukungan Android pada akhir 2014, ia telah memudarkan widget ListView sebagai widget yang paling disukai untuk menampilkan daftar yang besar dan kompleks. Namun, ada satu fitur penting yang hilang di dalamnya: dukungan untuk memilih dan melacak item daftar. RecyclerView Selection, sebuah addon library yang dirilis Google pada bulan Maret tahun ini, mencoba untuk memperbaikinya.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana menggunakan pustaka baru untuk membuat aplikasi yang menawarkan antarmuka intuitif untuk memilih beberapa item dalam daftar. Ikuti bersama dengan contoh pemilihan beberapa Android RecyclerView ini, dan Anda akan mempelajari beberapa keterampilan yang dapat Anda terapkan di aplikasi Anda sendiri.

Prasyarat

Untuk mengikuti, Anda memerlukan:

  • Versi terbaru dari Android Studio
  • Perangkat atau emulator yang menjalankan Android API level 23 atau lebih tinggi

1. Menambahkan Dependensi Android RecyclerView

Untuk menambahkan pustaka RecyclerView Selection ke proyek Android Studio Anda, sebutkan dependensi implementation berikut dalam file build.gradle modul aplikasi Anda:

2. Membuat Sebuah Daftar

Sepanjang tutorial ini, kita akan bekerja dengan daftar kecil item, masing-masing berisi nama dan nomor telepon seseorang.

Untuk menyimpan data dari setiap item daftar, buat kelas data Kotlin bernama Person dan tambahkan dua properti ke dalamnya name dan phone.

Anda sekarang dapat melanjutkan dan membuat daftar objek Person di main activity Anda.

3. Menambahkan Recycler View ke Layout

Kita tentu saja akan menggunakan widget RecyclerView untuk menampilkan daftar. Jadi tambahkan tag <RecyclerView> ke file XML layout main activity Anda.

Untuk menentukan layout item daftar, buat file XML baru dan beri nama list_item.xml. Di dalamnya, tambahkan dua widget TextView: satu untuk menampilkan nama, dan yang lainnya untuk menampilkan nomor telepon. Jika Anda menggunakan elemen LinearLayout untuk memposisikan widget, konten file XML akan terlihat seperti ini:

4. Membuat View Holder

Anda dapat menganggap view holder sebagai objek yang berisi referensi ke tampilan yang ada dalam layout item daftar. Tanpa itu, widget RecyclerView tidak akan dapat membuat item daftar secara efisien.

Untuk saat ini, Anda memerlukan view holder yang memegang dua widget TextView yang Anda buat pada langkah sebelumnya. Jadi buat kelas baru yang memperluas kelas RecyclerView.ViewHolder dan inisialisasi referensi untuk kedua widget di dalamnya. Begini caranya:

Selain itu, addon RecyclerView Selection memerlukan metode yang dapat dipanggil untuk mengidentifikasi item daftar yang dipilih secara unik. Metode ini idealnya dimiliki oleh view holder itu sendiri. Selain itu, ia harus mengembalikan turunan dari kelas ItemDetailsLookup.ItemDetails. Oleh karena itu, tambahkan kode berikut ke view holder:

Sekarang Anda harus mengganti dua metode abstrak yang ada di kelas ItemDetails. Mulailah dengan mengganti metode getPosition() dan mengembalikan properti adapterPosition dari view holder di dalamnya. Properti adapterPosition biasanya tidak lain adalah indeks item daftar.

Selanjutnya, ganti metode getSelectionKey(). Metode ini harus mengembalikan kunci yang dapat digunakan untuk mengidentifikasi item daftar secara unik. Untuk mempermudah, mari kembalikan properti itemId dari view holder.

Anda bebas menggunakan teknik lain untuk menghasilkan kunci seleksi, asalkan menghasilkan nilai-nilai unik.

5. Menangani Sentuhan Pengguna

Untuk addon RecyclerView Selection untuk berfungsi dengan benar, setiap kali pengguna menyentuh widget RecyclerView, Anda harus menerjemahkan koordinat sentuhan menjadi objek ItemDetails.

Buat kelas baru yang memperluas kelas ItemDetailsLookup, dan tambahkan konstruktor untuknya yang dapat menerima widget RecyclerView sebagai argumen. Perhatikan bahwa, karena kelasnya abstrak, Android Studio akan secara otomatis menghasilkan rintisan untuk metode abstraknya.

Seperti yang Anda lihat dalam kode di atas, metode getItemDetails() menerima objek MotionEvent. Dengan melewatkan koordinat X dan Y event ke metode findChildViewUnder(), Anda dapat menentukan tampilan yang terkait dengan item daftar yang disentuh pengguna. Untuk mengonversi objek View menjadi objek ItemDetails, yang perlu Anda lakukan adalah memanggil metode getItemDetails(). Begini caranya:

6. Membuat Adapter

Anda sekarang membutuhkan adapter yang dapat mengikat daftar Anda ke widget RecyclerView Anda. Untuk membuatnya, buat kelas baru yang memperluas kelas RecyclerView.Adapter. Karena adaptor memerlukan akses ke daftar dan konteks aktivitas Anda, kelas baru harus memiliki konstruktor yang dapat menerima keduanya sebagai argumen.

Penting bahwa Anda secara eksplisit menunjukkan bahwa setiap item dari adapter ini akan memiliki pengidentifikasi stabil unik yang bertipe Long. Tempat terbaik untuk melakukannya adalah di dalam blok init.

Selain itu, untuk dapat menggunakan posisi item sebagai pengenal uniknya, Anda harus mengganti metode getItemId().

Karena kelas RecyclerView.Adapter abstrak, Anda sekarang harus override tiga metode lagi untuk membuat adapter Anda dapat digunakan.

Pertama, override metode getItemCount() untuk mengembalikan ukuran daftar.

Selanjutnya, override metode onCreateViewHolder(). Metode ini harus mengembalikan turunan dari kelas view holder yang Anda buat sebelumnya dalam tutorial ini. Untuk membuat instance seperti itu, Anda harus memanggil konstruktor dari kelas dan meneruskan layout yang meningkat dari item daftar Anda ke sana. Untuk mengembangkan layout, gunakan metode inflate() dari kelas LayoutInflater. Begini caranya:

Terakhir, override metode onBindViewHolder() dan menginisialisasi properti text dari kedua widget TextView yang ada di view holder.

7. Menampilkan Daftar

Pada titik ini, Anda memiliki hampir semua yang Anda butuhkan untuk membuat daftar Anda. Namun, Anda harus tetap menentukan bagaimana Anda ingin item-item daftar diposisikan. Untuk saat ini, mari kita tempatkan mereka di bawah yang lain menggunakan instance LinearLayoutManager.

Untuk kinerja optimal, saya sarankan Anda juga menunjukkan bahwa ukuran widget RecyclerView tidak akan berubah selama runtime.

Tambahkan kode berikut ke main activity Anda:

Terakhir, tetapkan instance baru adapter Anda ke properti adapter widget RecyclerView.

Jika Anda menjalankan aplikasi sekarang, Anda akan dapat melihat daftar.

App displaying list

8. Membuat Selection Tracker

Widget RecyclerView masih tidak memungkinkan Anda untuk memilih item. Untuk mengaktifkan pemilihan multi-item, Anda akan memerlukan objek SelectionTracker dalam activity Anda.

Anda dapat menginisialisasi pelacak menggunakan kelas SelectionTracker.Builder. Untuk konstruktornya, Anda harus memberikan ID seleksi, widget RecyclerView Anda, key provider, kelas pencarian detail item Anda, dan strategi penyimpanan.

Anda bebas menggunakan string apa pun sebagai ID seleksi. Sebagai key provider, Anda dapat menggunakan instance dari kelas StableIdKeyProvider.

Pustaka RecyclerView Selection menawarkan berbagai strategi penyimpanan, yang semuanya memastikan bahwa item yang dipilih tidak dipilih saat perangkat pengguna diputar atau ketika sistem Android menutup aplikasi Anda saat terjadi krisis sumber daya. Untuk saat ini, karena jenis kunci pilihan Anda adalah Long, Anda harus menggunakan objek StorageStrategy bertipe Long.

Setelah Builder siap, Anda dapat memanggil metode withSelectionPredicate() untuk menentukan berapa banyak item yang ingin Anda izinkan pengguna untuk memilih. Untuk mendukung pemilihan multi-item, sebagai argumen untuk metode ini, Anda harus melewati objek SelectionPredicateyang dikembalikan oleh metode createSelectAnything().

Karenanya, tambahkan kode berikut di dalam metode onCreate() activity Anda:

Untuk memaksimalkan strategi penyimpanan, Anda harus selalu mencoba memulihkan keadaan pelacak di dalam metode onCreate().

Demikian pula, Anda harus memastikan Anda menyimpan status pelacak di dalam metode onSaveInstanceState() activity Anda.

Pemilihan pelacak tidak terlalu berguna kecuali jika dikaitkan dengan adapter Anda. Oleh karena itu, teruskanlah ke adapter dengan memanggil metode setTracker().

Metode setTracker() belum ada, jadi tambahkan kode berikut di dalam kelas adapter Anda:

Jika Anda mencoba menjalankan aplikasi pada titik ini, Anda akan dapat memilih item dalam daftar. Ketika Anda memasuki mode pemilihan multi-item dengan menekan lama item daftar, Anda akan dapat merasakan getaran singkat pada sebagian besar perangkat. Namun, karena item yang dipilih saat ini tidak dapat dibedakan dari yang tidak dipilih, Anda tidak akan memiliki umpan balik visual. Untuk memperbaikinya, Anda perlu membuat beberapa perubahan di dalam metode onBindViewHolder() pada adapter Anda.

Cara konvensional untuk menyorot item yang dipilih adalah mengubah warna latar belakangnya. Oleh karena itu, Anda sekarang harus mengubah warna latar belakang widget LinearLayout yang ada di file XML layout item Anda. Untuk mendapatkan referensi, dapatkan referensi ke induk dari salah satu widget TextView yang tersedia di view holder.

Tambahkan kode berikut tepat sebelum akhir dari metode onBindViewHolder():

Selanjutnya, Anda dapat memanggil metode isSelected()dari objek SelectionTracker untuk menentukan apakah suatu item dipilih atau tidak.

Kode berikut menunjukkan kepada Anda cara mengubah warna latar belakang item yang dipilih ke cyan:

Jika Anda menjalankan aplikasinya sekarang, Anda harusnya dapat melihat item yang Anda pilih.

App displaying list with selected items

9. Membuat Selection Observer

Biasanya, Anda ingin menunjukkan kepada pengguna berapa banyak item yang dipilih saat ini. Dengan pustaka RecyclerView Selection, melakukannya sangatlah mudah.

Kaitkan objek SelectionObserver dengan pelacak pilihan Anda dengan memanggil metode addObserver(). Di dalam metode onSelectionChanged() dari observer, Anda dapat mendeteksi perubahan dalam jumlah item yang dipilih.

Bagaimana Anda menampilkan jumlah item yang dipilih itu terserah Anda. Untuk saat ini, saya sarankan Anda menampilkan nomor secara langsung di action bar activiy Anda. Secara opsional, Anda juga dapat mengubah warna latar belakang action bar untuk memberi tahu pengguna bahwa ada pilihan aktif dalam daftar. Kode berikut menunjukkan caranya:

Jika Anda menjalankan aplikasi lagi, Anda sekarang akan melihat perubahan judul untuk mencerminkan jumlah item daftar yang Anda pilih.

App displaying count of selected items

Kesimpulan

Dalam tutorial ini, Anda belajar cara menggunakan pustaka addon RecyclerView Selection untuk menambahkan dukungan pemilihan item sederhana ke widget RecyclerView. Anda juga mempelajari cara mengubah tampilan item yang dipilih secara dinamis sehingga pengguna dapat membedakannya dari item yang tidak dipilih.

Untuk mempelajari lebih lanjut tentang pustakanya, lihat dokumentasi resminya.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.