Tata letak kanonis perangkat layar besar

Tata letak kanonis perangkat layar besar telah terbukti sebagai tata letak aplikasi serbaguna yang memberikan pengalaman pengguna yang optimal di perangkat layar besar.

Tata letak kanonis bersifat responsif dan adaptif. Tata letak ini mendukung ponsel layar kecil serta tablet, perangkat foldable, dan perangkat ChromeOS. Tata letak yang terinspirasi dari panduan Desain Material ini tidak hanya estetik, tetapi juga memiliki berbagai fungsi.

Framework Android menyertakan komponen khusus yang membuat implementasi tata letak menjadi mudah dan andal menggunakan tampilan atau Jetpack Compose.

Tata letak kanonis menciptakan UI yang menarik dan meningkatkan produktivitas yang menjadi dasar dari aplikasi yang hebat.

Jika Anda sudah terbiasa dengan tata letak kanonis perangkat layar besar, tetapi tidak yakin Android API mana yang akan digunakan untuk aplikasi Anda, buka Penerapan di bawah untuk membantu menentukan tata letak mana yang tepat untuk kasus penggunaan aplikasi Anda.

Daftar-detail

Tata letak daftar-detail memungkinkan pengguna menjelajahi daftar item yang berisi deskripsi, penjelasan, atau informasi tambahan lainnya—detail item.

Tata letak ini membagi jendela aplikasi menjadi dua panel berdampingan: satu untuk daftar, satu untuk detail. Pengguna memilih item dari daftar untuk menampilkan detail item. Deep link dalam detail akan menampilkan konten tambahan di panel detail.

Tampilan lebar yang diperluas (lihat class ukuran jendela) memuat daftar dan detail secara bersamaan. Pilihan item daftar akan memperbarui panel detail untuk menampilkan konten terkait untuk item yang dipilih.

Tampilan dengan lebar sedang dan rapat menampilkan daftar atau detail, bergantung pada interaksi pengguna dengan aplikasi. Jika hanya daftar yang terlihat, pemilihan item daftar akan menampilkan detail di tempat daftar tersebut. Jika hanya detail yang terlihat, menekan tombol kembali akan menampilkan ulang daftar.

Perubahan konfigurasi seperti perubahan orientasi perangkat atau perubahan ukuran jendela aplikasi dapat mengubah class ukuran jendela layar. Tata letak daftar-detail akan memberikan respons yang sesuai guna mempertahankan status aplikasi:

• Jika tampilan lebar yang diperluas yang menampilkan panel daftar dan detail dipersempit ke sedang atau rapat, panel detail akan tetap terlihat dan panel daftar disembunyikan
• Jika tampilan lebar sedang atau rapat hanya menampilkan panel detail dan class ukuran jendela diperlebar ke tampilan diperluas, daftar dan detail akan ditampilkan secara bersamaan, dan daftar akan menunjukkan jika item yang sesuai dengan konten di panel detail dipilih
• Jika tampilan lebar sedang atau rapat hanya menampilkan panel daftar dan diperlebar ke tampilan diperluas, daftar dan panel detail placeholder akan ditampilkan secara bersamaan

Tata letak daftar-detail cocok untuk aplikasi pesan, pengelola kontak, file browser, atau aplikasi apa pun yang kontennya diatur sebagai daftar item yang menampilkan informasi tambahan.

Implementasi

Tata letak daftar-detail dapat dibuat dengan berbagai teknologi, seperti Compose, tampilan, dan penyematan aktivitas (untuk aplikasi lama). Lihat Penerapan di bawah untuk membantu memutuskan teknologi yang paling sesuai untuk aplikasi Anda.

Compose

Paradigma deklaratif Compose mendukung logika class ukuran jendela yang menentukan apakah akan menampilkan panel daftar dan detail secara bersamaan (jika class ukuran jendela lebar diperluas) atau hanya panel daftar atau detail (jika class ukuran jendela lebar sedang atau rapat).

Untuk memastikan aliran data searah, angkat semua status, termasuk class ukuran jendela saat ini dan detail item yang saat ini dipilih (jika ada) sehingga semua composable memiliki akses ke data dan dapat merender dengan benar.

Saat hanya menampilkan panel detail di ukuran jendela kecil, tambahkan BackHandler untuk menghilangkan panel detail dan hanya menampilkan panel daftar. BackHandler bukan bagian dari navigasi aplikasi secara keseluruhan karena pengendali bergantung pada class ukuran jendela dan status detail yang dipilih.

Untuk contoh implementasi, lihat contoh Daftar-detail dengan Compose.

Tampilan dan fragmen

Library SlidingPaneLayout dirancang untuk implementasi mudah tata letak daftar-detail berdasarkan tampilan atau fragmen.

Pertama, deklarasikan SlidingPaneLayout sebagai elemen root tata letak XML Anda. Berikutnya, tambahkan dua elemen turunan—tampilan atau fragmen—yang mewakili konten daftar dan detail.

