Membuat RecyclerView

RecyclerView adalah subkelas ViewGroup dan lebih efisien dalam hal sumber daya untuk menampilkan daftar yang bisa digulir. Sebagai ganti membuat tampilan untuk setiap item, apakah bisa dilihat atau tidak, RecyclerView membuat daftar item dengan jumlah terbatas dan menggunakan item daftar kembali untuk konten yang bisa dilihat.

Dalam seri praktik ini, kita akan menggunakan RecyclerView untuk:

• Menampilan daftar item yang bisa digulir.
• Menambahkan handler klik ke setiap item.
• Menambahkan item ke daftar menggunakan tombol aksi mengambang (FAB), tombol merah muda di tangkapan layar berikut. Tombol aksi mengambang bisa digunakan untuk tindakan umum atau tindakan yang dipromosikan, yaitu, tindakan yang kita ingin agar dilakukan pengguna.

PAda postingan ini, kita akan membuat aplikasi yang menggunakan RecyclerView untuk menampilkan daftar item sebagai daftar yang bisa digulir dan mengaitkan perilaku klik dengan item daftar ini. Menggunakan tombol aksi mengambang untuk memungkinkan pengguna menambahkan item ke RecyclerView.

 

1. Di hierarki file, temukan folder Gradle Scripts (3).
2. Luaskan Gradle Scripts, jika perlu, dan buka file build.gradle (Module: app)

 

1. Di akhir file build.gradle (Module: app), temukan bagian dependensi.
2. Tambahkan kedua dependensi ini sebagai dua baris di dalam bagian dependensi:

Membuat Array kumpulan data

 

Sebelum kita bisa menampilkan apa pun, kita memerlukan data untuk ditampilkan. Di aplikasi yang lebih rumit, data kita bisa berasal dari penyimpanan internal (file, database SQLite, preferensi yang disimpan), dari aplikasi lain (Kontak, Foto), atau dari internet (storage awan, Google Spreadsheet, atau sumber data apa pun dengan API). Untuk latihan ini, kita akan menyimulasikan data dengan membuatnya di metode onCreate() aktivitas utama.

Pada MainActivity, tambahkan beberapa kode berikut:

Jalankan aplikasi, sekarang array yang akan kita tampilkan belum ada di layout, namun kita bisa melihatnya pada logchat

Membuat RecyclerViewer

Di aplikasi sebelumnya, kita menggunakan LinearLayout untuk menata tampilan kita. Untuk mengakomodasi RecyclerView dan tombol aksi mengambang yang nanti kita tambahkan, kita perlu menggunakan grup tampilan yang berbeda yang disebut sebagai layout koordinator. CoordinatorLayout lebih fleksibel dari LinearLayout saat menata tampilan. Misalnya, tampilan seperti tombol aksi mengambang bisa terhampar di atas tampilan lain.

1. Buka build.gradle (Module: app) dan verifikasi apakah dependensi tampilan recycler tersedia.

   compile 'com.android.support:recyclerview-v7:24.1.1'
   

2. Buka activity_main.xml.
3. Pilih semua kode di activity_main.xml dan ganti dengan kode ini:

Buat layout item kata sederhana menggunakan LinearLayout vertikan dengan TextView:

1. Klik kanan folder app/res/layout dan pilih New > Layout resource file.
2. Beri nama file wordlist_item dan klik OK.

 

 

Tambahkan XML berikut:

Kita bisa menggunakan gaya untuk mengizinkan elemen berbagi grup atribut tampilan. Satu cara mudah untuk membuat gaya adalah dengan mengekstrak gaya elemen UI yang sudah kita buat. Ekstrak informasi gaya untuk tampilan teks kata:

1. Saat wordlist_item.xml terbuka, arahkan mouse ke atas bagian TextView yang baru kita buat dan Klik kanan > Refactor > Extract > Style.
2. Dalam dialog Extract Android Style dialog,
   • Beri nama gaya kita dengan word_title.
   • Biarkan semua kotak tidak tercentang.
   • Centang kotak Launch ‘Use Style Where Possible‘.
   • Klik OK.
3. Saat diminta, terapkan gaya pada Whole Project.
4. Temukan dan periksa gaya word_title di values/styles.xml.

ndroid menggunakan adaptor (dari kelas Adapter) untuk menghubungkan data dengan tampilannya. Ada berbagai tipe adaptor yang tersedia. kita juga bisa menulis adaptor khusus kita sendiri. Dalam tugas ini, kita akan membuat adaptor yang mengaitkan daftar kata kita dengan tampilan item daftar kata.

Untuk menghubungkan data dengan tampilan, adaptor perlu mengetahui tampilan tujuan penempatan data. Dengan demikian, adaptor berisi holder tampilan (dari kelas ViewHolder) yang menjelaskan tampilan item dan posisinya di dalam RecyclerView.

Buat class baru WordListAdapter yang extends ke RecyclerViewer, kemudian implemen semua override method dan yambah beberapa kode berikut:

 

Jalankan aplikasi kita untuk memastikan tidak ada kesalahan. kita masih akan melihat tampilan kosong. Perhatikan peringatan E/RecyclerView: No adapter attached; skipping layout di logcat.

Tambahkan attribute mWordList dan mInflater berikut, dan pastikan untuk membuat constructor untuk menampung kedua attribute ini

 

Isikan metode onCreateViewHolder() dengan kode berikut. Metode onCreateViewHolder sama dengan metode onCreate. Metode ini memekarkan layout item dan mengembalikan holder tampilan dengan layout dan adaptor.

Setelah memiliki adaptor dengan holder tampilan, kita akhirnya bisa membuat RecyclerView dan menghubungkan semua bagian untuk menampilkan data.

1. Buka MainActivity.java
2. Tambahkan variabel anggota ke MainActivity untuk RecyclerView dan adaptor.

3.Dalam metode onCreate Aktivitas, tambahkan kode berikut yang membuat RecyclerView dan menghubungkannya dengan adaptor dan data. Baca komentar kode! Perhatikan bahwa kita harus menyisipkan kode ini setelah inisialisasi mWordList.

Jalankan aplikasi

PAda WordListAdapter.java tambahkan beberapa kode berikut:

Jalankan aplikasi. Klik item untuk melihat perubahan teksnya.

 

Menambahkan FAB untuk menyisipkan item

FAB adalah kontrol standar dari Spesifikasi Desain Material dan merupakan bagian dari Pustaka Dukungan Android. kita akan mempelajari selengkapnya di bab tentang Desain Material. Kontrol UI ini memiliki properti yang telah didefinisikan sebelumnya. Untuk membuat FAB untuk aplikasi kita, tambahkan kode berikut di dalam layout koordinator activity_main.xml.

Android menyediakan pustaka ikon untuk ikon Android standar. ic_add_black_24dp adalah salah satu dari ikon standar. Kita harus menambahkannya ke sumber daya yang dapat digambar untuk menggunakannya.

1. Klik kanan folder drawable kita.
2. Pilih New > Vector Asset
3. Pastikan Asset Type adalah Material Icon.
4. Klik tombol ikon di samping Icon.
5. Di bagian Content, temukan tanda +. Nama sumber daya adalah ic_add_black_24dp.
6. Biarkan semuanya tidak dicentang dan klik Next.
7. Klik Finish.

Kemudian kita tambahkan fungsi agar dapat terhubung dengan layout, pada onCreate di mainActivity tambahkan berikut:

Jalankan aplikasi