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 ενημερώνει αυτόματα το UI: αλλάζει το χρώμα 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 πρέπει να ακούσουν το σφάλμα αμέσως μετά την εμφάνισή του.