Error State — mi ez, mezőhibák megjelenítése és megvalósítása Androidban

Mi a mezõhiba állapot Androidban?

Error State egy beviteli mezõ speciális megjelenítési módja, amely akkor aktiválódik, amikor a bevitt adatok nem mentek át az érvényesítésen. Vizuálisan az Error State három összetevõbõl áll: a mezõ keretének vagy hátterének színváltozása (általában pirosra), szöveges üzenet megjelenése a mezõ alatt a hiba leírásával, és opcionálisan — egy ikon vagy kiemelés. Az Error State célja, hogy azonnal felhívja a felhasználó figyelmét a problémás mezõre, és javaslatot adjon a hiba kijavítására.

Androidban az Error State a Material Design Components TextInputLayout szintjén van megvalósítva. A TextInputLayout becsomagolja az EditText-et és kezeli annak állapotait: normal, focused, error, disabled. A setError(String) metódus hibaállapotba kapcsolja a mezõt, megváltoztatja a keret színét és megjeleníti az üzenetet. Szövegváltozáskor vagy a setError(null) meghívásakor a mezõ visszatér a normal állapotba.

A Material Design Guidelines szerint az Error State legyen észrevehetõ, de ne domináns. A keret piros színe kontrasztáljon a normál állapottal, de ne terhelje túl a felületet. A hibaüzenet tartalmazzon konkrét információt a problémáról és annak megoldásáról. A hiba ikonja (pl. piros kör felkiáltójellel) erõsíti a vizuális jelzést.

Hogyan mûködik a setError a TextInputLayout-ban

A setError(CharSequence errorText) metódus hibaállapotba kapcsolja a TextInputLayout-ot. Az errorText paraméter a mezõ alatt megjelenített szöveg. Ha null értéket adunk át, a hiba visszaállítódik. A TextInputLayout kezeli az animációt: a hibaüzenet sima átmenettel jelenik meg, a keret pirosra vált. A hiba ikonja (alapértelmezés szerint felkiáltójel körben) a mezõ végén jelenik meg.

Fontos részletek: A setErrorEnabled(true) paramétert meg kell hívni a setError elõtt, hogy helyet foglaljon a hibaüzenet számára. Ellenkezõ esetben a hiba megjelenésekor az elrendezés ugorhat, mert az üzenet számára nincs hely fenntartva. Javasolt mindig engedélyezni a hibatámogatást XML-ben az app:errorEnabled="true" segítségével az elrendezés elmozdulásának elkerülése érdekében.

A setError metódus automatikusan visszaáll a mezõ szövegének változásakor, ha a setErrorEnabled(true) opció engedélyezve van. Ez a viselkedés kényelmes a valós idejû érvényesítéshez: amint a felhasználó elkezdi javítani a hibát, a piros keret eltûnik és a mezõ visszatér a normál állapotba. Összetett forgatókönyvek esetén azonban ez az automatikus visszaállítás nem kívánatos lehet — ilyen esetekben manuálisan kezelje a hibát.

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

// Hibatámogatás engedélyezése (egyébként állítsa be XML-ben)
til.isErrorEnabled = true

// Hibaüzenet beállítása
til.error = "Invalid email address"

// Hiba törlése
til.error = null

// Ellenőrizze, hogy létezik-e hiba
if (til.error != null) {
    // A mező hibás állapotban van
}

A példában Kotlin tulajdonságok használatosak a setError/isErrorEnabled eléréséhez. A TextInputLayout automatikusan frissíti a felületet: megváltoztatja a boxStrokeColor színét, megjeleníti a hiba ikont, kiírja a hibaüzenetet. Ha módosítja a szöveget az EditText-ben, a hiba automatikusan visszaáll. Manuális visszaállításhoz állítsa be az error = null értéket.

Alternatív módok a hibák megjelenítésére

Nem minden projekt használ Material Design Components-eket. A egyéni hiba megjelenítéséhez használhat egy külön TextView-t az EditText alatt, amely hiba esetén láthatóvá válik. Ez a megközelítés teljes ellenõrzést biztosít a stílusok és az üzenet elhelyezése felett. Például elhelyezheti az üzenetet a mezõ jobb oldalán, használhat más háttérszínt, vagy adhat hozzá egy ikont a szövegtõl balra.

A Jetpack Compose-ban az Error State az isError paraméteren keresztül valósul meg az OutlinedTextField vagy TextField esetén. Amikor az isError = true, a keret piros lesz, és megjelenítheti a hibaüzenetet a supportingText segítségével. A Compose nem rendelkezik beépített automatikus törléssel szövegváltozáskor — a fejlesztõ manuálisan kezeli a hiba állapotát a remember és mutableStateOf segítségével.

