Komposisi dan struktur konten

Bangun alur dan ritme yang fleksibel dengan metode struktur dan penampungan untuk konten Anda.

1. Struktur dasar

Untuk mulai membuat struktur yang solid dengan batas aman yang konsisten, tambahkan margin dan kolom ke tata letak Anda.

Margin memberikan jarak di tepi kiri dan kanan layar serta konten. Nilai margin standar untuk ukuran rapat adalah 16 dp, tetapi margin harus disesuaikan untuk mengakomodasi layar yang lebih besar. Konten dan tindakan isi aplikasi Anda harus tetap berada di dalam dan sesuai dengan margin ini.

Anda juga dapat memastikan zona aman inset atau inset pada langkah ini. Inset kolom sistem mencegah tindakan penting berada di bawah kolom sistem. Lihat Menggambar konten di belakang kolom sistem untuk mengetahui detailnya.

Gambar 8: Margin (1) dan inset kolom sistem (2)

Gunakan kolom untuk membuat struktur petak yang fleksibel untuk perataan yang konsisten, dan untuk memberikan definisi vertikal pada tata letak dengan membagi konten dalam area isi. Konten masuk ke area layar yang berisi kolom. Kolom ini memberikan struktur pada tata letak Anda, sehingga memberikan struktur yang mudah untuk mengatur elemen.

Gambar 9: Layar perangkat seluler sering dibagi menjadi empat kolom

Gunakan petak kolom untuk menyelaraskan konten dengan petak yang mendasarinya, tetapi tetap mempertahankan ukuran yang fleksibel. Petak kolom dapat mengakomodasi berbagai faktor bentuk dengan mengubah ukuran kolom dan jumlah kolom sesuai kebutuhan ukuran layar pada titik tertentu sekaligus memungkinkan konten untuk diskalakan. Hindari penggunaan petak kolom yang terlalu terperinci, karena petak dasar digunakan untuk memberikan unit jarak yang konsisten.

Berhati-hatilah saat membuat petak baris yang menyertainya karena dapat membatasi penskalaan konten horizontal di seluruh orientasi dan faktor bentuk. Biasanya, membuat aturan padding akan memberikan konsistensi visual yang diperlukan.

Menempatkan konten

Mulai menambahkan teks ke struktur tata letak. Margin melindungi konten dari tepi layar. Kolom memberikan struktur jarak dan perataan yang konsisten.

2. Menerapkan pembatasan

Gunakan pembatasan untuk mengelompokkan elemen secara visual.

Pembatasan mengacu pada penggunaan ruang kosong dan elemen yang terlihat secara bersamaan untuk membuat pengelompokan visual. Penampung adalah bentuk yang mewakili area tertutup. Dalam satu tata letak, Anda dapat mengelompokkan elemen yang memiliki konten atau fungsi serupa dan memisahkannya dari elemen lain menggunakan ruang terbuka, tipografi, dan pemisah.

Anda dapat mengelompokkan item serupa dengan ruang kosong atau pembagian yang terlihat untuk membantu memandu pengguna melihat konten.

Gambar 10: Membagi konten menjadi dua pengelompokan yang lebih besar, yaitu header dan teks utama

Pembatasan implisit menggunakan ruang kosong untuk mengelompokkan konten secara visual guna membuat batas penampung, sedangkan pembatasan eksplisit menggunakan objek seperti garis pemisah dan kartu untuk mengelompokkan konten.

Gambar berikut menunjukkan contoh penggunaan penampungan implisit untuk menampung header dan salinan utama. Petak kolom digunakan untuk menyelaraskan dan membuat pengelompokan. Sorotan secara eksplisit terdapat dalam kartu. Menggunakan ikonografi dan hierarki huruf untuk pemisahan visual yang lebih baik.

Gambar 11: Contoh penampungan implisit

3. Memosisikan konten

Android memiliki beberapa cara untuk menangani elemen konten dalam penampungnya masing-masing yang dapat membantu memosisikannya dengan tepat, termasuk gravitasi, penspasian, dan penskalaan.

Gambar 12: Contoh tata letak yang menunjukkan batas pembatasan dan posisi elemen

Gravitasi adalah standar untuk menempatkan objek dalam penampung yang berpotensi lebih besar untuk kasus penggunaan tertentu. Gambar berikut menunjukkan contoh penempatan objek awal dan tengah (1), atas dan tengah horizontal (2), kiri bawah (3), serta akhir dan kanan (1).

Gambar 13: Memosisikan gravitasi konten turunan dan tampilan induk

4. Menskalakan konten

Penskalaan sangat penting untuk mengakomodasi konten dinamis, orientasi perangkat, dan ukuran layar. Elemen dapat tetap bernilai tetap atau diskalakan.

Memperhatikan cara gambar ditampilkan dalam penampungnya dengan penskalaan dan posisi penting untuk memastikan gambar muncul seperti yang Anda inginkan terlepas dari konteks perangkat, jika tidak, fokus utama gambar dapat terlihat terpotong, gambar dapat terlalu kecil atau besar untuk tata letak, atau efek lain yang tidak diinginkan.

Gambar 14: Gambar yang dipangkas di tengah, yang memastikan tanaman berada di tengah penampung terlepas dari ukuran perangkat

Konten yang tidak diberi notasi dapat muncul berbeda dari yang Anda harapkan atau inginkan.

Gambar 15: Konten yang tidak diberi anotasi dapat muncul dengan cara yang tidak terduga

Konten yang disematkan

Banyak elemen memiliki interaksi, scrolling, dan pemosisian bawaan dengan slot atau scaffold. Beberapa elemen dapat dimodifikasi agar tetap tetap, bukan bereaksi terhadap scrolling, misalnya tombol tindakan mengambang (FAB) yang berisi tindakan penting.

Perataan

Gunakan AlignmentLine untuk membuat garis perataan kustom, yang dapat digunakan tata letak induk untuk meratakan dan memosisikan turunannya.

Anjuran

Tentukan jarak yang konsisten di antara elemen yang serupa.

Larangan

mengganggu keterbacaan dengan jarak yang tidak konsisten antar-elemen serupa, yang dapat membuat desain tampak tidak teratur.

Tata letak komponen

Komponen Material 3 menyediakan konfigurasi dan statusnya sendiri untuk interaksi dan konten.

Compose menyediakan tata letak yang mudah untuk menggabungkan Komponen Material ke dalam pola layar yang umum. Composable seperti Scaffold menyediakan slot untuk berbagai komponen dan elemen layar lainnya. Baca selengkapnya tentang Komponen dan Tata Letak Material.