Error State — bu nima, maydon xatolarini ko'rsatish va Androidda amalga oshirish
Error State — bu noto'g'ri ma'lumotlarni vizual ravishda bildiruvchi kiritish maydoni holatidir. Androidda Error State TextInputLayout.setError() orqali amalga oshiriladi, u ramkani qizil rangga bo'yaydi va maydon ostida xato matnini ko'rsatadi. Material Design Guidelines, 2026 ma'lumotlariga ko'ra, Error State sezilarli, ammo agressiv bo'lmasligi kerak: qizil ramka, xato matni, belgi. Error Statedan to'g'ri foydalanish formalar konversiyasini 20-30% ga oshiradi, chunki foydalanuvchi kontekstni yo'qotmasdan xatolarni tez aniqlaydi va tuzatadi.
Asosiy
- Error State — ma'lumotlar noto'g'ri ekanligini foydalanuvchiga ko'rsatuvchi vizual maydon holati.
- TextInputLayout.setError() — Material Design Componentsda xato ko'rsatishning asosiy metodi.
- Vizual ko'rsatkichlar: qizil ramka, xato matni, holat belgisi, paydo bo'lish animatsiyasi.
- Xatoni tiklash matn o'zgartirilganda avtomatik yoki qo'lda setError(null) orqali sodir bo'ladi.
- Maxsus Error State nostandart ko'rinish talab qilinganda ishlatiladi: faqat belgi, boshqa rang, maydonlar guruhi.
Androidda maydon xato holati nima?
Error State — kiritilgan ma'lumotlar validatsiyadan o'tmaganida faollashadigan maxsus ko'rsatish rejimidir. Vizual ravishda Error State uch komponentni o'z ichiga oladi: maydon konturi yoki fon rangining o'zgarishi (odatda qizil), maydon ostida xato tavsifi bilan matn xabarining paydo bo'lishi va ixtiyoriy ravishda — belgi yoki yoritish. Error Statedan maqsad foydalanuvchi e'tiborini muammoli maydonga darhol jalb qilish va xatoni qanday tuzatishni ko'rsatishdir.
Androidda Error State Material Design Componentsdan TextInputLayout darajasida amalga oshirilgan. TextInputLayout EditTextni o'rab oladi va uning holatlarini boshqaradi: normal, focused, error, disabled. setError(String) metodi maydonni xato holatiga o'tkazadi, ramka rangini o'zgartiradi va xabarni ko'rsatadi. Matn o'zgartirilganda yoki setError(null) chaqirilganda maydon normal holatga qaytadi.
Material Design Guidelinesga ko'ra, Error State sezilarli, ammo dominant bo'lmasligi kerak. Ramkaning qizil rangi normal holat bilan kontrast hosil qilishi kerak, lekin interfeysni ortiqcha yuklamasligi kerak. Xato xabari muammo va uni hal qilish usuli haqida aniq ma'lumotni o'z ichiga olishi kerak. Xato belgisi (masalan, undov belgisi bo'lgan qizil doira) vizual signalni kuchaytiradi.
TextInputLayoutda setError qanday ishlaydi
setError(CharSequence errorText) metodi TextInputLayoutni xato holatiga o'tkazadi. errorText parametri — maydon ostida ko'rsatiladigan matn. Agar null uzatilsa, xato tiklanadi. TextInputLayout animatsiyani boshqaradi: xato matni silliq paydo bo'lish bilan chiqadi, ramka qizil rangga o'zgaradi. Xato belgisi (standart sifatida doira ichida undov belgisi) maydon oxirida ko'rsatiladi.
Muhim tafsilotlar: setErrorEnabled(true) setErrordan oldin chaqirilishi kerak, xato xabari uchun joy ajratish uchun. Aks holda xato paydo bo'lganda layout 'sakrashi' mumkin, chunki xabar uchun joy ajratilmagan. Layoutning siljishini oldini olish uchun har doim XMLda app:errorEnabled="true" orqali xato qo'llab-quvvatlashini yoqish tavsiya etiladi.
setErrorEnabled(true) opsiyasi faol bo'lganda setError metodi maydon matni o'zgartirilganda avtomatik tiklanadi. Bu xatti-harakat real vaqt validatsiyasi uchun qulay: foydalanuvchi xatoni tuzatishni boshlashi bilan qizil ramka yo'qoladi va maydon normal holatga qaytadi. Biroq murakkab stsenariylarda bu avtomatik tiklash istalmagan bo'lishi mumkin — bunday hollarda xatoni qo'lda boshqaring.
kotlin
val til = findViewById<TextInputLayout>(R.id.til_email)
// Xato qo'llab-quvvatlashni yoqish (aks holda XMLda sozlang)
til.isErrorEnabled = true
// Xato xabarini o'rnatish
til.error = "Invalid email address"
// Xatoni tozalash
til.error = null
// Xato mavjudligini tekshirish
if (til.error != null) {
// Maydon xato holatida
}Misolda setError/isErrorEnabledga kirish uchun Kotlin xususiyatlaridan foydalanilgan. TextInputLayout avtomatik ravishda UI ni yangilaydi: boxStrokeColor rangini o'zgartiradi, xato belgisini ko'rsatadi, xato matnini ekranga chiqaradi. EditTextda matnni o'zgartirsangiz, xato avtomatik tiklanadi. Qo'lda tiklash uchun error = null belgilang.
Xatolarni ko'rsatishning muqobil usullari
Hamma loyihalar Material Design Componentsdan foydalanmaydi. Maxsus ko'rsatish uchun EditText ostida xato paytida ko'rinadigan alohida TextView ishlatilishi mumkin. Bu yondashuv stillar va xabarning joylashuvi ustidan to'liq nazorat beradi. Masalan, xabarni maydonning o'ng tomoniga joylashtirish, boshqa fon rangidan foydalanish yoki matnning chap tomoniga belgi qo'shish mumkin.
Jetpack Compose da Error State OutlinedTextField yoki TextFielddagi isError parametri orqali amalga oshiriladi. isError = true bo'lganda ramka qizil rangga aylanadi va xato matnini supportingText orqali ko'rsatish mumkin. Compose matn o'zgartirilganda avtomatik tozalashga ega emas — dasturchi xato holatini remember va mutableStateOf orqali qo'lda boshqaradi.
Guruh xatosi uchun (bir nechta maydon uchun bitta xabar, masalan, 'Barcha majburiy maydonlarni to'ldiring') formaning yuqori qismida Snackbar, Dialog yoki inline blok ishlatiladi. Guruh xatosi alohida maydonlarning Error Statega o'rnini bosmaydi, balki uni to'ldiradi. Foydalanuvchi avval umumiy xabarni ko'radi, keyin xatolik bor aniq maydonlarni qidiradi.
| Usul | Afzalliklar | Kamchiliklar | Qachon ishlatish |
|---|---|---|---|
| TextInputLayout.setError | Standart, animatsiya, avtomatik tozalash | Faqat Material Components bilan | MDC uchun asosiy variant |
| Alohida TextView | Stillar ustidan to'liq nazorat | Ko'rinishni qo'lda boshqarish kerak | Maxsus mavzular, MDCsiz |
| Compose isError | Composega o'rnatilgan | Holatni qo'lda boshqarish | Jetpack Compose loyihalari |
| Snackbar/Dialog | Guruh xabari | Muayyan maydonga bog'liq emas | Maydon Error Statega qo'shimcha |
Xato ranglari, belgilari va animatsiyasi
Material Design Componentsda Error State rangi boxStrokeErrorColor atributi yoki mavzudagi colorError atributi orqali boshqariladi. Standart sifatida tizim qizil rangidan foydalaniladi, lekin uni dastur mavzusida yoki to'g'ridan-to'g'ri TextInputLayoutda app:boxStrokeErrorColor="@color/customErrorColor" orqali o'zgartirish mumkin. Qorong'u mavzu qo'llab-quvvatlashi uchun light va dark rejimlar uchun turli ranglar bilan selektordan foydalanish tavsiya etiladi.
Xato belgisi app:errorIconDrawable orqali sozlanadi. Standart sifatida doira ichida undov belgisi ko'rsatiladi. Uni maxsus belgi bilan almashtirish yoki app:errorIconDrawable="@null" belgilash orqali butunlay olib tashlash mumkin. Belgi TextInputLayout oxirida ko'rsatiladi va qo'shimcha vizual marker rolini o'ynaydi. Material Design 3 da xato belgisi foydalanish imkoniyati uchun majburiydir.
Animatsiya TextInputLayoutga o'rnatilgan: matn pastdan silliq shaffoflik o'zgarishi bilan chiqadi. Maxsus animatsiya uchun Transition API yoki MotionLayoutdan foydalaning. Masalan, xato paytida maydonning tebranishi qo'shimcha e'tiborni tortadi. Ammo animatsiyadan suiiste'mol qilish UXni yomonlashtiradi — xabarning silliq paydo bo'lishi etarli.
Validatsiya paytida xato holatini boshqarish
Error State ni boshqarish ikki bosqichga bo'linadi: maydonni validatsiya qilishda xatoni o'rnatish va tuzatishda xatoni tiklash. Eng oddiy holatda validatsiya TextWatcher.afterTextChanged da chaqiriladi: qiymat noto'g'ri bo'lsa, xato xabari bilan setError chaqiriladi. To'g'ri bo'lsa — setError(null). TextInputLayout setError(null) holatni tiklaganda xatoni avtomatik yashiradi.
Forma validatsiyasi uchun xatolar formani yuborish bosqichida o'rnatiladi. Barcha maydonlar bo'ylab o'tish, har birini tekshirish, noto'g'ri maydonlar uchun xatolarni o'rnatish va birinchi xato maydonga fokus. Yuborish tugmasi esa bloklanadi. Forma katta bo'lsa, ekranni birinchi xato maydonga siljitish va avtomatik ravishda unga fokus qilish tavsiya etiladi.
Single error focus qoidasi: formani yuborishda fokusni faqat birinchi xato maydonga qo'ying. Foydalanuvchi xatolarni birma-bir tuzatadi va tuzatishdan keyin keyingi xato maydon avtomatik fokuslanadi. Bu bosqichma-bosqich yondashuv kognitiv yukni kamaytiradi. Material TextInputLayout xato o'rnatishda fokusni qo'lga kiritmaydi — buni requestFocus() orqali qo'lda qilish kerak.
Error State bilan ishlashdagi xatolar
Birinchi xato — isErrorEnabled yo'qligi. Agar setErrorEnabled setErrordan oldin chaqirilmasa, xato xabari paydo bo'lganda layout siljishi mumkin. Maydon ekranning o'rtasida bo'lsa, ayniqsa muhim — foydalanuvchi siljitish o'rnini yo'qotadi. Har doim XMLda app:errorEnabled="true" orqali yoki dasturiy ravishda xato o'rnatishdan oldin setErrorEnabled(true) ni yoqing.
Ikkinchi xato — juda uzun xato xabari. Uzun matn bir necha qatorga o'tib, qo'shni maydonlarni yopishi mumkin. Xato xabarining tavsiya etilgan uzunligi 20-40 belgidan iborat. Agar ko'proq ma'lumot kerak bo'lsa, normal holatda helperText (maslahat) yoki qo'shimcha tushuntirish uchun tooltipdan foydalaning. Qisqalik yaxshi Error Statega asosdir.
Uchinchi xato — foydalanish imkoniyatini e'tiborsiz qoldirish. Error State ekran o'quvchilari uchun foydalanish mumkin bo'lishi kerak. TextInputLayout xatoni avtomatik ravishda contentDescription orqali bildiradi, ammo maxsus tatbiqlar buni qo'lda qilishi kerak. Xato xabarlari uchun announceForAccessibility() yoki android:importantForAccessibility dan foydalaning. TalkBack foydalanuvchilari xatoni paydo bo'lishi bilanoq eshitishlari kerak.
| Xato | Muammo | Yechim |
|---|---|---|
| isErrorEnabled yo'q | Xatoda layout siljishi | XMLda app:errorEnabled="true" |
| Uzun xabar | Qo'shni maydonlarni yopish | 20-40 belgi, tafsilotlar uchun helperText |
| Foydalanish imkoniyati yo'q | Ekran o'quvchisi xatoni eshitmaydi | TalkBack foydalanuvchilari uchun muhim |
| Tekshiruvsiz avtomatik tiklash | Maydon noto'g'ri hisoblanadi | Xato tiklashni qo'lda boshqarish |
Tez-tez so'raladigan savollar
Xatoni tuzatishda Error Statega qanday tiklash mumkin?
TextInputLayoutdan foydalansangiz, setError(null) ni chaqiring. Xabar uchun joy ajratilgan holda qolishi, ammo matn yo'qolishi uchun setErrorEnabled(true) ni yoqing. EditTextda matn o'zgartirilganda TextInputLayout xatoni avtomatik tiklaydi. Qo'lda boshqarish uchun addTextChangedListener va har o'zgarishda setError(null) dan foydalaning.
Nima uchun xatoda layout siljiydi?
Chunki xato xabari uchun joy ajratilmagan. Yechim: TextInputLayout uchun XMLda app:errorEnabled="true" ni yoqing. Bu xabar uchun joy ajratadi va layout siljimaydi. Xato faol bo'lmasa, joy bo'sh qoladi, ammo layout barqarordir.
TextInputLayoutda xato rangini qanday o'zgartirish mumkin?
XMLda app:boxStrokeErrorColor atributidan yoki dasturiy ravishda til.setBoxStrokeErrorStateList() dan foydalaning. Rang turli holatlar uchun selektor bilan o'rnatilishi mumkin. Shuningdek, dastur mavzusidagi tizim colorError atributini o'zgartirish mumkin, bu xato rangini barcha maydonlar uchun global o'zgartiradi.
Ramka rangini o'zgartirmasdan xatoni ko'rsatish mumkinmi?
Ha, app:errorEnabled="true" va setError() dan foydalaning — lekin boxStrokeErrorColorni maydonning asosiy rangiga o'zgartiring. Belgisi va xato matni baribir ko'rinadi, ammo ramka asl rangida qoladi. Biroq bu xatoning ko'rinishini kamaytiradi, bu Material Designning foydalanish imkoniyati bo'yicha tavsiyalariga ziddir.
Jetpack Compose da Error Statega qanday tatbiq qilish mumkin?
Compose da OutlinedTextField yoki TextField da isError = true dan foydalaning. Xato matni supportingText parametri orqali uzatiladi. Holatni mutableStateOf orqali boshqaring. Matn o'zgartirilganda isError ni qo'lda tiklang. View tizimidagi TextInputLayoutdan farqli o'laroq, Compose da xatoni avtomatik tozalash yo'q.
Xulosa
- Error State — qizil ramka, matn va belgi orqali xatoni bildiruvchi vizual maydon holati.
- TextInputLayout.setError() — Material Design Componentsda Error Stateni boshqarishning asosiy metodi.
- isErrorEnabled xato paydo bo'lganda layout siljishining oldini olish uchun yoqilgan bo'lishi kerak.
- Muqobil usullar: xato uchun alohida TextView, guruh xatolari uchun Snackbar, Compose isError.
- Xato rangi va belgisi boxStrokeErrorColor va errorIconDrawable orqali sozlanadi.
- Foydalanish imkoniyati majburiy: ekran o'quvchisi xato paydo bo'lishi bilan uni e'lon qilishi kerak.
- Xatoni boshqarish validatsiyada: noto'g'ri qiymatda o'rnatish, tuzatishda yoki qo'lda tiklash.
Biz kalit topshirig'i bilan mobil ilovani ishlab chiqamiz
IT Sectr 2017-yildan beri startaplar va korxonalar uchun iOS va Android ilovalarini yaratadi. Biz sizga maslahat beramiz va eng yaxshi yechimni taklif qilamiz.
Shuningdek o'qing