Dasar-Dasar Android Kotlin 07.3: GridLayout dengan RecyclerView

Codelab ini adalah bagian dari kursus Dasar-Dasar Android Kotlin. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan 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 dalam RecyclerView. Sebaiknya pelajari semua codelab secara berurutan, karena Anda perlu menyelesaikan setiap tugas langkah demi langkah.

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 memungkinkan Anda menggunakan pengelola tata letak untuk mengontrol dan mengubah strategi tata letak. LayoutManager mengelola cara item dalam 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, dengan membangun 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:

• Membangun antarmuka pengguna dasar menggunakan Activity, Fragments, dan Views
• Menavigasi antar-fragmen dan menggunakan safeArgs untuk meneruskan data antar-fragmen
• Melihat model, melihat factory model, dan transformasi
• LiveData dan pengamatnya
• Cara membuat database Room, membuat DAO, dan menentukan entity
• Cara menggunakan coroutine untuk tugas database dan tugas berjalan lama 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 mengubah data

Yang akan Anda pelajari

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

Yang akan Anda lakukan

• Buat 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, yang diwakili oleh fragmen, seperti yang ditunjukkan pada gambar di bawah.

Layar pertama, yang ditampilkan di sebelah kiri, memiliki tombol untuk memulai dan menghentikan pelacakan. Layar menampilkan beberapa data tidur pengguna. Tombol Hapus akan menghapus semua data yang telah dikumpulkan aplikasi untuk pengguna secara permanen. 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 dalam RecyclerView. Dalam codelab ini, Anda akan mengubah aplikasi untuk menggunakan GridLayout. Layar akhir akan terlihat seperti screenshot di bawah.

Dalam 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 tampilan turunan secara horizontal dan vertikal. Misalnya, Anda dapat menggunakan LinearLayoutManager untuk membuat korsel gambar yang digulirkan pengguna secara horizontal.

GridLayout

Kasus penggunaan umum lainnya adalah kebutuhan untuk 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 ditampilkan 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 memberi pengguna ringkasan kualitas tidur mereka secara sekilas.

Cara GridLayout menata letak item

GridLayout mengatur 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.)

Dalam dua contoh pertama yang ditampilkan di bawah, setiap baris terdiri dari tiga rentang. 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 menempati satu rentang, tetapi Anda dapat membuat item lebih lebar dengan menentukan jumlah rentang yang akan ditempatinya. Misalnya, item teratas di layar paling kanan (ditampilkan di bawah) menggunakan tiga rentang.

Tips: Span dapat berarti "baris" atau "kolom". 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 rentang, dan "rentang" tidak bergantung pada arah. Dalam konfigurasi vertikal (default), "span" dan "column" setara.

Dalam tugas ini, Anda akan mengambil RecyclerView yang telah diselesaikan dalam latihan terakhir dan memperbaruinya untuk menampilkan data menggunakan GridLayoutManager. Anda dapat terus menggunakan aplikasi sleep-tracker dari codelab sebelumnya, atau 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 rentang.
   
   Konstruktor GridLayoutManager menggunakan hingga empat argumen: konteks, yaitu activity, jumlah rentang (kolom, dalam tata letak vertikal default), orientasi (default adalah vertikal), dan apakah ini tata letak terbalik (default 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 beri komentar pada kode, 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 melakukannya, Anda harus memperbarui beberapa hal. Berikut 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. Verifikasi di tampilan Desain bahwa quality_string TextView diposisikan di bawah ImageView.

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

5. Jalankan aplikasi dan amati cara data tidur ditampilkan dalam petak.
   
   Perhatikan bahwa ConstraintLayout masih menggunakan seluruh lebar. GridLayoutManager memberi tampilan Anda lebar tetap, berdasarkan rentangnya. GridLayoutManager berupaya sebaik mungkin untuk memenuhi semua batasan saat menata letak petak, menambahkan ruang kosong, atau memangkas item.

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

val manager = GridLayoutManager(activity, 1)

7. Ubah jumlah rentang untuk GridLayoutManager menjadi 10 dan jalankan aplikasi. Perhatikan bahwa GridLayoutManager akan memuat 10 item dalam satu baris, tetapi item sekarang terpotong.
8. Ubah jumlah rentang menjadi 5 dan arah menjadi GridLayoutManager.VERTICAL. Jalankan aplikasi dan perhatikan cara Anda dapat men-scroll secara horizontal. Anda memerlukan tata letak yang berbeda agar ini terlihat bagus.

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

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

Project Android Studio: RecyclerViewGridLayout

• Pengelola tata letak mengelola cara item dalam RecyclerView diatur.
• RecyclerView dilengkapi dengan pengelola tata letak siap pakai untuk kasus penggunaan umum seperti LinearLayout untuk daftar horizontal dan vertikal, serta GridLayout untuk petak.
• Untuk kasus penggunaan yang lebih rumit, terapkan LayoutManager kustom.
• Dari perspektif desain, GridLayout paling baik digunakan untuk daftar item yang dapat ditampilkan sebagai ikon atau gambar.
• GridLayout mengatur item dalam petak baris dan kolom. Dengan asumsi scrolling vertikal, setiap item dalam baris memerlukan "span".
• Anda dapat menyesuaikan jumlah rentang yang ditempati item, sehingga membuat petak yang lebih menarik tanpa memerlukan pengelola tata letak kustom.
• Buat tata letak item untuk satu item dalam petak, dan pengelola tata letak akan mengatur item.
• Anda dapat menetapkan LayoutManager untuk RecyclerView baik dalam file tata letak XML yang berisi elemen <RecyclerView>, atau 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. Instruktur menentukan hal berikut:

• Memberikan pekerjaan rumah jika diperlukan.
• Memberi tahu siswa cara mengirimkan tugas pekerjaan rumah.
• Memberi nilai tugas pekerjaan rumah.

Instruktur bisa menggunakan saran ini sesuai kebutuhan, dan bebas menugaskan pekerjaan rumah lain yang dirasa cocok.

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

Jawab pertanyaan-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 di petak.

▢ Dimensi item di petak.

▢ Jumlah kolom dalam petak yang memiliki orientasi vertikal.

Mulai pelajaran 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 dalam RecyclerView. Sebaiknya pelajari semua codelab secara berurutan, karena Anda perlu menyelesaikan setiap tugas langkah demi langkah.

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