Keyboard Avoidance — ουσία, τρόποι υλοποίησης και μετατόπιση διεπαφής

Τι είναι το Keyboard Avoidance

Keyboard Avoidance — είναι μια συλλογή τεχνικών που εξασφαλίζουν την ορατότητα του ενεργού πεδίου εισαγωγής κατά την εμφάνιση του πληκτρολογίου συστήματος στο iOS. Το βασικό πρόβλημα: το πληκτρολόγιο καταλαμβάνει έως και το 50% της οθόνης και καλύπτει το κάτω μισό της διεπαφής, συμπεριλαμβανομένων των πεδίων κειμένου, των κουμπιών αποστολής και άλλων στοιχείων.

Υπάρχουν τρεις κύριες προσεγγίσεις για την υλοποίηση: χειροκίνητη διαχείριση μέσω Keyboard Notifications (κλασική μέθοδος, λειτουργεί από iOS 3.0), χρήση UIScrollView με αυτόματη κύλιση (συνιστάται από την Apple) και Keyboard Layout Guide (σύγχρονη μέθοδος από iOS 15+). Η επιλογή εξαρτάται από την ελάχιστη υποστηριζόμενη έκδοση iOS και την πολυπλοκότητα της διεπαφής.

Σύμφωνα με την Apple, η απουσία Keyboard Avoidance είναι μία από τις συχνότερες αιτίες απόρριψης εφαρμογών κατά την αναθεώρηση, εάν τα πεδία κειμένου καλύπτονται πλήρως από το πληκτρολόγιο. Οι οδηγίες του App Store απαιτούν ρητά όλα τα διαδραστικά στοιχεία να παραμένουν προσβάσιμα κατά την ενεργή εισαγωγή.

Γιατί το iOS δεν το κάνει αυτόματα

Το iOS δεν μπορεί να καθορίσει αυτόματα ποιο στοιχείο πρέπει να παραμείνει ορατό, επειδή δεν γνωρίζει τη σημασιολογία της διεπαφής. Σε μια απλή φόρμα με ένα πεδίο κειμένου, αρκεί να μετατοπίσετε ολόκληρη την οθόνη. Σε μια σύνθετη διεπαφή με προσαρμοσμένους πίνακες, πλωτά κουμπιά και πολλαπλές ενότητες, απαιτείται διαφορετική λογική συμπεριφοράς.

Επιπλέον, ορισμένες εφαρμογές σκόπιμα δεν μετατοπίζουν το περιεχόμενο — για παράδειγμα, αριθμομηχανές πληκτρολογίου ή επεξεργαστές όπου το πληκτρολόγιο αποτελεί μέρος του χώρου εργασίας. Η Apple αφήνει την απόφαση στον προγραμματιστή, παρέχοντας ευέλικτα API για κάθε σενάριο.

Keyboard Frame Notifications

UIKeyboardWillShowNotification — η κύρια ειδοποίηση που στέλνει το iOS πριν από την εμφάνιση του πληκτρολογίου. Περιέχει ένα CGRect με την τελική θέση του πληκτρολογίου στο λεξικό UIResponder.keyboardFrameEndUserInfoKey, καθώς και τη διάρκεια κίνησης στο UIResponder.keyboardAnimationDurationUserInfoKey.

Ο χειριστής της ειδοποίησης πρέπει να υπολογίσει την επικάλυψη μεταξύ του ενεργού πεδίου κειμένου και του πληκτρολογίου, στη συνέχεια να αλλάξει το κάτω περιθώριο (contentInset ή frame) του δοχείου. Εάν το πεδίο βρίσκεται κάτω από το άνω άκρο του πληκτρολογίου, το περιεχόμενο μετατοπίζεται προς τα πάνω κατά το ποσό της επικάλυψης. Κατά την απόκρυψη του πληκτρολογίου, το περιθώριο επιστρέφει στην αρχική τιμή.

