Keyboard Avoidance — innebörd, implementeringsmetoder och gränssnittsförskjutning

Vad är Keyboard Avoidance

Keyboard Avoidance — är en samling tekniker som säkerställer synligheten för det aktiva inmatningsfältet när systemtangentbordet visas på iOS. Grundproblemet: tangentbordet upptar upp till 50 % av skärmen och täcker den nedre halvan av gränssnittet, inklusive textfält, skicka-knappar och andra element.

Det finns tre huvudsakliga tillvägagångssätt för implementering: manuell hantering via Keyboard Notifications (klassisk metod, fungerar från iOS 3.0), användning av UIScrollView med automatisk rullning (rekommenderas av Apple) och Keyboard Layout Guide (modern metod från iOS 15+). Valet beror på den lägsta supporterade iOS-versionen och gränssnittets komplexitet.

Enligt Apple är frånvaron av Keyboard Avoidance en av de vanligaste orsakerna till avslag av appar vid granskning, om textfält är helt täckta av tangentbordet. App Store-riktlinjerna kräver uttryckligen att alla interaktiva element förblir tillgängliga under aktiv inmatning.

Varför iOS inte gör detta automatiskt

iOS kan inte automatiskt avgöra vilket element som ska förbli synligt, eftersom det inte känner till gränssnittets semantik. I ett enkelt formulär med ett textfält räcker det att flytta hela skärmen. I ett komplext gränssnitt med anpassade paneler, flytande knappar och flera sektioner krävs en annan beteendelogik.

Dessutom flyttar vissa appar avsiktligt inte innehåll — till exempel tangentbordsräknare eller redigeringsprogram där tangentbordet är en del av arbetsytan. Apple överlåter beslutet till utvecklaren och tillhandahåller flexibla API:er för alla scenarier.

Keyboard Frame Notifications

UIKeyboardWillShowNotification — det primära meddelandet som iOS skickar innan tangentbordet visas. Det innehåller en CGRect med tangentbordets slutposition i ordboken UIResponder.keyboardFrameEndUserInfoKey, samt animationens varaktighet i UIResponder.keyboardAnimationDurationUserInfoKey.

Meddelandehanteraren måste beräkna överlappningen mellan det aktiva textfältet och tangentbordet, och sedan ändra behållarens bottenmarginal (contentInset eller frame). Om fältet är under tangentbordets övre kant flyttas innehållet uppåt med överlappningsbeloppet. När tangentbordet döljs återgår marginalen till sitt ursprungliga värde.

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

När du använder meddelanden är det viktigt att synkronisera animationen med systemtangentbordet. iOS skickar animeringskurvan (UIResponder.keyboardAnimationCurveUserInfoKey) och varaktigheten. Använd UIView.animate med dessa parametrar så att innehållet flyttas smidigt, samtidigt som tangentbordet visas.

Keyboard Layout Guide i iOS 15+

UIScrollView.keyboardLayoutGuide — är ett modernt API för Keyboard Avoidance, introducerat i iOS 15. Det spårar automatiskt tangentbordets position och uppdaterar Auto Layout-begränsningarna som kopplar den nedre delen av gränssnittet till tangentbordets övre kant.

För användning räcker det att aktivera layoutguiden i UIScrollView eller UIStackView och koppla innehållets nedre begränsning till den. Inget manuellt arbete med meddelanden, höjdberäkning och animering krävs — systemet gör allt automatiskt, synkroniserar animationen med tangentbordets visning och döljande.

// Aktivera Keyboard Layout Guide (iOS 15+)
scrollView.keyboardLayoutGuide.followsUndockedKeyboard = true

// Fäst nedre begränsning till tangentbordets överkant
contentView.bottomAnchor.constraint(
    equalTo: scrollView.keyboardLayoutGuide.topAnchor
).isActive = true

followsUndockedKeyboard — egenskapen som avgör om guiden ska reagera på tangentbordet som kan kopplas loss från bottenkanten (på iPad). Ställ in på true endast om gränssnittet fungerar korrekt med flytande tangentbord. För iPhone ignoreras denna egenskap — tangentbordet är alltid fäst vid bottenkanten.

UIScrollView och tangentbordet

UIScrollView — är en behållare som Apple rekommenderar som bas för Keyboard Avoidance. När tangentbordet visas ökar rullningsvyn sin contentInset.bottom, vilket gör att innehållet kan rullas uppåt och det aktiva fältet blir synligt.

Nyckelmetoden — scrollRectToVisible, som programmatiskt rullar rullningsvyn så att den angivna rektangeln (det aktiva textfältet) hamnar i det synliga området. Genom att kombinera ändringen av contentInset med ett anrop till scrollRectToVisible garanterar du att fältet inte bara är otäckt utan också befinner sig i den övre delen av det synliga området.

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

För UIViewController med UITableView rekommenderar Apple att använda UITableViewController, som automatiskt justerar contentInset när tangentbordet visas. Om du använder UIViewController med en tillagd tabell måste du implementera Keyboard Avoidance manuellt — UITableViewController tillhandahåller inte detta beteende för anpassade kontroller.

Auto Layout och Keyboard Avoidance

Auto Layout gör det möjligt att implementera Keyboard Avoidance utan att programmera animationer — det räcker att ändra aktiviteten (isActive) för en viss begränsning eller uppdatera dess konstant som svar på ett tangentbordsmeddelande.

Typiskt schema: skapa en IBOutlet NSLayoutConstraint för bottenmarginalen på rullningsvyn eller innehållet, och i keyboardWillShow-handleren ställ in constraint.constant = keyboardHeight, och i keyboardWillHide återställ till 0. Uppdatera layouten via layoutIfNeeded inuti animate-blocket för en smidig övergång.

När du använder UIStackView fungerar ändringar av bottenmarginalbegränsningar också: stackvyn omfördelar automatiskt underordnade element. Men om stackvyn finns inuti en UIScrollView är det bättre att hantera contentInset för själva rullningsvyn, inte begränsningarna inuti den.

Tredjepartslösningar för Keyboard Avoidance

IQKeyboardManager — det populäraste biblioteket (över 16 000 stjärnor på GitHub) som implementerar automatisk Keyboard Avoidance utan en enda rad kod i kontrollern. Det använder method swizzling för att spåra textfält och höjer automatiskt innehållet när tangentbordet visas.

Biblioteket erbjuder flexibla inställningar: du kan ange avståndet mellan fältet och tangentbordet, aktivera/inaktivera för enskilda kontroller, konfigurera beteende för UITextView och anpassade inmatningsvyer. Method swizzling kan dock komma i konflikt med andra bibliotek, och Apple rekommenderar inte detta tillvägagångssätt för produktionskod på grund av oförutsägbara sidoeffekter.

Alternativ inkluderar TPKeyboardAvoiding (lätt bibliotek, ~2000 stjärnor) och KeyboardManager från communityn. För moderna projekt rekommenderar Apple att använda inbyggda iOS 15+-verktyg, och för projekt med lägre minimiversion — UIScrollView med contentInset, vilket är den mest pålitliga inbyggda lösningen.