Keyboard Avoidance — esensya, mga paraan ng implementasyon at paglilipat ng interface

Ano ang Keyboard Avoidance

Keyboard Avoidance — ay isang koleksyon ng mga pamamaraan na nagsisiguro ng visibility ng aktibong input field kapag lumitaw ang system keyboard sa iOS. Ang pangunahing problema: ang keyboard ay sumasakop ng hanggang 50% ng screen at tinatakpan ang ibabang kalahati ng interface, kabilang ang mga text field, send button, at iba pang elemento.

Mayroong tatlong pangunahing diskarte sa implementasyon: manual na pamamahala sa pamamagitan ng Keyboard Notifications (klasikong paraan, gumagana mula noong iOS 3.0), paggamit ng UIScrollView na may awtomatikong pag-scroll (inirerekomenda ng Apple), at Keyboard Layout Guide (modernong paraan mula noong iOS 15+). Ang pagpili ay depende sa minimum na sinusuportahang bersyon ng iOS at sa pagiging kumplikado ng interface.

Ayon sa Apple, ang kawalan ng Keyboard Avoidance ay isa sa mga pinakakaraniwang dahilan ng pagtanggi ng app sa pagsusuri, kung ang mga text field ay ganap na natatakpan ng keyboard. Ang mga alituntunin ng App Store ay malinaw na nangangailangan na ang lahat ng interactive na elemento ay manatiling accessible sa panahon ng aktibong input.

Bakit hindi ito awtomatikong ginagawa ng iOS

Hindi awtomatikong matutukoy ng iOS kung aling elemento ang dapat manatiling nakikita, dahil hindi nito alam ang semantics ng interface. Sa isang simpleng form na may isang text field, sapat na upang ilipat ang buong screen. Sa isang kumplikadong interface na may mga custom na panel, lumulutang na mga button, at maraming seksyon, kinakailangan ang ibang lohika ng pag-uugali.

Bukod pa rito, ang ilang app ay sadyang hindi naglilipat ng nilalaman — halimbawa, mga keyboard calculator o editor kung saan ang keyboard ay bahagi ng workspace. Iniiwan ng iOS ang desisyon sa developer, na nagbibigay ng mga flexible na API para sa anumang senaryo.

Keyboard Frame Notifications

UIKeyboardWillShowNotification — ang pangunahing notification na ipinapadala ng iOS bago lumitaw ang keyboard. Naglalaman ito ng CGRect na may huling posisyon ng keyboard sa diksyunaryo ng UIResponder.keyboardFrameEndUserInfoKey, pati na rin ang tagal ng animation sa UIResponder.keyboardAnimationDurationUserInfoKey.

Ang handler ng notification ay dapat kalkulahin ang overlap sa pagitan ng aktibong text field at ng keyboard, pagkatapos ay baguhin ang ibabang margin (contentInset o frame) ng container. Kung ang field ay nasa ibaba ng itaas na gilid ng keyboard, ang nilalaman ay lilipat pataas ng halaga ng overlap. Kapag nagtago ang keyboard, ang margin ay babalik sa orihinal na halaga.

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

Kapag gumagamit ng mga notification, mahalagang i-sync ang animation sa system keyboard. Ipinapadala ng iOS ang animation curve (UIResponder.keyboardAnimationCurveUserInfoKey) at tagal. Gamitin ang UIView.animate kasama ang mga parameter na ito upang ang nilalaman ay lumipat nang maayos, kasabay ng paglitaw ng keyboard.

Keyboard Layout Guide sa iOS 15+

UIScrollView.keyboardLayoutGuide — ay isang modernong API para sa Keyboard Avoidance, na ipinakilala sa iOS 15. Awtomatiko nitong sinusubaybayan ang posisyon ng keyboard at ina-update ang mga Auto Layout constraint na nag-uugnay sa ibabang bahagi ng interface sa itaas na gilid ng keyboard.

Para sa paggamit, sapat na upang i-activate ang layout guide sa UIScrollView o UIStackView at i-link ang ibabang constraint ng nilalaman dito. Walang manual na trabaho sa mga notification, pagkalkula ng taas, at animation ang kinakailangan — awtomatikong ginagawa ng system ang lahat, na nini-sync ang animation sa paglitaw at pagtatago ng keyboard.

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

