Android Academy · Pelajaran

Mengatur Jarak dengan Padding

Gunakan Modifier untuk mengatur jarak.

Mengatur Jarak dengan Padding adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Apa Itu Padding?

Padding adalah ruang kosong yang ditambahkan di sekeliling konten composable. Padding menjauhkan konten dari tepi agar tampilan tidak terasa sesak.

Di Compose, Anda menambahkan padding melalui sebuah Modifier.

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
)

Satuan dp

Ukuran padding menggunakan dp, singkatan dari piksel yang tidak bergantung pada kepadatan layar. dp tampak memiliki ukuran fisik yang sama di setiap layar.

Tuliskan angka lalu .dp, seperti 8.dp atau 24.dp.

Modifier.padding(8.dp)

Apa Itu Modifier?

Modifier menjelaskan tampilan dan perilaku composable: ukurannya, padding, latar belakang, dan lainnya.

Anda membuat modifier dengan merangkai fungsi menggunakan titik.

Modifier
    .padding(16.dp)
    .background(Color.Yellow)

Padding di Semua Sisi

Memanggil padding(16.dp) dengan satu nilai akan menambahkan ruang yang sama pada keempat sisi: atas, bawah, awal, dan akhir.

Ini adalah cara tercepat untuk memberi konten ruang yang cukup.

Box(
    modifier = Modifier.padding(16.dp)
) {
    Text("Inside")
}

Padding Horizontal dan Vertikal

Anda dapat mengatur sisi secara terpisah dengan parameter horizontal dan vertical.

Horizontal mencakup sisi awal dan akhir, sedangkan vertical mencakup sisi atas dan bawah.

Modifier.padding(
    horizontal = 24.dp,
    vertical = 8.dp
)

Memberi Padding pada Satu Sisi

Untuk menargetkan satu tepi, sebutkan namanya: start, top, end, atau bottom.

Dengan begitu, Anda dapat menyesuaikan jarak tepat di bagian yang diperlukan.

Modifier.padding(
    start = 16.dp,
    top = 4.dp
)

Urutan Itu Penting

Urutan Modifier mengubah hasilnya. Menempatkan padding sebelum latar belakang membuat area padding tidak terwarnai; setelahnya, latar belakang akan mengisi area padding.

Baca modifier dari atas ke bawah, seperti lapisan.

Modifier
    .background(Color.Cyan)
    .padding(16.dp)

Jarak Antar-Item

Di dalam Column atau Row, gunakan Arrangement.spacedBy untuk menambahkan jarak yang sama secara otomatis di antara elemen anak.

Ini lebih rapi daripada memberi padding pada setiap elemen anak secara manual.

Column(
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    Text("One")
    Text("Two")
}

Spacer untuk Jarak

Spacer adalah composable kosong yang digunakan untuk menjauhkan item satu sama lain. Beri ukurannya menggunakan Modifier.

Komponen ini berguna untuk membuat jarak tetap antara dua elemen.

Column {
    Text("Top")
    Spacer(Modifier.height(16.dp))
    Text("Bottom")
}

Padding vs Margin

Compose tidak memiliki margin terpisah. Anda membuat ruang luar dengan menempatkan padding lebih awal dalam rangkaian modifier, sebelum ukuran atau latar belakang.

Jadi, satu alat, yaitu padding, dapat menangani jarak bagian dalam dan luar, bergantung pada urutannya.

Modifier
    .padding(16.dp)
    .background(Color.LightGray)
    .padding(8.dp)

Jarak yang Konsisten

Aplikasi yang baik menggunakan beberapa nilai berulang, seperti 4, 8, 16, dan 24 dp. Ini membuat tata letak rapi dan mudah diprediksi.

Hindari angka acak; pilih dari skala kecil.

Modifier.padding(16.dp)

Pemeriksaan Singkat

Uji pengetahuan Anda tentang padding.

Rangkuman

Padding menambahkan ruang di sekeliling konten menggunakan Modifier.padding dengan nilai dp. Anda dapat memberi padding pada semua sisi, sisi horizontal/vertikal, atau satu tepi tertentu.

Urutan Modifier itu penting, dan Arrangement.spacedBy atau Spacer menangani jarak antar-item.

Selanjutnya, Anda akan mempelajari warna dan MaterialTheme.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengatur Jarak dengan Padding” gratis?

Ya — teks lengkap “Mengatur Jarak dengan Padding” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengatur Jarak dengan Padding”?

Gunakan Modifier untuk mengatur jarak. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Mengatur Jarak dengan Padding” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy