Keyboard Avoidance — lényege, megvalósítási módszerei és a felület eltolása

Mi az a Keyboard Avoidance

Keyboard Avoidance — olyan technikák gyűjteménye, amelyek biztosítják az aktív beviteli mező láthatóságát a rendszerbillentyűzet iOS-en történő megjelenésekor. Az alapvető probléma: a billentyűzet a képernyő akár 50%-át is elfoglalja, és eltakarja a felület alsó felét, beleértve a szövegmezőket, a küldés gombokat és más elemeket.

Három fő megközelítés létezik a megvalósításra: kézi vezérlés Keyboard Notifications segítségével (klasszikus módszer, iOS 3.0 óta működik), UIScrollView használata automatikus görgetéssel (az Apple által ajánlott), és Keyboard Layout Guide (modern módszer iOS 15+-tól). A választás a minimális támogatott iOS-verziótól és a felület összetettségétől függ.

Az Apple szerint a Keyboard Avoidance hiánya az egyik leggyakoribb oka az alkalmazások elutasításának a felülvizsgálat során, ha a szövegmezőket teljesen eltakarja a billentyűzet. Az App Store irányelvei kifejezetten megkövetelik, hogy minden interaktív elem elérhető maradjon aktív bevitel során.

Miért nem teszi ezt az iOS automatikusan

Az iOS nem tudja automatikusan meghatározni, melyik elemnek kell láthatónak maradnia, mivel nem ismeri a felület szemantikáját. Egy egyszerű űrlapban egy szövegmezővel elég a teljes képernyőt eltolni. Egy összetett felületen egyedi panelekkel, lebegő gombokkal és több szekcióval eltérő viselkedési logika szükséges.

Ezenkívül egyes alkalmazások szándékosan nem tolják el a tartalmat — például billentyűzetes számológépek vagy szerkesztők, ahol a billentyűzet a munkaterület része. Az iOS a fejlesztőre bízza a döntést, rugalmas API-kat biztosítva minden forgatókönyvhöz.

Keyboard Frame Notifications

UIKeyboardWillShowNotification — a fő értesítés, amelyet az iOS küld a billentyűzet megjelenése előtt. Tartalmaz egy CGRect-et a billentyűzet végső pozíciójával az UIResponder.keyboardFrameEndUserInfoKey szótárban, valamint az animáció időtartamát az UIResponder.keyboardAnimationDurationUserInfoKey-ben.

Az értesítés kezelőjének ki kell számítania az átfedést az aktív szövegmező és a billentyűzet között, majd módosítania kell a tároló alsó margóját (contentInset vagy frame). Ha a mező a billentyűzet felső széle alatt van, a tartalom felfelé tolódik az átfedés mértékével. A billentyűzet elrejtésekor a margó visszaáll az eredeti értékre.

@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
}

Az értesítések használatakor fontos az animáció szinkronizálása a rendszerbillentyűzettel. Az iOS átadja az animációs görbét (UIResponder.keyboardAnimationCurveUserInfoKey) és az időtartamot. Használja a UIView.animate-et ezekkel a paraméterekkel, hogy a tartalom simán, a billentyűzet megjelenésével egyidejűleg tolódjon el.

Keyboard Layout Guide iOS 15+-ban

UIScrollView.keyboardLayoutGuide — egy modern API a Keyboard Avoidance-hoz, amelyet iOS 15-ben vezettek be. Automatikusan követi a billentyűzet pozícióját és frissíti az Auto Layout megszorításokat, amelyek a felület alsó részét a billentyűzet felső széléhez kötik.

A használathoz elegendő aktiválni a layout guide-ot az UIScrollView-ban vagy UIStackView-ben, és hozzá kapcsolni a tartalom alsó megszorítását. Nincs szükség kézi munkára értesítésekkel, magasságszámítással és animációval — a rendszer mindent automatikusan elvégez, szinkronizálva az animációt a billentyűzet megjelenésével és elrejtésével.

// Keyboard Layout Guide engedélyezése (iOS 15+)
scrollView.keyboardLayoutGuide.followsUndockedKeyboard = true

