Dasar-Dasar Android Kotlin 07.3: GridLayout dengan RecyclerView

Codelab ini adalah bagian dari kursus Dasar-Dasar Kotlin Android. Anda akan mendapatkan manfaat maksimal dari kursus ini jika Anda mengerjakan codelab secara berurutan. Semua codelab kursus tercantum di halaman landing codelab Dasar-Dasar Android Kotlin.

Codelab ini adalah bagian dari rangkaian yang memandu Anda dalam membuat aplikasi pelacak tidur yang menampilkan data tidur di RecyclerView. Sebaiknya Anda melakukan semua codelab secara berurutan, karena codelab ini menangani tugas secara bertahap.

Codelab dalam seri ini adalah:

• 7.1 Dasar-dasar RecyclerView
• 7.2 DiffUtil dan data binding dengan RecyclerView
• 7.3 GridLayout dengan RecyclerView
• 7.4 Berinteraksi dengan item RecyclerView
• 7.5 Header di RecyclerView

Pengantar

Salah satu keunggulan utama RecyclerView adalah Anda dapat menggunakan pengelola tata letak untuk mengontrol dan mengubah strategi tata letak. LayoutManager mengelola cara item di RecyclerView diatur.

RecyclerView dilengkapi dengan pengelola tata letak siap pakai untuk kasus penggunaan umum. Misalnya, Anda dapat menggunakan LinearLayout untuk daftar horizontal dan vertikal, atau GridLayout untuk petak. Untuk kasus penggunaan yang lebih rumit, Anda perlu menerapkan LayoutManager kustom.

Dalam codelab ini, Anda akan mempelajari cara menampilkan data menggunakan tata letak petak, bukan daftar, yang dibuat di aplikasi pelacak tidur dari codelab sebelumnya. (Jika Anda tidak memiliki aplikasi dari codelab sebelumnya, Anda dapat mendownload kode awal untuk codelab ini.)

Yang harus sudah Anda ketahui

Anda harus memahami:

• Membuat antarmuka pengguna dasar menggunakan Activity, Fragments, dan Views
• Menavigasi antar-fragmen dan menggunakan safeArgs untuk meneruskan data antar-fragmen
• Melihat model, melihat pabrik model, dan transformasi
• LiveData dan pengamatnya
• Cara membuat database Room, membuat DAO, dan menentukan entity
• Cara menggunakan coroutine untuk tugas database dan tugas jangka panjang lainnya
• Cara menerapkan RecyclerView dasar dengan Adapter, ViewHolder, dan tata letak item
• Cara menerapkan data binding untuk RecyclerView
• Cara membuat dan menggunakan adaptor binding untuk mentransformasi data

Yang akan Anda pelajari

• Cara menggunakan LayoutManager yang berbeda untuk mengubah cara data Anda ditampilkan di RecyclerView
• Cara membuat tata letak petak untuk data tidur

Yang akan Anda lakukan

• Mem-build aplikasi pelacak tidur dari codelab sebelumnya dalam seri ini.
• Ganti daftar data tidur yang ditampilkan oleh RecyclerView di aplikasi dengan petak data tidur.

Aplikasi pelacak tidur memiliki dua layar, diwakili oleh fragmen, seperti yang ditampilkan dalam gambar di bawah ini.

Layar pertama, yang ditampilkan di sebelah kiri, memiliki tombol untuk memulai dan menghentikan pelacakan. Layar menampilkan beberapa data tidur pengguna. Tombol Hapus secara permanen menghapus semua data yang telah dikumpulkan oleh aplikasi untuk pengguna. Layar kedua, yang ditampilkan di sebelah kanan, adalah untuk memilih rating kualitas tidur.

Aplikasi ini menggunakan arsitektur yang disederhanakan dengan pengontrol UI, model tampilan dan LiveData, serta database Room untuk mempertahankan data tidur.

Data tidur ditampilkan di RecyclerView. Dalam codelab ini, Anda akan mengubah aplikasi untuk menggunakan GridLayout. Layar akhir akan terlihat seperti screenshot di bawah.

Pada codelab sebelumnya, saat menambahkan RecyclerView ke fragment_sleep_tracker.xml, Anda menambahkan LinearLayoutManager tanpa penyesuaian apa pun. Kode ini menampilkan data sebagai daftar vertikal.

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

LinearLayoutManager adalah pengelola tata letak yang paling umum dan mudah untuk RecyclerView, dan mendukung penempatan horizontal dan vertikal tampilan turunan. Misalnya, Anda dapat menggunakan LinearLayoutManager untuk membuat carousel gambar yang di-scroll pengguna secara horizontal.

GridLayout

