Android Academy · Pelajaran

Dasar-Dasar Text dan Column

Tampilkan dan susun konten.

Dasar-Dasar Text dan Column adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Composable Text

Hal paling dasar yang dapat Anda tampilkan di Compose adalah teks. Composable Text menggambar sebuah string di layar.

Anda meneruskan string yang ingin ditampilkan sebagai argumen pertama. Hanya itu yang diperlukan untuk menampilkan kata-kata di layar.

@Composable
fun Hello() {
    Text("Hello, Android!")
}

Memberi Gaya pada Teks

Text menerima parameter untuk mengubah tampilannya. Anda dapat mengatur fontSize, color, dan fontWeight.

Ukuran menggunakan satuan sp, yang menyesuaikan dengan pengaturan font pengguna. Dengan demikian, aplikasi Anda tetap mudah dibaca oleh semua orang.

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

Mengapa Anda Membutuhkan Tata Letak

Jika Anda memanggil Text dua kali berturut-turut, kedua teks akan berada di tempat yang sama dan saling menumpuk. Composable tidak menata dirinya sendiri secara otomatis.

Untuk menempatkan item secara berurutan, Anda memerlukan composable tata letak yang mengatur elemen anaknya. Composable yang paling umum untuk penumpukan vertikal adalah Column.

Composable Column

Column menata elemen anaknya secara vertikal, satu di bawah yang lain. Anda menempatkan composable anak di dalam blok lambda penutupnya.

Setiap composable yang Anda tulis di dalam kurung kurawal menjadi satu baris dalam tumpukan vertikal tersebut, sesuai urutan penulisannya.

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

Urutan Penting dalam Column

Di dalam Column, elemen anak muncul dari atas ke bawah, persis sesuai urutan yang Anda tuliskan. Pindahkan satu baris ke atas dalam kode, dan baris tersebut juga berpindah ke atas di layar.

Hal ini membuat tata letak mudah diprediksi: baca kode dari atas ke bawah, dan Anda akan mengetahui tampilan layar dari atas ke bawah.

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

Pengaturan Vertikal

Column dapat mengatur jarak antar-elemen anak menggunakan verticalArrangement. Misalnya, Arrangement.spacedBy menambahkan jarak yang sama.

Ini lebih rapi daripada menambahkan jarak ke setiap elemen anak secara manual, serta menjaga tata letak tetap konsisten.

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

Perataan Horizontal

Secara default, Column meratakan elemen anaknya ke awal (kiri). Gunakan horizontalAlignment untuk meratakannya ke tengah atau akhir.

Atur ke Alignment.CenterHorizontally, dan setiap elemen anak akan berada di tengah dalam lebar kolom.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Centered")
    Text("Also centered")
}

Mengenal Row

Column menumpuk secara vertikal; saudaranya, Row, menyusun elemen anak berdampingan secara horizontal. Keduanya memiliki konsep yang sama, tetapi arahnya berbeda.

Anda akan memadukan Row dan Column untuk membuat kisi dan kartu. Untuk saat ini, ingat: Column ke bawah, Row menyamping.

Row {
    Text("Left")
    Text("Right")
}

Menumpuk Layout

Layout dapat memuat layout lainnya. Anda dapat menempatkan Row di dalam Column untuk membuat desain yang lebih kaya.

Di sini, sebuah column menampilkan judul, lalu sebuah row berisi dua teks di bawahnya. Penumpukan adalah cara membuat layar kompleks dari bagian-bagian sederhana.

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

Menambahkan Jarak Antaritem

Untuk menambahkan jarak tetap antara dua composable, Anda dapat menyisipkan Spacer. Ini adalah composable kosong yang hanya menggunakan ruang.

Berikan tinggi melalui modifier, dan elemen berikutnya akan terdorong ke bawah. Kita akan membahas modifier lebih lanjut pada pelajaran berikutnya.

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

Menyatukan Semuanya

Dengan Text dan Column, Anda sudah dapat membuat layar berlabel sederhana. Tumpuk sebuah judul dan beberapa baris detail.

Pola kecil ini menjadi dasar hampir setiap layar Compose yang akan Anda tulis.

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

Pemeriksaan Singkat

Mari uji pemahaman Anda tentang arah layout.

Rangkuman

Anda telah mempelajari cara menampilkan string dengan Text dan menatanya menggunakan fontSize serta fontWeight. Column menumpuk elemen anak secara vertikal sesuai urutan kode, sedangkan Row menyusunnya secara horizontal.

Anda dapat mengatur jarak dengan verticalArrangement atau Spacer, serta meratakan elemen anak dengan horizontalAlignment. Menumpuk Row dan Column menghasilkan layout yang lebih kaya. Berikutnya, Anda akan melihat pratinjau layar ini tanpa menjalankan aplikasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar Text dan Column” gratis?

Ya — teks lengkap “Dasar-Dasar Text dan Column” 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 “Dasar-Dasar Text dan Column”?

Tampilkan dan susun konten. 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 2 dari 4.

Berapa lama pelajaran “Dasar-Dasar Text dan Column” 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