@objc func keyboardWillShow(_ notification: Notification) {
    guard let keyboardFrame = notification
        .userInfo?[UIResponder.keyboardFrameEndUserInfoKey]
        as? CGRect else { return }
    
    let keyboardHeight = keyboardFrame.height
    scrollView.contentInset.bottom = keyboardHeight
    scrollView.verticalScrollIndicatorInsets.bottom = keyboardHeight
}

Κατά τη χρήση ειδοποιήσεων, είναι σημαντικό να συγχρονίζετε την κίνηση με το πληκτρολόγιο συστήματος. Το iOS μεταδίδει την καμπύλη κίνησης (UIResponder.keyboardAnimationCurveUserInfoKey) και τη διάρκεια. Χρησιμοποιήστε το UIView.animate με αυτές τις παραμέτρους ώστε το περιεχόμενο να μετατοπίζεται ομαλά, ταυτόχρονα με την εμφάνιση του πληκτρολογίου.

Keyboard Layout Guide στο iOS 15+

UIScrollView.keyboardLayoutGuide — είναι ένα σύγχρονο API για Keyboard Avoidance, που εισήχθη στο iOS 15. Παρακολουθεί αυτόματα τη θέση του πληκτρολογίου και ενημερώνει τους περιορισμούς Auto Layout που συνδέουν το κάτω μέρος της διεπαφής με το άνω άκρο του πληκτρολογίου.

Για χρήση, αρκεί να ενεργοποιήσετε τον οδηγό διάταξης στο UIScrollView ή UIStackView και να συνδέσετε τον κάτω περιορισμό του περιεχομένου σε αυτόν. Καμία χειροκίνητη εργασία με ειδοποιήσεις, υπολογισμό ύψους και κίνηση δεν απαιτείται — το σύστημα τα κάνει όλα αυτόματα, συγχρονίζοντας την κίνηση με την εμφάνιση και απόκρυψη του πληκτρολογίου.

// Ενεργοποίηση Οδηγού Διάταξης Πληκτρολογίου (iOS 15+)
scrollView.keyboardLayoutGuide.followsUndockedKeyboard = true

// Σύνδεση κάτω περιορισμού στην κορυφή του πληκτρολογίου
contentView.bottomAnchor.constraint(
    equalTo: scrollView.keyboardLayoutGuide.topAnchor
).isActive = true

followsUndockedKeyboard — η ιδιότητα που καθορίζει εάν ο οδηγός πρέπει να αντιδρά στο πληκτρολόγιο που μπορεί να αποσπαστεί από το κάτω άκρο (στο iPad). Ορίστε το σε true μόνο εάν η διεπαφή λειτουργεί σωστά με πλωτό πληκτρολόγιο. Για iPhone, αυτή η ιδιότητα αγνοείται — το πληκτρολόγιο είναι πάντα συνδεδεμένο στο κάτω άκρο.

UIScrollView και πληκτρολόγιο

UIScrollView — είναι ένα δοχείο που η Apple συνιστά ως βάση για το Keyboard Avoidance. Όταν εμφανίζεται το πληκτρολόγιο, η προβολή κύλισης αυξάνει το contentInset.bottom της, επιτρέποντας την κύλιση του περιεχομένου προς τα πάνω και κάνοντας το ενεργό πεδίο ορατό.

Η βασική μέθοδος — scrollRectToVisible, η οποία προγραμματικά κυλάει την προβολή κύλισης έτσι ώστε το καθορισμένο ορθογώνιο (ενεργό πεδίο κειμένου) να βρίσκεται στην ορατή περιοχή. Συνδυάζοντας την αλλαγή του contentInset με την κλήση του scrollRectToVisible, εγγυάστε ότι το πεδίο όχι μόνο δεν καλύπτεται, αλλά βρίσκεται στο πάνω μέρος της ορατής περιοχής.

