Android Academy · Ders

TextField ve Kullanıcı Girdisi

Compose'ta kullanıcıdan metin alın.

TextField ve Kullanıcı Girdisi, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Android Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Android Academy kursu toplamda 4 dersten oluşur.

Kullanıcı Girdisini Alma

Neredeyse her gerçek uygulamanın kullanıcıdan bir şey istemesi gerekir: ad, e-posta veya arama sorgusu. Jetpack Compose'ta metin girişi için temel yapı taşı TextField'dır.

Bu derste bir metin alanını görüntülemeyi, kullanıcının yazdıklarını okumayı ve alanı uygulamanızın durumuyla senkron tutmayı öğreneceksiniz. Bu, oluşturacağınız her formun temelidir.

İlk TextField'ınız

Bir TextField iki şeye ihtiyaç duyar: görüntülenecek mevcut metni belirten bir value ve kullanıcı yazdığında ne yapılacağını belirten bir onValueChange geri çağrısı.

Compose bildirimseldir; bu nedenle alan kendi metnini saklamaz. Metni siz durumda tutar ve alana geri verirsiniz. Bu örüntüye durum yükseltme adı verilir.

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

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

Değer Döngüsü Nasıl Çalışır

En önemli fikir şudur: Bir TextField, value'ya verdiğiniz şeyi tam olarak gösterir. Kullanıcı bir tuşa bastığında Compose, yeni metinle birlikte onValueChange işlevini çağırır.

Bu yeni metni durumda saklarsınız.
Durum değişiklikleri yeniden oluşturmayı tetikler.
Alan güncellenmiş value ile yeniden çizilir.

onValueChange içinde durumu güncellemeyi unutursanız value hiç değişmeyeceği için alan donmuş gibi görünür.

var name by remember { mutableStateOf("") }

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

Etiket ve Yer Tutucu Ekleme

Çıplak bir metin alanı, kullanıcıya ne yazacağını anlatmaz. Bir label (alanın üzerinde yüzer) ve bir placeholder (alan boşken gösterilen ipucu) ekleyin.

Bu küçük dokunuşlar formların anlaşılmasını çok kolaylaştırır.

var email by remember { mutableStateOf("") }

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

OutlinedTextField

Material Design iki temel stil sunar. TextField dolgulu bir arka plana sahipken OutlinedTextField alanın çevresine bir kenarlık çizer. Aynı API'yi kullandıkları için geçiş yapmak çok kolaydır.

Anahatlı alanlar, dikey olarak sıralandıklarında temiz göründükleri için formlarda yaygın olarak kullanılır.

var username by remember { mutableStateOf("") }

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

Baş ve Son Simgeler

Bir alanı simgelerle süsleyebilirsiniz. leadingIcon başlangıçta görünür (arama veya e-posta simgesi için idealdir), trailingIcon ise sonda görünür (genellikle temizleme düğmesidir).

Simgeler, bir alanın amacını tek bakışta anlaşılır kılar.

var query by remember { mutableStateOf("") }

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

Temizleme Düğmesi

Yaygın bir kullanıcı deneyimi örüntüsü, alanı temizleyen küçük bir "x" simgesidir. Bunu yalnızca metin varken, trailingIcon yuvasını ve bir IconButton kullanarak gösterin.

Temizlemenin yalnızca durumu boş bir dizeye geri ayarlamak olduğunu fark edin.

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")
            }
        }
    }
)

Tek Satır ve Çok Satır Karşılaştırması

Varsayılan olarak bir TextField birden çok satıra genişleyebilir. Ad veya e-posta gibi değerler için kullanıcının yeni satır ekleyememesi amacıyla singleLine = true ayarlayın.

Daha uzun notlar için alanı çok satırlı bırakın ve isteğe bağlı olarak yüksekliği maxLines ile sınırlayın.

var bio by remember { mutableStateOf("") }

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

Girdiye Anında Tepki Verme

Metin durumunun sahibi olduğunuz için ona anında tepki verebilirsiniz. Klasik bir örnek, alanın altında güncel karakter sayısını göstermektir.

Her tuş vuruşu text değerini günceller; bu da hem alanın hem de altındaki sayacın yeniden oluşturulmasını sağlar.

var text by remember { mutableStateOf("") }

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

Girdiyi Dönüştürme

Bazen kullanıcının yazdıklarını saklamadan önce normalleştirmek isteyebilirsiniz. onValueChange içinde yeni değeri önce dönüştürebilirsiniz.

Burada bir kullanıcı adını küçük harfe dönüştürüyor ve boşlukları kaldırıyoruz. Döngünün denetimi sizde olduğu için alan her zaman temizlenmiş sürümü gösterir.

var handle by remember { mutableStateOf("") }

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

Saf Kotlin: Kullanıcı Adını Temizleme

Yukarıdaki dönüştürme mantığı yalnızca standart Kotlin'dir. Android gerekmeden tek başına test edebilirsiniz. Aşağıda aynı temizleme kuralının bağımsız olarak çalıştırılması gösterilmiştir.

Bunun gibi mantığı saf işlevlerde tutmak, birim testleri yazmayı kolaylaştırır.

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

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

Hızlı Kontrol

Bir TextField'ın onValueChange geri çağrısı, value'ya verilen durumu hiç güncellemezse ne olur?

Özet

Compose'ta metin girişinin temelini artık biliyorsunuz:

TextField ve OutlinedTextField, bir value ve onValueChange geri çağrısı alır.
Metni remember { mutableStateOf(...) } içinde tutar ve her değişiklikte güncellersiniz (durum yükseltme).
label, placeholder, baş ve son simgeler ile singleLine, görünümü ve davranışı şekillendirir.
Durumun sahibi olduğunuz için kullanıcı yazarken girdiye anında tepki verebilir veya girdiyi dönüştürebilirsiniz.

Sırada: yalnızca tek bir alanın değil, formun tamamının durumunu yönetmek.

Sıkça Sorulan Sorular

“TextField ve Kullanıcı Girdisi” dersi ücretsiz mi?

Evet — “TextField ve Kullanıcı Girdisi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Android Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Android Academy kursu toplamda 4 dersten oluşur.

“TextField ve Kullanıcı Girdisi” dersinde ne öğreneceğim?

Compose'ta kullanıcıdan metin alın. Android Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Android Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Android Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“TextField ve Kullanıcı Girdisi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Android Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Android Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Android Academy Sayfasına Dön