Error State — bu nədir, sahə xətalarının göstərilməsi və Android-də tətbiqi

Android-də sahə xəta vəziyyəti nədir?

Error State — daxil edilən məlumatların validasiyadan keçmədiyi halda aktivləşən xüsusi göstərim rejimidir. Vizual olaraq Error State üç komponentdən ibarətdir: sahənin kontur və ya fon rənginin dəyişməsi (adətən qırmızı), sahənin altında xətanı təsvir edən mətn mesajının görünməsi və isteğe bağlı olaraq — nişan və ya işıqlandırma. Error State-in məqsədi istifadəçinin diqqətini problemli sahəyə dərhal cəlb etmək və xətanı necə düzəltməyi göstərməkdir.

Android-də Error State Material Design Components-dən TextInputLayout səviyyəsində həyata keçirilir. TextInputLayout EditText-i əhatə edir və onun vəziyyətlərini idarə edir: normal, focused, error, disabled. setError(String) metodu sahəni xəta vəziyyətinə keçirir, çərçivənin rəngini dəyişir və mesajı göstərir. Mətn dəyişdirildikdə və ya setError(null) çağırıldıqda sahə normal vəziyyətə qayıdır.

Material Design Guidelines-a görə, Error State nəzərə çarpan, lakin dominant olmamalıdır. Çərçivənin qırmızı rəngi normal vəziyyətlə kontrast təşkil etməli, lakin interfeysi yükləməməlidir. Xəta mesajı problem və onun həlli yolu haqqında konkret məlumat ehtiva etməlidir. Xəta nişanı (məsələn, nida işarəsi olan qırmızı dairə) vizual siqnalı gücləndirir.

TextInputLayout-da setError necə işləyir

setError(CharSequence errorText) metodu TextInputLayout-u xəta vəziyyətinə keçirir. errorText parametri — sahənin altında göstərilən mətndir. null ötürüldükdə xəta sıfırlanır. TextInputLayout animasiyanı idarə edir: xəta mətni hamar görünmə ilə çıxır, çərçivə qırmızı rəngə dəyişir. Xəta nişanı (standart olaraq dairə içərisində nida işarəsi) sahənin sonunda göstərilir.

Vacib detallar: setErrorEnabled(true) setError-dan əvvəl çağırılmalıdır ki, xəta mesajı üçün yer ayrılsın. Əks halda xəta görünəndə layout „sıçraya” bilər, çünki mesaj üçün yer ayrılmamışdır. Layoutun yerdəyişməsinin qarşısını almaq üçün həmişə XML-də app:errorEnabled="true" vasitəsilə xəta dəstəyini aktivləşdirmək tövsiyə olunur.

setErrorEnabled(true) opsiyası aktiv olduqda setError metodu sahənin mətni dəyişdirildikdə avtomatik sıfırlanır. Bu davranış real vaxt validasiyası üçün əlverişlidir: istifadəçi xətanı düzəltməyə başlayan kimi qırmızı çərçivə yox olur və sahə normal vəziyyətə qayıdır. Lakin mürəkkəb ssenarilərdə bu avtomatik sıfırlama arzuolunmaz ola bilər — belə hallarda xətanı əl ilə idarə edin.

val til = findViewById<TextInputLayout>(R.id.til_email)

// Xəta dəstəyini aktivləşdir (əks halda XML-də təyin et)
til.isErrorEnabled = true

// Xəta mesajını təyin et
til.error = "Invalid email address"

// Xətanı təmizlə
til.error = null

// Xətanın mövcud olub-olmadığını yoxla
if (til.error != null) {
    // Sahə xəta vəziyyətindədir
}

Nümunədə setError/isErrorEnabled-ə daxil olmaq üçün Kotlin xüsusiyyətlərindən istifadə olunur. TextInputLayout UI-ni avtomatik yeniləyir: boxStrokeColor rəngini dəyişir, xəta nişanını göstərir, xəta mətnini ekrana çıxarır. EditText-də mətni dəyişdirsəniz, xəta avtomatik sıfırlanır. Əl ilə sıfırlamaq üçün error = null təyin edin.

Xətaların göstərilməsinin alternativ yolları

Bütün layihələr Material Design Components-dən istifadə etmir. Fərdi göstərim üçün EditText-in altında xəta zamanı görünən ayrıca TextView istifadə edilə bilər. Bu yanaşma stillər və mesajın yerləşməsi üzərində tam nəzarət verir. Məsələn, mesajı sahənin sağ tərəfində yerləşdirmək, fərqli fon rəngi istifadə etmək və ya mətnin soluna nişan əlavə etmək olar.

Jetpack Compose-da Error State OutlinedTextField və ya TextField-də isError parametri vasitəsilə həyata keçirilir. isError = true olduqda çərçivə qırmızı olur və xəta mətnini supportingText vasitəsilə göstərmək olar. Compose mətn dəyişdirildikdə avtomatik təmizləməyə malik deyil — tərtibatçı xəta vəziyyətini remember və mutableStateOf vasitəsilə əl ilə idarə edir.

