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

Memulai dengan RecyclerView dan CardView di Android

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Jika Anda tertarik dalam membangun aplikasi Android yang menggunakan daftar untuk menampilkan data, Android Lollipop memiliki dua widget baru agar membuat hidup Anda lebih mudah, RecyclerView dan CardView. Menggunakan widget ini, sangat mudah untuk memberikan aplikasi Anda tampilan dan nuansa yang sesuai dengan pedoman yang disebutkan dalam spesifikasi material desain Google.

Prasyarat

Untuk mengikutinya, Anda harus menggunakan versi terbaru dari Android Studio. Anda bisa mendapatkannya dari situs web Android Developer.

1. Mendukung Versi Lama

Pada saat penulisan, kurang dari 2% dari perangkat Android yang menjalankan Android Lollipop. Namun, berkat Support Library v7 Anda dapat menggunakan widget RecyclerView dan CardView pada perangkat yang menjalankan Android versi lama dengan menambahkan baris berikut ke bagian dependencies dalam file build.grade proyek Anda:

2. Membuat sebuah CardView

CardView adalah ViewGroup. Seperti ViewGroup yang lainnya, ini dapat ditambahkan ke Activity atau Fragment Anda menggunakan file layout XML.

Untuk membuat CardView kosong, Anda harus menambahkan kode berikut ke layout XML seperti yang ditunjukkan pada potongan berikut:

Sebagai contoh yang lebih realistis, sekarang mari kita membuat sebuah LinearLayout dan menempatkan CardView di dalamnya. CardView bisa mewakili, misalnya, seseorang dan berisi berikut:

  • TextView untuk menampilkan nama seseorang
  • TextView untuk menampilkan usia seseorang
  • ImageView untuk menampilkan foto seseorang

Ini adalah apa yang akan terlihat pada XML:

Jika XML ini digunakan sebagai layout dari Activity, dengan field TextView dan ImageView yang ditetapkan ke nilai yang bermakna, maka ini adalah bagaimana hal itu akan di-render pada perangkat Android:

A Stand-alone Card

3. Membuat RecyclerView

Langkah 1: Mendefinisikannya dalam Layout

Menggunakan instance RecyclerView adalah sedikit lebih rumit. Namun, mendefinisikannya dalam file layout XML ini cukup sederhana. Anda dapat menentukannya dalam layout sebagai berikut:

Untuk mendapatkan handle untuknya pada Activity Anda, gunakan potongan berikut:

Jika Anda yakin bahwa ukuran RecyclerView tidak akan berubah, Anda dapat menambahkan kode berikut untuk meningkatkan kinerjanya:

Langkah 2: Menggunakan LayoutManager

Tidak seperti ListViewRecyclerView membutuhkan LayoutManager untuk mengatur posisi itemnya.  Anda bisa menentukan LayoutManager sendiri dengan memperluas kelas RecyclerView.LayoutManager. Namun, dalam kebanyakan kasus, Anda bisa hanya menggunakan salah satu dari sub-kelas LayoutManager yang telah ditetapkan:

  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager

Dalam tutorial ini, saya akan menggunakan LinearLayoutManager. Sub-kelas LayoutManager ini akan, secara default, membuat RecyclerView Anda terlihat seperti ListView.

Langkah 3: Mendefinisikan Data

Hanya seperti ListViewRecyclerView membutuhkan sebuah adapter untuk mengakses datanya. Tapi sebelum kita membuat sebuah adapter, mari kita membuat data yang kita dapat bekerja dengannya. Membuat kelas sederhana untuk mewakili seseorang dan kemudian menulis sebuah metode untuk menginisialisasi List dari objek Person:

Langkah 4: Membuat Adapter

Untuk membuat sebuah adapter yang dapat digunakan RecyclerView, Anda harus memperpanjang RecyclerView.Adapter. Adapter ini mengikuti pola desain view holder, yang berarti adalah Anda yang menentukan kelas kustom yang meperluas RecyclerView.ViewHolder. Pola ini meminimalkan jumlah panggilan ke metode mahal findViewById.

Sebelumnya dalam tutorial ini, kita sudah mendefinisikan XML layout untuk CardView yang mewakili seseorang. Kita akan menggunakan kembali layout tersebut sekarang. Di dalam constructor dari ViewHolder kustom kita, menginisialisasi views yang termasuk ke dalam item dari RecyclerView kita.

Berikutnya, tambahkan constructor ke adapter kustom sehingga ia memiliki handle ke datanya yang ditampilkan RecyclerView. Karena data kita adalah dalam bentuk List dari objek Person, gunakan kode berikut:

RecyclerView.Adapter memiliki tiga metode abstrak yang harus kita timpa. Mari kita mulai dengan metode getItemCount. Ini harus mengembalikan jumlah item yang ada dalam data. Karena data kita dalam bentuk List, kita hanya perlu memanggil metode size pada objek List:

Selanjutnya, timpa metode onCreateViewHolder. Seperti namanya, metode ini dipanggil ketika ViewHolder kustom harus diinisialisasi. Kita menentukan layout yang harus digunakan masing-masing item dari RecyclerView. Hal ini dilakukan oleh memompa layout menggunakan LayoutInflater, melewatkan output ke constructor dari ViewHolder kustom.

Menimpa onBindViewHolder untuk menentukan konten dari masing-masing item dari RecyclerView. Metode ini sangat mirip dengan metode getView dari adapter ListView. Dalam contoh kita, di sini adalah di mana Anda harus menetapkan nilai-nilai dari field nama, usia, dan foto dari CardView.

Akhirnya, Anda perlu menimpa metode onAttachedToRecyclerView. Untuk sekarang, kita dapat hanya menggunakan penerapan superclass dari metode ini seperti yang ditunjukkan di bawah ini.

Langkah 5: Menggunakan Adapter

Sekarang bahwa adapter telah siap, tambahkan kode berikut ke Activity Anda untuk menginisialisasi dan menggunakan adapter dengan memanggil constructor dari adapter dan metode setAdapter dari RecyclerView:

Langkah 6: Kompilasi dan Jalankan

Ketika Anda menjalankan contoh RecyclerView pada perangkat Android, Anda harus melihat sesuatu yang mirip dengan hasil sebagai berikut.

Kesimpulan

Dalam tutorial ini, Anda telah belajar bagaimana menggunakan widget CardView dan RecyclerView yang diperkenalkan pada Android Lollipop. Anda juga telah melihat contoh bagaimana penggunaan widget ini dalam aplikasi Material Desain. Perhatikan bahwa meskipun RecyclerView dapat melakukan hampir segala sesuatu yang bisa dilakukan ListView, untuk datasets kecil, menggunakan ListView masih lebih baik karena itu membutuhkan lebih sedikit baris kode.

Anda dapat merujuk ke Referensi Pengembang Android untuk informasi lebih lanjut tentang kelas CardView dan RecyclerView.


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.