Kasus penggunaan umum lainnya adalah perlu menampilkan banyak data kepada pengguna, yang dapat Anda lakukan menggunakan GridLayout. GridLayoutManager untuk RecyclerView menata letak data sebagai petak yang dapat di-scroll, seperti yang ditampilkan di bawah ini.

Dari perspektif desain, GridLayout paling baik untuk daftar yang dapat direpresentasikan sebagai ikon atau gambar, seperti daftar dalam aplikasi penjelajahan foto. Di aplikasi pelacak tidur, Anda dapat menampilkan setiap malam tidur sebagai petak ikon besar. Desain ini akan memberikan gambaran sekilas tentang kualitas tidur Anda kepada pengguna.

Cara GridLayout menata letak item

GridLayout menyusun item dalam petak baris dan kolom. Dengan asumsi scrolling vertikal, secara default, setiap item dalam baris memerlukan satu "span". (Dalam hal ini, satu span sama dengan lebar satu kolom.)

Pada dua contoh pertama yang ditampilkan di bawah, setiap baris terdiri dari tiga span. Secara default, GridLayoutManager menata letak setiap item dalam satu span hingga jumlah span, yang Anda tentukan. Saat mencapai jumlah span, span ini akan dibulatkan ke baris berikutnya.

Secara default, setiap item menggunakan satu span, tetapi Anda dapat membuat item menjadi lebih luas dengan menentukan jumlah span yang akan mengisinya. Misalnya, item teratas di layar paling kanan (ditampilkan di bawah) memerlukan tiga span.

Tips: Span dapat berarti "row" atau "column." Dengan GridLayoutManager, Anda menggunakan spanCount untuk menunjukkan jumlah kolom atau baris yang dimiliki petak, serta berapa banyak ruang petak yang digunakan item secara horizontal atau vertikal.

Saat membuat GridLayoutManager, Anda menentukan orientasi secara terpisah dari jumlah span, dan "span" adalah "direction-agnostic." Dalam konfigurasi vertikal (default), "span" dan "kolom" setara.

Dalam tugas ini, Anda mengambil RecyclerView yang telah Anda selesaikan dalam latihan terakhir dan memperbaruinya untuk menampilkan data menggunakan GridLayoutManager. Anda dapat terus menggunakan aplikasi pelacak tidur dari codelab sebelumnya, atau Anda dapat mendownload aplikasi RecyclerViewGridLayout-Starter dari GitHub.

Langkah 1: Ubah LayoutManager

1. Jika perlu, download aplikasi RecyclerViewGridLayout-Starter untuk codelab ini dari GitHub dan buka project di Android Studio.
2. Buka file tata letak fragment_sleep_tracker.xml.
3. Hapus pengelola tata letak dari definisi sleep_list RecyclerView.

Kode yang akan dihapus:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager

4. Buka SleepTrackerFragment.kt.
5. Di OnCreateView(), tepat sebelum pernyataan return, buat GridLayoutManager vertikal baru dari atas ke bawah dengan 3 span.
   
   Konstruktor GridLayoutManager membutuhkan maksimal empat argumen: konteks, yaitu activity, angka span (kolom, dalam tata letak vertikal default), orientasi (default adalah vertikal), dan apakah tata letaknya terbalik (default-nya adalah false).

val manager = GridLayoutManager(activity, 3)

6. Di bawah baris tersebut, beri tahu RecyclerView untuk menggunakan GridLayoutManager ini. RecyclerView ada di objek binding dan disebut sleepList. (Lihat fragment_sleep_tracker.xml.)

binding.sleepList.layoutManager = manager

Langkah 2: Ubah tata letak

Tata letak saat ini di list_item_sleep_night.xml menampilkan data dengan menggunakan seluruh baris per malam. Pada langkah ini, Anda akan menentukan tata letak item persegi yang lebih ringkas untuk petak.

Tips: Jika Anda tidak ingin kehilangan tata letak saat ini, buat salinan file terlebih dahulu dan beri nama list_item_sleep_night_linear.xml, atau jadikan kode sebagai komentar, bukan menghapusnya.

1. Buka list_item_sleep_night.xml.
2. Hapus sleep_length TextView, karena desain baru tidak memerlukannya.
3. Pindahkan quality_string TextView sehingga ditampilkan di bawah ImageView. Untuk melakukan itu, Anda perlu memperbarui beberapa hal. Berikut adalah tata letak akhir untuk quality_string TextView:

<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />

4. Verifikasikan dalam tampilan Design bahwa TextView quality_string diposisikan di bawah ImageView.

Karena menggunakan data binding, Anda tidak perlu mengubah apa pun di Adapter. Kode seharusnya berfungsi, dan daftar akan ditampilkan sebagai petak.

