Tata letak umum untuk aplikasi scroll

Tata letak tampilan aplikasi scroll mencakup daftar (TransformingLazyColumn) dan dialog. Tata letak ini membentuk sebagian besar layar aplikasi, dan mewakili kumpulan komponen yang perlu disesuaikan dengan ukuran layar yang lebih besar. Pastikan komponen responsif—yaitu, komponen mengisi lebar yang tersedia dan menggunakan penyesuaian TransformingLazyColumn saat lebih banyak tinggi layar tersedia. Tata letak ini sudah dibuat secara responsif, dan kami memiliki beberapa rekomendasi tambahan untuk memanfaatkan lebih lanjut ruang yang diperluas.

Membuat desain yang responsif dan dioptimalkan

Untuk membantu tata letak desain Anda beradaptasi dengan ukuran layar yang lebih besar, kami telah memperbarui perilaku tata letak dan komponen agar memiliki perilaku responsif bawaan, termasuk margin dan padding berbasis persentase. Untuk mengatasi hal ini, kami telah memperbarui tata letak dan komponen library UI Android dengan perilaku responsif bawaan, termasuk margin dan padding berbasis persentase. Jika menggunakan komponen Compose, Anda dapat otomatis mewarisi responsivitas ini.

Untuk desain layar yang unik, uji secara menyeluruh di berbagai ukuran layar, untuk memastikan komponen dan elemen beradaptasi dengan lancar dan menghindari pemotongan konten. Margin persentase kami membantu pengatur jarak diskalakan secara efektif, dan sebaiknya gunakan titik henti sementara di 225dp untuk memperkenalkan informasi tambahan dan fungsi yang ditingkatkan di layar smartwatch yang lebih besar.

Pastikan komponen mengisi lebar yang tersedia

Semua komponen dibuat secara responsif, yang berarti komponen tersebut mengisi lebar dan tinggi yang tersedia. Pastikan Anda memiliki margin yang diperlukan untuk memastikan konten tidak terpotong oleh layar pembulatan.

Menampilkan karakter teks tambahan

Sebagian besar komponen memiliki kotak teks yang mengisi lebar yang tersedia. Artinya, kolom tersebut akan otomatis mendapatkan jumlah karakter saat lebar layar bertambah.

Membuat desain adaptif dan terdiferensiasi

Karena tata letak scroll akan otomatis menampilkan lebih banyak hal yang sebelumnya disembunyikan di bawah lipatan layar, Anda tidak perlu melakukan banyak hal untuk menambahkan nilai. Setiap komponen mengisi lebar yang tersedia, dan dalam beberapa kasus, komponen mungkin mendapatkan baris teks tambahan (seperti kartu), atau komponen meregang untuk mengisi lebar yang tersedia (seperti tombol ikon).

Untuk menggunakan ruang tambahan dengan sebaik mungkin pada ukuran layar yang lebih besar, tambahkan titik henti sementara ukuran pada 225dp. Titik henti sementara ini memungkinkan untuk menampilkan konten tambahan, menyertakan lebih banyak tombol atau data, atau mengubah tata letak agar lebih sesuai dengan layar yang lebih besar. Hal ini memerlukan desain yang berbeda untuk setiap titik henti sementara. Desain layar yang lebih besar (225+) dapat menyertakan elemen tambahan berikut:

Meningkatkan ukuran atau mengubah status komponen yang ada

Hal ini dapat dilakukan untuk menampilkan lebih banyak detail atau membuat konten lebih mudah dilihat.

Tata letak yang dioptimalkan dan terdiferensiasi

Tata letak dapat sedikit berubah setelah titik henti sementara 225dp, sehingga konten di atas lipatan dalam tampilan default dioptimalkan, tetapi semua konten yang sama di bawah lipatan akan tetap tersedia terlepas dari ukuran layar.

Perilaku responsif dan adaptif

Semua komponen dalam library Compose akan otomatis beradaptasi dengan ukuran layar yang lebih lebar, serta mendapatkan lebar dan tinggi. Tampilan scroll yang menggunakan praktik desain responsif biasanya beradaptasi dengan berbagai ukuran layar. Namun, dalam beberapa kasus khusus, Anda dapat menggunakan titik henti sementara untuk mengganti dimensi dan menambah tata letak yang memperluas fungsi, meningkatkan keterlihatan, atau membuat konten lebih pas di layar.

Semua margin atas, bawah, dan samping harus ditentukan dalam persentase untuk menghindari pemangkasan dan memberikan penskalaan proporsional elemen. Perhatikan bahwa PositionIndicator muncul saat pengguna men-scroll, dan secara otomatis memeluk bingkai layar, berapa pun ukurannya.

Checklist

  • Terapkan margin atas, bawah, dan samping yang direkomendasikan.
  • Tentukan margin luar dalam nilai persentase untuk mencegah pemangkasan di awal dan akhir penampung yang dapat di-scroll.
  • Terapkan margin dalam nilai DP tetap di antara elemen UI.
  • Pertimbangkan untuk menerapkan titik henti sementara di 225dp untuk memperkenalkan konten tambahan atau membuat konten yang ada lebih mudah dilihat saat menggunakan ukuran layar yang lebih besar.

Membuat pengalaman yang berbeda

Tampilan scroll sangat dapat disesuaikan, dengan kemampuan untuk menambahkan kombinasi komponen dalam urutan apa pun. Margin atas dan bawah dapat berubah bergantung pada komponen yang berada di bagian atas dan bawah. Hal ini untuk mencegah konten terpotong oleh kurva layar yang bertambah.