func adjustScrollForKeyboard(
    keyboardHeight: CGFloat,
    activeField: UIView
) {
    scrollView.contentInset.bottom = keyboardHeight
    scrollView.verticalScrollIndicatorInsets.bottom = keyboardHeight
    
    var visibleRect = view.frame
    visibleRect.size.height -= keyboardHeight
    
    if activeField.frame.origin.y > visibleRect.maxY {
        scrollView.scrollRectToVisible(
            activeField.frame, animated: true
        )
    }
}

Για UIViewController με UITableView, η Apple συνιστά τη χρήση του UITableViewController, το οποίο διορθώνει αυτόματα το contentInset κατά την εμφάνιση του πληκτρολογίου. Εάν χρησιμοποιείτε UIViewController με προστιθέμενο πίνακα, θα πρέπει να υλοποιήσετε το Keyboard Avoidance χειροκίνητα — το UITableViewController δεν παρέχει αυτή τη συμπεριφορά για προσαρμοσμένους ελεγκτές.

Auto Layout και Keyboard Avoidance

Auto Layout επιτρέπει την υλοποίηση του Keyboard Avoidance χωρίς προγραμματισμό κινήσεων — αρκεί να αλλάξετε τη δραστηριότητα (isActive) ενός συγκεκριμένου περιορισμού ή να ενημερώσετε τη σταθερά του ως απάντηση σε ειδοποίηση πληκτρολογίου.

Τυπικό σχήμα: δημιουργήστε έναν IBOutlet NSLayoutConstraint για το κάτω περιθώριο της προβολής κύλισης ή του περιεχομένου, και στον χειριστή keyboardWillShow ορίστε constraint.constant = keyboardHeight, και στο keyboardWillHide επαναφέρετε στο 0. Ενημερώστε τη διάταξη μέσω layoutIfNeeded μέσα στο μπλοκ animate για ομαλή μετάβαση.

Κατά τη χρήση UIStackView, οι αλλαγές στους περιορισμούς του κάτω περιθωρίου λειτουργούν επίσης: η στοίβα προβολή ανακατανέμει αυτόματα τα θυγατρικά στοιχεία. Ωστόσο, εάν η στοίβα προβολή βρίσκεται μέσα σε ένα UIScrollView, είναι προτιμότερο να διαχειρίζεστε το contentInset της ίδιας της προβολής κύλισης, όχι τους περιορισμούς εντός αυτής.

Λύσεις τρίτων για Keyboard Avoidance

IQKeyboardManager — η πιο δημοφιλής βιβλιοθήκη (πάνω από 16.000 αστέρια στο GitHub) που υλοποιεί αυτόματο Keyboard Avoidance χωρίς ούτε μία γραμμή κώδικα στον ελεγκτή. Χρησιμοποιεί method swizzling για την παρακολούθηση πεδίων κειμένου και ανυψώνει αυτόματα το περιεχόμενο κατά την εμφάνιση του πληκτρολογίου.

Η βιβλιοθήκη παρέχει ευέλικτες ρυθμίσεις: μπορείτε να καθορίσετε την απόσταση μεταξύ πεδίου και πληκτρολογίου, να ενεργοποιήσετε/απενεργοποιήσετε για μεμονωμένους ελεγκτές, να διαμορφώσετε τη συμπεριφορά για UITextView και προσαρμοσμένες προβολές εισαγωγής. Ωστόσο, το method swizzling μπορεί να έρθει σε σύγκρουση με άλλες βιβλιοθήκες και η Apple δεν συνιστά αυτή την προσέγγιση για κώδικα παραγωγής λόγω απρόβλεπτων παρενεργειών.

Οι εναλλακτικές περιλαμβάνουν TPKeyboardAvoiding (ελαφριά βιβλιοθήκη, ~2000 αστέρια) και KeyboardManager από την κοινότητα. Για σύγχρονα έργα, η Apple συνιστά τη χρήση ενσωματωμένων εργαλείων iOS 15+, και για έργα με χαμηλότερη ελάχιστη έκδοση — UIScrollView με contentInset, που είναι η πιο αξιόπιστη ενσωματωμένη λύση.