Jetpack Compose Academy · Pelajaran

Label, Placeholder & Ikon Awalan

Buat input jelas dan mudah digunakan.

Pelajaran 2 dari 413 langkah

Label, Placeholder & Ikon Awalan adalah pelajaran Jetpack Compose 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 Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Buat Masukan Lebih Ramah

Kotak kosong membuat pengguna menebak-nebak. Label, teks petunjuk, dan ikon mengubah kolom biasa menjadi kolom yang memandu pengguna. 🧭

Slot label

label memberi nama pada kolom. Label berada di dalam saat kolom kosong, lalu mengambang ke garis tepi ketika kolom mendapat fokus atau terisi.

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)

Tambahkan Teks Petunjuk

placeholder adalah teks petunjuk yang hanya ditampilkan saat kolom kosong. Gunakan untuk contoh, bukan untuk nama kolom.

placeholder = { Text("you@example.com") }

Label vs Teks Petunjuk

label selalu terlihat untuk mengidentifikasi kolom. Teks petunjuk menghilang segera setelah pengguna mulai mengetik. Gunakan keduanya bersama-sama.

Ikon Awalan

leadingIcon berada di awal kolom. Amplop di samping kolom email membuat kegunaannya langsung terlihat.

leadingIcon = {
    Icon(Icons.Default.Email, contentDescription = null)
}

Ikon Akhiran Juga

trailingIcon berada di ujung kolom. Ikon ini cocok untuk tombol hapus atau pengalih visibilitas kata sandi.

trailingIcon = {
    Icon(Icons.Default.Clear, contentDescription = "Clear")
}

Selalu Jelaskan Ikon

Berikan setiap Ikon contentDescription agar pembaca layar dapat mengumumkannya. Teruskan null hanya jika ikon tersebut murni dekoratif.

Buat Ikon Akhiran Dapat Diketuk

Bungkus ikon akhiran dengan IconButton agar pengguna dapat mengetuknya, misalnya untuk menghapus isi kolom dengan satu sentuhan.

trailingIcon = {
    IconButton(onClick = { email = "" }) {
        Icon(Icons.Default.Clear, "Clear")
    }
}

Teks Pendukung

supportingText menampilkan petunjuk kecil di bawah kolom, seperti pengingat format atau batas karakter, tanpa memenuhi area masukan.

supportingText = { Text("We never share your email.") }

Gabungkan dengan Bijak

Label ditambah ikon dan teks petunjuk singkat sudah cukup. Terlalu banyak petunjuk menambah gangguan, jadi jaga setiap kolom tetap tenang dan jelas.

Slot Hanyalah Composable

Setiap slot, seperti label dan leadingIcon, adalah lambda yang memuat Composable. Artinya, Anda dapat menempatkan UI apa pun di dalamnya.

Pemeriksaan Singkat

Kapan placeholder menghilang dari kolom teks?

Jawab di pelajaran interaktif

Rangkuman

Anda mempercantik input dengan label, petunjuk placeholder, ikon di awal dan akhir, serta teks pendukung. Kolom yang ramah, pengguna yang senang. 😊

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Label, Placeholder & Ikon Awalan” gratis?

Ya — teks lengkap “Label, Placeholder & Ikon Awalan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Label, Placeholder & Ikon Awalan”?

Buat input jelas dan mudah digunakan. Kamu berlatih Jetpack Compose 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 Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose 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 “Label, Placeholder & Ikon Awalan” 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 Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose 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 Jetpack Compose Academy