Etiketler, Yer Tutucular ve Öndeki Simgeler
Girdileri anlaşılır ve kullanışlı hâle getirin.
Etiketler, Yer Tutucular ve Öndeki Simgeler, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 2. 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, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Make Inputs Friendly
A bare box leaves users guessing. Labels, placeholders, and icons turn a plain field into one that guides the user. 🧭
The label Slot
The label names the field. It sits inside when empty, then floats up to the border once the field is focused or filled.
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") }
)Add a Placeholder
A placeholder is hint text shown only while the field is empty. Use it for an example, not for the field's name.
placeholder = { Text("you@example.com") }Label vs Placeholder
The label always stays visible to identify the field. The placeholder vanishes the instant the user starts typing. Use both together.
Leading Icons
A leadingIcon sits at the start of the field. An envelope next to an email box makes its purpose obvious at a glance.
leadingIcon = {
Icon(Icons.Default.Email, contentDescription = null)
}Trailing Icons Too
A trailingIcon sits at the end. It is perfect for a clear button or a password visibility toggle.
trailingIcon = {
Icon(Icons.Default.Clear, contentDescription = "Clear")
}Always Describe Icons
Give each Icon a contentDescription so screen readers can announce it. Pass null only when the icon is purely decorative.
Make the Trailing Icon Tappable
Wrap a trailing icon in an IconButton so users can tap it, for example to clear the field in one touch.
trailingIcon = {
IconButton(onClick = { email = "" }) {
Icon(Icons.Default.Clear, "Clear")
}
}Supporting Text
supportingText shows a small hint below the field, like a format reminder or a character limit, without crowding the input.
supportingText = { Text("We never share your email.") }Combine Them Thoughtfully
Label plus icon plus a short placeholder is plenty. Too many hints add noise, so keep each field calm and clear.
Slots Are Just Composables
Every slot, like label and leadingIcon, is a lambda holding Composables. That means you can put any UI you want inside them.
Quick Check
When does a placeholder disappear from a text field?
Recap
You dressed up inputs with a label, placeholder hints, leading and trailing icons, and supporting text. Friendly fields, happy users. 😊
Sıkça Sorulan Sorular
“Etiketler, Yer Tutucular ve Öndeki Simgeler” dersi ücretsiz mi?
Evet — “Etiketler, Yer Tutucular ve Öndeki Simgeler” 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 Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
“Etiketler, Yer Tutucular ve Öndeki Simgeler” dersinde ne öğreneceğim?
Girdileri anlaşılır ve kullanışlı hâle getirin. Jetpack Compose 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.
Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose 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 2. dersidir.
“Etiketler, Yer Tutucular ve Öndeki Simgeler” 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 Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Jetpack Compose 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
- TextField ve OutlinedTextField
- Etiketler, Yer Tutucular ve Öndeki Simgeler
- Klavye Türleri ve IME Eylemleri
- Satır İçi Doğrulama ve Hata Durumları