Implementasikan metodologi komunikasi untuk meneruskan data di antara tampilan atau fragmen daftar-detail. ViewModel direkomendasikan karena kemampuannya dalam menyimpan logika bisnis dan tidak terpengaruh oleh perubahan konfigurasi.

SlidingPaneLayout otomatis menentukan apakah akan menampilkan daftar dan detail secara bersamaan atau terpisah. Di jendela dengan ruang horizontal yang cukup untuk mengakomodasi keduanya, daftar dan detail akan muncul berdampingan. Di jendela yang tidak memiliki cukup ruang, daftar atau detail akan ditampilkan sesuai interaksi pengguna dengan aplikasi.

Untuk contoh implementasi, lihat contoh Daftar-detail dengan tampilan.

Penyematan aktivitas

Gunakan penyematan aktivitas agar aplikasi dengan banyak aktivitas lama dapat menampilkan dua aktivitas secara berdampingan di layar yang sama atau bertumpukan di atas satu sama lain. Jika aplikasi Anda mengimplementasikan daftar dan detail pada tata letak daftar-detail dalam aktivitas terpisah, penyematan aktivitas memungkinkan Anda membuat tata letak daftar-detail dengan mudah menggunakan pemfaktoran ulang minimal atau tanpa kode.

Implementasikan penyematan aktivitas dengan menentukan pemisahan jendela tugas menggunakan file konfigurasi XML. Pemisahan menentukan aktivitas utama yang memulai pemisahan dan aktivitas sekunder. Tentukan lebar tampilan minimum untuk pemisahan menggunakan titik henti sementara class ukuran jendela. Jika lebar tampilan berada di bawah titik henti sementara minimum, aktivitas akan ditampilkan di atas aktivitas yang lain. Misalnya, jika lebar tampilan minimum adalah 600 dp, aktivitas akan ditampilkan di atas aktivitas yang lain dalam tampilan rapat, dan akan ditampilkan secara berdampingan di tampilan sedang dan diperluas.

Fungsi penyematan aktivitas didukung di Android 12L (API level 32) dan yang lebih tinggi, tetapi mungkin juga tersedia di API level yang lebih rendah jika diterapkan oleh produsen perangkat. Jika penyematan aktivitas tidak tersedia di perangkat, perilaku fallback akan menyebabkan aktivitas daftar atau aktivitas detail menempati seluruh jendela aplikasi berdasarkan interaksi pengguna dengan aplikasi.

Untuk informasi selengkapnya, lihat Penyematan aktivitas.

Untuk contoh implementasi, lihat contoh Daftar-detail dengan penyematan aktivitas.

Feed

Tata letak feed mengatur elemen konten yang setara dalam petak yang dapat dikonfigurasi agar konten dalam jumlah besar dapat dilihat dengan cepat dan nyaman.

Ukuran dan posisi membentuk hubungan di antara elemen konten.

Pengelompokan konten dibuat dengan membuat elemen berukuran sama dan memosisikannya bersama-sama. Perhatian akan tertuju pada elemen jika dibuat lebih besar dari elemen di dekatnya.

Kartu dan daftar adalah komponen umum tata letak feed.

Tata letak feed mendukung tampilan untuk hampir semua ukuran karena petak dapat beradaptasi dari satu kolom scroll ke feed konten scroll multi-kolom.

Tata letak feed sangat cocok untuk aplikasi berita dan media sosial.

Implementasi

Compose

Feed terdiri dari sejumlah besar elemen konten di penampung scroll vertikal yang ditata dalam petak. Daftar lambat merender banyak item dalam kolom atau baris secara efisien. Petak lambat merender item dalam petak sehingga cocok untuk konfigurasi ukuran dan span item.

Konfigurasikan kolom tata letak petak berdasarkan area tampilan yang tersedia untuk menetapkan lebar minimum yang diizinkan untuk item petak. Saat menentukan item petak, sesuaikan span kolom untuk memfokuskan beberapa item dari yang lainnya.

Untuk header bagian, pembagi, atau item lain yang didesain guna mengisi lebar penuh feed, gunakan maxLineSpan agar mengisi lebar penuh tata letak.

Dalam tampilan dengan lebar rapat yang tidak memiliki cukup ruang untuk menampilkan lebih dari satu kolom, LazyVerticalGrid akan berperilaku seperti LazyColumn.

Untuk contoh implementasi, lihat contoh Feed dengan Compose.

Tampilan dan fragmen

RecyclerView merender banyak item dalam satu kolom secara efisien. GridLayoutManager menata letak item dalam petak sehingga memungkinkan konfigurasi ukuran dan span item.

Konfigurasikan kolom petak berdasarkan ukuran area tampilan yang tersedia untuk menetapkan lebar minimum yang diizinkan untuk item.

Strategi span default GridLayoutManager, yaitu satu span per item, dapat diganti dengan membuat SpanSizeLookup khusus. Sesuaikan span agar berfokus pada beberapa item daripada yang lain.

Dalam tampilan lebar rapat yang memiliki cukup ruang hanya untuk satu kolom, gunakan LinearLayoutManager, bukan GridLayoutManager.

Untuk contoh implementasi, lihat contoh Feed dengan tampilan.