// I-link ang ibabang constraint sa itaas ng keyboard
contentView.bottomAnchor.constraint(
    equalTo: scrollView.keyboardLayoutGuide.topAnchor
).isActive = true

followsUndockedKeyboard — ang property na tumutukoy kung ang guide ay dapat tumugon sa keyboard na maaaring matanggal mula sa ibabang gilid (sa iPad). Itakda sa true lamang kung ang interface ay gumagana nang tama sa lumulutang na keyboard. Para sa iPhone, ang property na ito ay binabalewala — ang keyboard ay palaging nakakabit sa ibabang gilid.

UIScrollView at keyboard

UIScrollView — ay isang container na inirerekomenda ng Apple bilang batayan para sa Keyboard Avoidance. Kapag lumitaw ang keyboard, pinapataas ng scroll view ang contentInset.bottom nito, na nagpapahintulot sa nilalaman na mag-scroll pataas at gawing nakikita ang aktibong field.

Ang pangunahing pamamaraan — scrollRectToVisible, na programmatically na nag-scroll sa scroll view upang ang tinukoy na rectangle (aktibong text field) ay nasa nakikitang lugar. Sa pamamagitan ng pagsasama ng pagbabago ng contentInset sa pagtawag ng scrollRectToVisible, ginagarantiyahan mo na ang field ay hindi lamang hindi natatakpan, ngunit nasa itaas na bahagi ng nakikitang lugar.

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

Para sa UIViewController na may UITableView, inirerekomenda ng Apple ang paggamit ng UITableViewController, na awtomatikong nag-aadjust ng contentInset kapag lumitaw ang keyboard. Kung gumagamit ka ng UIViewController na may idinagdag na table, kailangan mong manu-manong i-implement ang Keyboard Avoidance — hindi ibinibigay ng UITableViewController ang pag-uugaling ito para sa mga custom na controller.

Auto Layout at Keyboard Avoidance

Auto Layout ay nagbibigay-daan sa implementasyon ng Keyboard Avoidance nang walang pagprograma ng mga animation — sapat na upang baguhin ang aktibidad (isActive) ng isang partikular na constraint o i-update ang constant nito bilang tugon sa notification ng keyboard.

Karaniwang scheme: gumawa ng IBOutlet NSLayoutConstraint para sa ibabang margin ng scroll view o nilalaman, at sa keyboardWillShow handler itakda ang constraint.constant = keyboardHeight, at sa keyboardWillHide i-reset sa 0. I-update ang layout sa pamamagitan ng layoutIfNeeded sa loob ng animate block para sa maayos na transition.

Kapag gumagamit ng UIStackView, gumagana rin ang mga pagbabago sa mga constraint ng ibabang margin: awtomatikong muling ipinamamahagi ng stack view ang mga child element. Gayunpaman, kung ang stack view ay nasa loob ng UIScrollView, mas mainam na pamahalaan ang contentInset ng scroll view mismo, hindi ang mga constraint sa loob nito.

Mga third-party na solusyon para sa Keyboard Avoidance

IQKeyboardManager — ang pinakasikat na library (mahigit 16,000 stars sa GitHub) na nag-i-implement ng awtomatikong Keyboard Avoidance nang walang kahit isang linya ng code sa controller. Gumagamit ito ng method swizzling para subaybayan ang mga text field at awtomatikong itinataas ang nilalaman kapag lumitaw ang keyboard.

Ang library ay nagbibigay ng mga flexible na setting: maaari mong tukuyin ang distansya sa pagitan ng field at keyboard, i-enable/i-disable para sa mga indibidwal na controller, i-configure ang pag-uugali para sa UITextView at custom na input view. Gayunpaman, ang method swizzling ay maaaring sumalungat sa iba pang mga library, at hindi inirerekomenda ng Apple ang diskarteng ito para sa production code dahil sa hindi mahuhulaan na side effects.

Ang mga alternatibo ay kinabibilangan ng TPKeyboardAvoiding (magaan na library, ~2000 stars) at KeyboardManager mula sa komunidad. Para sa mga modernong proyekto, inirerekomenda ng Apple ang paggamit ng mga built-in na tool ng iOS 15+, at para sa mga proyektong may mas mababang minimum na bersyon — UIScrollView na may contentInset, na siyang pinaka-maaasahang built-in na solusyon.