Error State — какво е това, показване на грешки на полета и имплементация в Android

Какво е състояние на грешка на поле в Android?

Error State е специален режим на показване на поле за въвеждане, който се активира, когато въведените данни не преминат валидация. Визуално Error State включва три компонента: промяна на цвета на рамката или фона на полето (обикновено в червено), появяване на текстово съобщение под полето с описание на грешката и опционално — икона или осветяване. Целта на Error State е незабавно да привлече вниманието на потребителя към проблемното поле и да предложи как да коригира грешката.

В Android Error State е имплементиран на ниво TextInputLayout от Material Design Components. TextInputLayout обвива EditText и управлява неговите състояния: normal, focused, error, disabled. Методът setError(String) превключва полето в състояние на грешка, променя цвета на рамката и показва съобщението. При промяна на текст или извикване на setError(null) полето се връща в normal.

Според Material Design Guidelines, Error State трябва да бъде забележим, но не доминиращ. Червеният цвят на рамката трябва да контрастира с нормалното състояние, но да не претоварва интерфейса. Съобщението за грешка трябва да съдържа конкретна информация за проблема и начина за решаването му. Иконата за грешка (например червен кръг с удивителен знак) засилва визуалния сигнал.

Как работи setError в TextInputLayout

Методът setError(CharSequence errorText) превключва TextInputLayout в състояние на грешка. Параметърът errorText е текстът, показван под полето. Ако се предаде null, грешката се нулира. TextInputLayout управлява анимацията: текстът на грешката се появява с плавен преход, рамката променя цвета си на червено. Иконата за грешка (по подразбиране удивителен знак в кръг) се показва в края на полето.

Важни детайли: setErrorEnabled(true) трябва да бъде извикано преди setError, за да се резервира място за съобщението за грешка. В противен случай при появяване на грешката оформлението може да „скочи”, тъй като мястото за съобщението не е резервирано. Препоръчва се винаги да включвате поддръжка за грешки в XML чрез app:errorEnabled="true", за да избегнете изместване на оформлението.

Методът setError се нулира автоматично при промяна на текста на полето, ако опцията setErrorEnabled(true) е активирана. Това поведение е удобно за валидация в реално време: веднага щом потребителят започне да коригира грешката, червената рамка изчезва и полето се връща в нормално състояние. Въпреки това, за сложни сценарии това автоматично нулиране може да бъде нежелателно — в такива случаи управлявайте грешката ръчно.

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

// Активиране на поддръжка за грешки (задайте в XML в противен случай)
til.isErrorEnabled = true

// Задаване на съобщение за грешка
til.error = "Invalid email address"

// Изчистване на грешка
til.error = null

// Проверка дали съществува грешка
if (til.error != null) {
    // Полето е в състояние на грешка
}

В примера се използват свойства на Kotlin за достъп до setError/isErrorEnabled. TextInputLayout автоматично актуализира интерфейса: променя цвета на boxStrokeColor, показва иконата за грешка, показва текста на грешката. Ако промените текста в EditText, грешката се нулира автоматично. За ръчно нулиране задайте error = null.

Алтернативни начини за показване на грешки

Не всички проекти използват Material Design Components. За персонализирано показване на грешка можете да използвате отделен TextView под EditText, който става видим при грешка. Този подход дава пълен контрол върху стиловете и позиционирането на съобщението. Например можете да поставите съобщението отдясно на полето, да използвате различен цвят на фона или да добавите икона отляво на текста.

В Jetpack Compose Error State се реализира чрез параметъра isError в OutlinedTextField или TextField. Когато isError = true, рамката става червена и можете да покажете текста на грешката чрез supportingText. Compose няма вградено автоматично изчистване при промяна на текст — разработчикът управлява състоянието на грешка ръчно чрез remember и mutableStateOf.

За групова грешка (едно съобщение за няколко полета, напр. „Попълнете всички задължителни полета”) се използва Snackbar, Dialog или вграден блок в горната част на формуляра. Груповата грешка не замества Error State на отделните полета, а го допълва. Потребителят първо вижда общото съобщение, след което търси конкретни полета с грешки.

Цветове, икони и анимация на грешки

Цветът на Error State в Material Design Components се управлява чрез атрибута boxStrokeErrorColor или атрибута colorError в темата. По подразбиране се използва системният червен цвят, но може да бъде заменен в темата на приложението или директно в TextInputLayout чрез app:boxStrokeErrorColor="@color/customErrorColor". За поддръжка на тъмна тема се препоръчва използването на селектор с различни цветове за светъл и тъмен режим.

Икона за грешка се конфигурира чрез app:errorIconDrawable. По подразбиране се показва удивителен знак в кръг. Може да бъде заменена с персонализирана икона или напълно премахната чрез задаване на app:errorIconDrawable="@null". Иконата се показва в края на TextInputLayout и служи като допълнителен визуален маркер. В Material Design 3 иконата за грешка е задължителна за достъпност.

Анимация на появяване на грешката е вградена в TextInputLayout: текстът се появява отдолу с плавна промяна на непрозрачността. За персонализирана анимация използвайте Transition API или MotionLayout. Например разклащането на полето при грешка привлича допълнително внимание. Но прекаленото използване на анимация влошава потребителското изживяване — плавното появяване на съобщението е достатъчно.

Управление на състоянието на грешка при валидация

Управлението на Error State се разделя на два етапа: задаване на грешка при валидация на поле и нулиране на грешка при корекция. В най-простия случай валидацията се извиква в TextWatcher.afterTextChanged: ако стойността е невалидна, се извиква setError със съобщение за грешка. Ако е валидна — setError(null). TextInputLayout автоматично скрива грешката, когато setError(null) нулира състоянието.

За валидация на формуляр грешките се задават на етапа на изпращане на формуляра. Преминаване през всички полета, проверка на всяко, задаване на грешки за невалидни полета и фокус върху първото грешно поле. Бутонът за изпращане се блокира по време на това. Ако формулярът е голям, се препоръчва превъртане на екрана до първото поле с грешка и автоматично фокусиране върху него.

Правилото single error focus: при изпращане на формуляр задавайте фокус само на първото поле с грешка. Потребителят коригира една грешка наведнъж и след корекция следващото поле с грешка автоматично получава фокус. Този подход стъпка по стъпка намалява когнитивното натоварване. Material TextInputLayout не прихваща фокуса при задаване на грешка — това трябва да се направи ръчно чрез requestFocus().

Грешки при работа с Error State

Първа грешка — липса на isErrorEnabled. Ако setErrorEnabled не бъде извикан преди setError, оформлението може да се измести при появяване на съобщението за грешка. Това е особено критично, ако полето се намира в средата на екрана — потребителят губи позицията на превъртане. Винаги включвайте setErrorEnabled(true) в XML чрез app:errorEnabled="true" или програмно преди задаване на грешка.

Втора грешка — твърде дълго съобщение за грешка. Дългият текст се прекъсва на няколко реда и може да покрива съседни полета. Препоръчителната дължина на съобщението за грешка е 20-40 знака. Ако е необходима повече информация, използвайте helperText (подсказка) в нормално състояние или подсказка за допълнително обяснение. Краткостта е основата на добрия Error State.

Трета грешка — игнориране на достъпността. Error State трябва да бъде достъпен за екранни четци. TextInputLayout автоматично обявява грешката чрез contentDescription, но персонализираните реализации трябва да правят това ръчно. Използвайте announceForAccessibility() или android:importantForAccessibility за съобщения за грешка. Потребителите на TalkBack трябва да чуят грешката веднага след появяването ѝ.