5. Jalankan aplikasi dan amati bagaimana data tidur ditampilkan dalam kisi.
   
   Perhatikan bahwa ConstraintLayout masih berukuran keseluruhan. GridLayoutManager memberi tampilan Anda lebar tetap, berdasarkan spannya. GridLayoutManager melakukan yang terbaik untuk memenuhi semua batasan saat menata letak petak, menambahkan spasi kosong, atau memotong item.

6. Di SleepTrackerFragment, dalam kode yang membuat GridLayoutManager, ubah jumlah span untuk GridLayoutManger menjadi 1. Jalankan aplikasi, lalu Anda akan mendapatkan daftar.
   

val manager = GridLayoutManager(activity, 1)

7. Ubah jumlah span untuk GridLayoutManager menjadi 10 dan jalankan aplikasi. Perhatikan bahwa GridLayoutManager akan sesuai dengan 10 item berturut-turut, tetapi item sekarang terpotong.
8. Ubah jumlah rentang menjadi 5 dan arah ke GridLayoutManager.VERTICAL. Jalankan aplikasi dan perhatikan bagaimana Anda dapat men-scroll secara horizontal. Anda akan memerlukan tata letak yang berbeda agar tata letak ini terlihat bagus.

val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)

9. Jangan lupa untuk menetapkan jumlah rentang kembali ke 3 dan orientasi ke vertikal!

Project Android Studio: RecyclerViewGridLayout

• Pengelola tata letak mengelola bagaimana item dalam RecyclerView disusun.
• RecyclerView dilengkapi dengan pengelola tata letak siap pakai untuk kasus penggunaan umum seperti LinearLayout untuk daftar horizontal dan vertikal, dan GridLayout untuk petak.
• Untuk kasus penggunaan yang lebih rumit, implementasikan LayoutManager kustom.
• Dari perspektif desain, GridLayout paling baik digunakan untuk daftar item yang dapat ditampilkan sebagai ikon atau gambar.
• GridLayout menyusun item dalam petak baris dan kolom. Dengan asumsi scrolling vertikal, setiap item dalam baris memerlukan informasi yang disebut "span."
• Anda dapat menyesuaikan jumlah span yang dibutuhkan untuk sebuah item, sehingga membuat petak yang lebih menarik tanpa memerlukan pengelola tata letak khusus.
• Buat tata letak item untuk satu item dalam petak, dan pengelola tata letak akan menangani pengelolaan item.
• Anda dapat menetapkan LayoutManager untuk RecyclerView baik dalam file tata letak XML yang berisi elemen <RecyclerView>, maupun secara terprogram.

Kursus Udacity:

• Mengembangkan Aplikasi Android dengan Kotlin
• Bootcamp Kotlin untuk Pemrogram

Dokumentasi developer Android:

• Membuat Daftar dengan RecyclerView
• RecyclerView
• LayoutManager
• GridLayoutManager

Bagian ini mencantumkan kemungkinan tugas pekerjaan rumah untuk siswa yang mengerjakan codelab ini sebagai bagian dari kursus yang dipimpin oleh instruktur. Terserah instruktur untuk melakukan hal berikut:

• Tugaskan pekerjaan rumah jika diperlukan.
• Berkomunikasi dengan siswa cara mengirimkan tugas pekerjaan rumah.
• Beri nilai tugas pekerjaan rumah.

Instruktur dapat menggunakan saran ini sesedikit atau sebanyak yang mereka inginkan, dan harus bebas memberikan pekerjaan rumah lain yang dirasa sesuai.

Jika Anda mengerjakan codelab ini sendiri, silakan gunakan tugas pekerjaan rumah ini untuk menguji pengetahuan Anda.

Jawab pertanyaan berikut

Pertanyaan 1

Manakah dari berikut ini yang merupakan pengelola tata letak yang disediakan oleh Android? Pilih semua yang sesuai.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Pertanyaan 2

Apa yang dimaksud dengan "span"?

▢ Ukuran petak yang dibuat oleh GridLayoutManager.

▢ Lebar kolom dalam petak.

▢ Dimensi item dalam petak.

▢ Jumlah kolom dalam petak yang memiliki orientasi vertikal.

Mulai tutorial berikutnya: 7.4: Berinteraksi dengan item RecyclerView

Codelab ini adalah bagian dari rangkaian yang memandu Anda dalam membuat aplikasi pelacak tidur yang menampilkan data tidur di RecyclerView. Sebaiknya Anda melakukan semua codelab secara berurutan, karena codelab ini menangani tugas secara bertahap.

Codelab dalam seri ini adalah:

• 7.1 Dasar-dasar RecyclerView
• 7.2 DiffUtil dan data binding dengan RecyclerView
• 7.3 GridLayout dengan RecyclerView
• 7.4 Berinteraksi dengan item RecyclerView
• 7.5 Header di RecyclerView