Qrup xətası üçün (bir neçə sahə üçün bir mesaj, məsələn, „Bütün məcburi sahələri doldurun”) Snackbar, Dialog və ya formanın yuxarı hissəsində inline-blokdan istifadə olunur. Qrup xətası ayrı-ayrı sahələrin Error State-ni əvəz etmir, əksinə tamamlayır. İstifadəçi əvvəlcə ümumi mesajı görür, sonra xətası olan konkret sahələri axtarır.

Xəta rəngləri, nişanları və animasiyası

Material Design Components-də Error State rəngi boxStrokeErrorColor atributu və ya mövzudakı colorError atributu vasitəsilə idarə olunur. Standart olaraq sistem qırmızı rəngi istifadə olunur, lakin onu tətbiqin mövzusunda və ya birbaşa TextInputLayout-da app:boxStrokeErrorColor="@color/customErrorColor" vasitəsilə dəyişdirmək olar. Qaranlıq mövzu dəstəyi üçün açıq və qaranlıq rejimlər üçün fərqli rəngləri olan selektordan istifadə etmək tövsiyə olunur.

Xəta nişanı app:errorIconDrawable vasitəsilə konfiqurasiya edilir. Standart olaraq dairə içərisində nida işarəsi göstərilir. Onu fərdi nişanla əvəz etmək və ya app:errorIconDrawable="@null" təyin etməklə tamamilə silmək olar. Nişan TextInputLayout-un sonunda göstərilir və əlavə vizual marker rolunu oynayır. Material Design 3-də xəta nişanı əlçatanlıq üçün məcburidir.

Animasiya TextInputLayout-a daxildir: mətn aşağıdan hamar şəffaflıq dəyişməsi ilə çıxır. Fərdi animasiya üçün Transition API və ya MotionLayout istifadə edin. Məsələn, xəta zamanı sahənin yırğalanması əlavə diqqət cəlb edir. Lakin animasiyadan sui-istifadə UX-i pisləşdirir — mesajın hamar görünməsi kifayətdir.

Validasiya zamanı xəta vəziyyətinin idarə edilməsi

Error State-in idarə edilməsi iki mərhələyə bölünür: sahənin validasiyası zamanı xətanın təyin edilməsi və düzəliş zamanı xətanın sıfırlanması. Ən sadə halda validasiya TextWatcher.afterTextChanged-də çağırılır: dəyər yanlışdırsa, xəta mesajı ilə setError çağırılır. Düzgündürsə — setError(null). TextInputLayout setError(null) vəziyyəti sıfırladıqda xətanı avtomatik gizlədir.

Forma validasiyası üçün xətalar formanın göndərilməsi mərhələsində təyin edilir. Bütün sahələr üzrə keçid, hər birinin yoxlanılması, yanlış sahələr üçün xətaların təyin edilməsi və ilk səhv sahəyə fokus. Göndərmə düyməsi isə bloklanır. Forma böyükdürsə, ekranı ilk xəta olan sahəyə sürüşdürmək və avtomatik olaraq ona fokuslanmaq tövsiyə olunur.

Single error focus qaydası: formanı göndərərkən fokusu yalnız ilk səhv sahəyə qoyun. İstifadəçi bir-bir xətaları düzəldir və düzəlişdən sonra növbəti səhv sahə avtomatik fokuslanır. Bu addım-addım yanaşma koqnitiv yükü azaldır. Material TextInputLayout xəta təyin edərkən fokusu ələ keçirmir — bunu requestFocus() vasitəsilə əl ilə etmək lazımdır.

Error State ilə işləyərkən səhvlər

Birinci səhv — isErrorEnabled-in olmaması. setErrorEnabled setError-dan əvvəl çağırılmazsa, xəta mesajı görünəndə layout yerdəyişə bilər. Sahə ekranın ortasında olduqda xüsusilə kritikdir — istifadəçi sürüşdürmə mövqeyini itirir. Həmişə XML-də app:errorEnabled="true" vasitəsilə və ya proqramlı şəkildə xəta təyin etməzdən əvvəl setErrorEnabled(true)-i aktivləşdirin.

İkinci səhv — çox uzun xəta mesajı. Uzun mətn bir neçə sətirə keçərək qonşu sahələri örtə bilər. Xəta mesajının tövsiyə olunan uzunluğu 20-40 simvoldur. Daha çox məlumat tələb olunarsa, normal vəziyyətdə helperText (ipucu) və ya əlavə izahat üçün tooltip istifadə edin. Qısalıq yaxşı Error State-in əsasıdır.

Üçüncü səhv — əlçatanlığın nəzərə alınmaması. Error State ekran oxuyucuları üçün əlçatan olmalıdır. TextInputLayout xətanı avtomatik olaraq contentDescription vasitəsilə bildirir, lakin fərdi tətbiqlər bunu əl ilə etməlidir. Xəta mesajları üçün announceForAccessibility() və ya android:importantForAccessibility istifadə edin. TalkBack istifadəçiləri xətanı görünən kimi eşitməlidirlər.