// Alsó megszorítás rögzítése a billentyűzet tetejéhez
contentView.bottomAnchor.constraint(
    equalTo: scrollView.keyboardLayoutGuide.topAnchor
).isActive = true

followsUndockedKeyboard — az a tulajdonság, amely meghatározza, hogy a guide-nak reagálnia kell-e a billentyűzetre, amely leválasztható az alsó szélről (iPad-en). Csak akkor állítsa true-ra, ha a felület helyesen működik a lebegő billentyűzettel. iPhone esetén ez a tulajdonság figyelmen kívül van hagyva — a billentyűzet mindig az alsó szélhez van rögzítve.

UIScrollView és a billentyűzet

UIScrollView — egy tároló, amelyet az Apple a Keyboard Avoidance alapjaként ajánl. Amikor a billentyűzet megjelenik, a scroll view megnöveli a contentInset.bottom értékét, lehetővé téve a tartalom felfelé görgetését és az aktív mező láthatóvá tételét.

A kulcsfontosságú metódus — scrollRectToVisible, amely programozottan görgeti a scroll view-t úgy, hogy a megadott téglalap (aktív szövegmező) a látható területre kerüljön. A contentInset módosításának és a scrollRectToVisible meghívásának kombinálásával garantálja, hogy a mező nemcsak hogy nincs eltakarva, hanem a látható terület felső részén helyezkedik el.

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-tel esetén az Apple a UITableViewController használatát ajánlja, amely automatikusan korrigálja a contentInset-et a billentyűzet megjelenésekor. Ha UIViewController-t használ hozzáadott táblázattal, manuálisan kell megvalósítania a Keyboard Avoidance-t — a UITableViewController nem biztosítja ezt a viselkedést egyedi vezérlők számára.

Auto Layout és Keyboard Avoidance

Auto Layout lehetővé teszi a Keyboard Avoidance megvalósítását animációk programozása nélkül — elég megváltoztatni egy adott megszorítás aktivitását (isActive) vagy frissíteni a konstansát a billentyűzetértesítésre válaszul.

Tipikus séma: hozzon létre egy IBOutlet NSLayoutConstraintet a scroll view vagy a tartalom alsó margójához, és a keyboardWillShow kezelőben állítsa be a constraint.constant = keyboardHeight értéket, a keyboardWillHide-ben pedig állítsa vissza 0-ra. Frissítse az elrendezést a layoutIfNeeded segítségével az animate blokkon belül a sima átmenethez.

UIStackView használatakor az alsó margó megszorításainak módosítása is működik: a stack view automatikusan újraelosztja a gyermekelemeket. Ha azonban a stack view egy UIScrollView-n belül van, jobb a scroll view saját contentInset-jét kezelni, nem a benne lévő megszorításokat.

Külső megoldások Keyboard Avoidance-hoz

IQKeyboardManager — a legnépszerűbb könyvtár (több mint 16.000 csillag a GitHub-on), amely automatikus Keyboard Avoidance-t valósít meg egyetlen sor kód nélkül a vezérlőben. Method swizzling-et használ a szövegmezők nyomon követésére, és automatikusan felemeli a tartalmat a billentyűzet megjelenésekor.

A könyvtár rugalmas beállításokat kínál: megadhatja a mező és a billentyűzet közötti távolságot, engedélyezheti/letilthatja egyes vezérlők számára, konfigurálhatja a viselkedést UITextView és egyedi beviteli nézetek számára. A method swizzling azonban ütközhet más könyvtárakkal, és az Apple nem ajánlja ezt a megközelítést production kódhoz a kiszámíthatatlan mellékhatások miatt.

Alternatívák közé tartozik a TPKeyboardAvoiding (könnyű könyvtár, ~2000 csillag) és a közösségi KeyboardManager. Modern projektekhez az Apple a beépített iOS 15+-eszközök használatát ajánlja, alacsonyabb minimális verziójú projektekhez pedig az UIScrollView-t contentInset-tel, ami a legmegbízhatóbb beépített megoldás.