Android Academy · Pelajaran

TextField dan Input Pengguna

Ambil teks dari pengguna di Compose.

TextField dan Input Pengguna adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Menangkap Input Pengguna

Hampir setiap aplikasi nyata perlu meminta sesuatu dari pengguna: nama, email, atau kueri penelusuran. Dalam Jetpack Compose, blok pembangun untuk memasukkan teks adalah TextField.

Dalam pelajaran ini, Anda akan mempelajari cara menampilkan kolom teks, membaca teks yang diketik pengguna, dan menjaga kolom tetap selaras dengan status aplikasi. Ini adalah dasar untuk setiap formulir yang akan Anda buat.

TextField Pertama Anda

TextField memerlukan dua hal: value (teks saat ini yang akan ditampilkan) dan panggilan balik onValueChange (tindakan yang dilakukan saat pengguna mengetik).

Compose bersifat deklaratif, jadi kolom tersebut tidak menyimpan teksnya sendiri. Anda menyimpan teks dalam status dan memasukkannya kembali. Pola ini disebut pengangkatan status.

@Composable
fun NameField() {
    var name by remember { mutableStateOf("") }

    TextField(
        value = name,
        onValueChange = { name = it }
    )
}

Cara Kerja Perulangan Nilai

Gagasan terpenting: TextField menampilkan tepat apa yang Anda teruskan ke value. Saat pengguna menekan tombol, Compose memanggil onValueChange dengan teks baru.

Anda menyimpan teks baru tersebut dalam status.
Perubahan status memicu komposisi ulang.
Kolom digambar ulang dengan value yang diperbarui.

Jika Anda lupa memperbarui status di dalam onValueChange, kolom akan terlihat membeku karena value tidak pernah berubah.

var name by remember { mutableStateOf("") }

TextField(
    value = name,
    onValueChange = { newText -> name = newText }
)

Menambahkan Label dan Teks Placeholder

Kolom teks tanpa keterangan tidak memberi petunjuk kepada pengguna tentang apa yang harus diketik. Tambahkan label (mengambang di atas kolom) dan placeholder (petunjuk yang ditampilkan saat kosong).

Sentuhan kecil ini membuat formulir jauh lebih mudah dipahami.

var email by remember { mutableStateOf("") }

TextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    placeholder = { Text("you@example.com") }
)

OutlinedTextField

Material Design menawarkan dua gaya utama. TextField memiliki latar belakang berisi, sedangkan OutlinedTextField menggambar garis tepi di sekeliling kolom. Keduanya menggunakan API yang sama, sehingga peralihannya sangat mudah.

Kolom bergaris tepi populer dalam formulir karena tetap mudah dibaca saat ditumpuk secara vertikal.

var username by remember { mutableStateOf("") }

OutlinedTextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    singleLine = true
)

Ikon Awalan dan Akhiran

Anda dapat menghias kolom dengan ikon. leadingIcon muncul di awal (cocok untuk ikon pencarian atau email), sedangkan trailingIcon muncul di akhir (sering digunakan sebagai tombol hapus).

Ikon membuat tujuan kolom terlihat jelas sekilas.

var query by remember { mutableStateOf("") }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    label = { Text("Search") },
    leadingIcon = {
        Icon(Icons.Default.Search, contentDescription = null)
    }
)

Tombol Hapus

Pola pengalaman pengguna yang umum adalah tanda "x" kecil untuk menghapus isi kolom. Tampilkan hanya saat ada teks, menggunakan slot trailingIcon dan IconButton.

Perhatikan bahwa menghapus hanya berarti mengatur status kembali ke string kosong.

var text by remember { mutableStateOf("") }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Note") },
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Default.Clear, contentDescription = "Clear")
            }
        }
    }
)

Satu Baris vs Banyak Baris

Secara default, TextField dapat berkembang menjadi beberapa baris. Untuk hal seperti nama atau email, tetapkan singleLine = true agar pengguna tidak dapat menyisipkan baris baru.

Untuk catatan yang lebih panjang, biarkan kolom menjadi beberapa baris dan, jika perlu, batasi tingginya dengan maxLines.

var bio by remember { mutableStateOf("") }

OutlinedTextField(
    value = bio,
    onValueChange = { bio = it },
    label = { Text("Bio") },
    maxLines = 4
)

Merespons Input Secara Langsung

Karena Anda mengelola status teks, Anda dapat langsung meresponsnya. Contoh klasiknya adalah menampilkan jumlah karakter secara langsung di bawah kolom.

Setiap penekanan tombol memperbarui text, yang menyusun ulang kolom dan jumlah karakter di bawahnya.

var text by remember { mutableStateOf("") }

Column {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Tweet") }
    )
    Text("${text.length} / 280")
}

Mengubah Input

Terkadang Anda ingin menormalkan teks yang diketik pengguna sebelum menyimpannya. Di dalam onValueChange, Anda dapat mengubah nilai baru terlebih dahulu.

Di sini kita mengubah nama pengguna menjadi huruf kecil dan menghapus spasi. Karena Anda mengendalikan perulangannya, kolom selalu menampilkan versi yang telah dibersihkan.

var handle by remember { mutableStateOf("") }

OutlinedTextField(
    value = handle,
    onValueChange = { input ->
        handle = input.lowercase().filterNot { it.isWhitespace() }
    },
    label = { Text("Handle") },
    singleLine = true
)

Kotlin Murni: Membersihkan Handle

Logika transformasi di atas hanyalah Kotlin biasa. Anda dapat mengujinya secara terpisah tanpa memerlukan Android. Berikut aturan pembersihan yang sama saat dijalankan secara mandiri.

Menyimpan logika seperti ini dalam fungsi murni memudahkan pengujian unit.

fun cleanHandle(input: String): String =
    input.lowercase().filterNot { it.isWhitespace() }

fun main() {
    println(cleanHandle("  John Doe "))
    println(cleanHandle("ADA Lovelace"))
}

Pemeriksaan Singkat

Apa yang terjadi jika panggilan balik onValueChange milik TextField tidak pernah memperbarui status yang diteruskan ke value?

Ringkasan

Sekarang Anda mengetahui dasar input teks dalam Compose:

TextField dan OutlinedTextField menerima value dan panggilan balik onValueChange.
Anda menyimpan teks dalam remember { mutableStateOf(...) } dan memperbaruinya setiap kali terjadi perubahan (pengangkatan status).
label, placeholder, ikon awalan/akhiran, dan singleLine membentuk tampilan serta perilakunya.
Karena Anda mengelola status, Anda dapat merespons secara langsung atau mengubah input saat pengguna mengetik.

Berikutnya: mengelola status seluruh formulir, bukan hanya satu kolom.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “TextField dan Input Pengguna” gratis?

Ya — teks lengkap “TextField dan Input Pengguna” 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 “TextField dan Input Pengguna”?

Ambil teks dari pengguna di Compose. 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 1 dari 4.

Berapa lama pelajaran “TextField dan Input Pengguna” 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