Panel pendukung

Tata letak panel pendukung mengatur konten aplikasi ke dalam area tampilan utama dan sekunder.

Area tampilan utama mengisi sebagian besar jendela aplikasi (biasanya sekitar dua pertiga) dan berisi konten utama. Area tampilan sekunder adalah panel yang mengisi sisa jendela aplikasi dan menampilkan konten yang mendukung konten utama.

Tata letak panel pendukung berfungsi dengan baik pada tampilan lebar yang diperluas (lihat class ukuran jendela) dalam orientasi lanskap. Tampilan dengan lebar sedang atau rapat cocok untuk menampilkan area tampilan utama dan sekunder jika konten dapat disesuaikan dengan ruang tampilan yang lebih sempit, atau jika konten tambahan pada awalnya dapat disembunyikan di bagian bawah atau samping yang dapat diakses dengan kontrol seperti menu atau tombol.

Tata letak panel pendukung berbeda dengan tata letak daftar-detail jika dilihat dari hubungannya dengan konten utama dan sekunder. Konten panel sekunder hanya bermanfaat jika memiliki keterkaitan dengan konten utama; misalnya, jendela alat panel pendukung tidak akan berfungsi jika digunakan sendiri. Namun, konten tambahan di panel detail pada tata letak daftar-detail tetap bermanfaat meskipun tanpa konten utama, misalnya, deskripsi produk dari listingan produk.

Kasus penggunaan untuk panel pendukung meliputi:

• Aplikasi produktivitas: Dokumen atau spreadsheet disertai dengan komentar dari pengulas di panel pendukung
• Aplikasi media: Video streaming yang dilengkapi dengan daftar video terkait di panel pendukung, atau penggambaran album musik yang dilengkapi dengan playlist
• Aplikasi referensi dan penelusuran: Formulir input kueri dengan hasil di panel pendukung

Implementasi

Compose

Compose mendukung logika class ukuran jendela yang memungkinkan Anda menentukan apakah akan menampilkan konten utama dan konten pendukung secara bersamaan, atau menempatkan konten pendukung di lokasi alternatif.

Angkat semua status, seperti class ukuran jendela saat ini dan informasi yang terkait dengan data di konten utama dan konten pendukung.

Untuk tampilan lebar rapat, tempatkan konten pendukung di bawah konten utama atau di dalam sheet bawah. Untuk lebar sedang dan diperluas, tempatkan konten pendukung di samping konten utama, berukuran tepat berdasarkan konten dan ruang yang tersedia. Untuk lebar sedang, bagi ruang tampilan secara merata antara konten utama dan pendukung. Untuk lebar yang diperluas, alokasikan 70% ruang untuk konten utama, 30% untuk konten pendukung.

Untuk contoh implementasi, lihat contoh Panel pendukung dengan Compose.

Tampilan dan fragmen

Tata letak panel pendukung diterapkan menggunakan tata letak bantuan seperti LinearLayout atau ConstraintLayout. Buat class ukuran jendela yang membagi jumlah ruang tampilan horizontal yang tersedia untuk aplikasi Anda menjadi tiga kategori: rapat (< 600 dp), sedang (>= 600 dp), dan diperluas (>= 840 dp).

Untuk setiap class ukuran jendela, tentukan tata letak sebagai berikut:

• Rapat: Di folder layout resource aplikasi, tempatkan konten yang merender panel pendukung di bawah konten utama atau di dalam sheet bawah
• Sedang: Di folder layout-w600dp, sediakan konten panel pendukung yang menghasilkan rendering konten utama dan panel pendukung secara berdampingan dengan memisahkan ruang tampilan horizontal secara merata
• Diperluas: Dalam folder layout-w840dp, sertakan konten panel pendukung yang menghasilkan rendering konten utama dan panel pendukung secara berdampingan; tetapi, panel pendukung hanya mengisi 30% ruang horizontal sehingga tersisa 70% ruang untuk konten utama

Gunakan ViewModel untuk komunikasi antara konten utama dan panel pendukung, baik menggunakan tampilan, fragmen, maupun kombinasi.

Untuk contoh implementasi, lihat contoh berikut:

• Panel pendukung dengan tampilan
• Panel pendukung dengan fragmen

Penerapan

Tata letak kanonis membuat presentasi konten multifaset untuk memudahkan akses dan eksplorasi lebih jauh. Gunakan diagram alir berikut untuk menentukan tata letak dan strategi implementasi yang paling tepat untuk kasus penggunaan aplikasi Anda.

Untuk contoh tata letak kanonis yang diterapkan di berbagai jenis aplikasi, lihat galeri perangkat layar besar.

Referensi lainnya

• Daftar-detail
  • Membuat tata letak dua panel.
• Panel pendukung
  • ConstraintLayout di Compose
  • Membuat UI yang responsif dengan ConstraintLayout
• Feed
  • Compose — Daftar dan petak
  • Membuat daftar dinamis dengan RecyclerView
• Desain Material — Tata letak kanonis
• Memigrasikan UI ke tata letak responsif
• Navigasi untuk UI yang responsif