Csoporthiba esetén (egy üzenet több mezõhöz, pl. „Töltse ki az összes kötelezõ mezõt”) Snackbar, Dialog vagy inline blokk használatos az ûrlap tetején. A csoporthiba nem helyettesíti az egyes mezõk Error State-jét, hanem kiegészíti azt. A felhasználó elõször az általános üzenetet látja, majd keresi a konkrét hibás mezõket.

Hibák színei, ikonjai és animációja

Az Error State színét a Material Design Components-ben a boxStrokeErrorColor attribútum vagy a téma colorError attribútuma kezeli. Alapértelmezés szerint a rendszer piros színe használatos, de felülírható az alkalmazás témájában vagy közvetlenül a TextInputLayout-ban az app:boxStrokeErrorColor="@color/customErrorColor" segítségével. A sötét téma támogatásához javasolt választót használni különbözõ színekkel a világos és sötét módhoz.

Hiba ikon az app:errorIconDrawable segítségével konfigurálható. Alapértelmezés szerint egy felkiáltójel jelenik meg körben. Lecserélhetõ egyéni ikonra, vagy teljesen eltávolítható az app:errorIconDrawable="@null" beállításával. Az ikon a TextInputLayout végén jelenik meg, és további vizuális jelzõként szolgál. A Material Design 3-ban a hiba ikon kötelezõ az akadálymentesítéshez.

Animáció a hiba megjelenéséhez be van építve a TextInputLayout-ba: a szöveg alulról jelenik meg az átlátszóság fokozatos változásával. Egyéni animációhoz használja a Transition API-t vagy a MotionLayout-ot. Például a mezõ megrázása hiba esetén további figyelmet vonz. Az animáció túlzott használata azonban rontja a felhasználói élményt — az üzenet sima megjelenése elegendõ.

A hibaállapot kezelése érvényesítéskor

Az Error State kezelése két szakaszra oszlik: a hiba beállítása a mezõ érvényesítésekor és a hiba visszaállítása javításkor. A legegyszerûbb esetben az érvényesítés a TextWatcher.afterTextChanged-ben történik: ha az érték érvénytelen, a setError meghívásra kerül a hibaüzenettel. Ha érvényes — setError(null). A TextInputLayout automatikusan elrejti a hibát, amikor a setError(null) visszaállítja az állapotot.

Ûrlap érvényesítéséhez a hibák az ûrlap beküldésének szakaszában kerülnek beállításra. Az összes mezõ bejárása, mindegyik ellenõrzése, hibák beállítása az érvénytelen mezõkhöz, és fókusz az elsõ hibás mezõre. A beküldõ gomb eközben blokkolva van. Ha az ûrlap nagy, javasolt a képernyõt az elsõ hibás mezõhöz görgetni és automatikusan fókuszálni rá.

A single error focus szabály: az ûrlap beküldésekor csak az elsõ hibás mezõre állítson fókuszt. A felhasználó egyszerre egy hibát javít, és a javítás után a következõ hibás mezõ automatikusan megkapja a fókuszt. Ez a lépésrõl-lépésre megközelítés csökkenti a kognitív terhelést. A Material TextInputLayout nem veszi át a fókuszt a hiba beállításakor — ezt manuálisan kell megtenni a requestFocus() segítségével.

Gyakori hibák az Error State használatakor

Elsõ hiba — az isErrorEnabled hiánya. Ha a setErrorEnabled nincs meghívva a setError elõtt, az elrendezés elmozdulhat a hibaüzenet megjelenésekor. Ez különösen kritikus, ha a mezõ a képernyõ közepén van — a felhasználó elveszíti a görgetési pozíciót. Mindig engedélyezze a setErrorEnabled(true) paramétert XML-ben az app:errorEnabled="true" segítségével vagy programozottan a hiba beállítása elõtt.

Második hiba — túl hosszú hibaüzenet. A hosszú szöveg több sorba törõdik, és átfedheti a szomszédos mezõket. A javasolt hibaüzenet hossza 20-40 karakter. Ha több információra van szükség, használjon helperText (súgó) szöveget normál állapotban vagy tooltip-et a további magyarázathoz. A rövidség a jó Error State alapja.

Harmadik hiba — az akadálymentesítés figyelmen kívül hagyása. Az Error State-nek elérhetõnek kell lennie a képernyõolvasók számára. A TextInputLayout automatikusan bejelenti a hibát a contentDescription segítségével, de az egyéni implementációknak ezt manuálisan kell megtenniük. Használja az announceForAccessibility() vagy android:importantForAccessibility függvényeket a hibaüzenetekhez. A TalkBack felhasználóknak azonnal hallaniuk kell a hibát, amint az megjelenik.