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 Guidelines กำหนดอย่างชัดเจนว่าองค์ประสานที่ใช้งานได้ทั้งหมดต้องสามารถเข้าถึงได้ระหว่างการป้อนข้อมูลที่ใช้งาน

ทำไม iOS ไม่ทำสิ่งนี้โดยอัตโนมัติ

iOS ไม่สามารถกำหนดโดยอัตโนมัติได้ว่าองค์ใดควรอยู่ให้เห็นเพราะไม่รู้ความหมายของอินเทอร์เฟซ ในแบบฟอร์มง่าย ๆ ที่มีช่องข้อความหนึ่งช่อง การเลื่อนหน้าจอทั้งหมดขึ้นเท่านั้นก็พอ ในอินเทอร์เฟซที่ซับซ้อนด้วย แผงที่กำหนดเอง ปุ่มลอยตัว และหลายส่วน จำเป็นต้องใช้ตรรกะพฤติกรรมที่แตกต่างกัน

นอกจากนี้ บางแอปไม่เลื่อนเนื้อหาโดยเจตนา เช่น เครื่องคิดเลขแป้นพิมพ์หรือโปรแกรมแก้ไขที่แป้นพิมพ์เป็นส่วนหนึ่งของพื้นที่ทำงาน iOS ปล่อยให้นักพัฒนาตัดสินใจเอง โดยให้ API ที่ยืดหยุ่นสำหรับทุกสถานการณ์

การแจ้งเพราะกระจกแป้นพิมพ์

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 ที่เชื่อมต่อส่วนล่างของอินเทอร์เฟซกับขอบบนของแป้นพิมพ์

เพื่อใช้งาน เพียงเปิดใช้ layout guide บน UIScrollView หรือ UIStackView และแนบข้อจำกัดด้านล่างของเนื้อหาไปยังมัน ไม่ต้องเรียกใช้มือแม่แต่อย่างได กับการแจ้งเพราะ การคำนวณความสูง หรือแอนิเมชัน ระบบจะทำทุกอย่างโดยอัตโนมัติ พร้อมทั้งจับคู่แอนิเมชันกับการปรากณ์และซ่อนของแป้นพิมพ์

// เปิดใช้งาน Keyboard Layout Guide (iOS 15+)
scrollView.keyboardLayoutGuide.followsUndockedKeyboard = true

// ยึดข้อจำกัดด้านล่างไปยังส่วนบนของแป้นพิมพ์
contentView.bottomAnchor.constraint(
    equalTo: scrollView.keyboardLayoutGuide.topAnchor
).isActive = true

followsUndockedKeyboard เป็นคุณสมบัติที่กำหนดว่าไกด์ควรตอบสนองต่อแป้นพิมพ์ที่สามารถแยกออกจากขอบล่าง (บน iPad) หรือไม่ ตั้งค่าเป็น true เมื่ออินเทอร์เฟซ ทำงานได้อย่างถูกต้อง กับแป้นพิมพ์ลอยตัว สำหรับ iPhone คุณสมบัตินี้จะถูกละเว้ย — แป้นพิมพ์จะติดอยู่กับขอบล่างเสมอ

UIScrollView และแป้นพิมพ์

UIScrollView เป็นคอนเทนเนอร์ที่ Apple แนะนำให้ใช้เป็นพื้นฐานสำหรับ Keyboard Avoidance เมื่อแป้นพิมพ์ปรากณ์ scroll view จะเพิ่ม contentInset.bottom ของมัน ทำให้สามารถเลื่อนเนื้อหาขึ้นบนและทำให้ช่องที่ใช้งานมองเห็นได้

มีธรรมสำคัญคือ scrollRectToVisible ซึ่งเลื่อน scroll view โดยโปรแกรมเพื่อให้สี่เหลี่ยมมุมที่ระบุ (ช่องข้อความที่ใช้งาน) อยู่ในบริเวณที่มองเห็น การรวมการเปลี่ยน 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 สำหรับส่วนล่างของ scroll view หรือเนื้อหา และในตัวจัดการ keyboardWillShow ตั้ง constraint.constant = keyboardHeight และใน keyboardWillHide ตั้งกลับเป็น 0 อัปเดตเนื้อนแผนผังผ่าน layoutIfNeeded ภายในบล็อก animate เพื่อการเปลี่ยนแปลงที่นุ่มนวล

เมื่อใช้ UIStackView การเปลี่ยนข้อจำกัดส่วนล่างก็ใช้ได้: stack view จะแจกจำหน่ายองค์ประกอบย่อยโดยอัตโนมัติ อย่างไรก็ตาม หาก stack view อยู่ภายใน UIScrollView ควรจัดการ contentInset ของ scroll view เอง มากกว่าข้อจำกัดภายในนั้น

โซลูชันบุคคลที่สามสำหรับ Keyboard Avoidance

IQKeyboardManager เป็นไลบรารียอดนิยมที่สุด (มากกว่า 16,000 ดาวบน GitHub) ซึ่งใช้ Keyboard Avoidance อัตโนมัติโดยไม่ต้องเขียนโค้ดแม้เพียงบรรทัดดียวในตัวควบคุม โดยใช้ method swizzling เพื่อติดตามช่องข้อความ และเลื่อนเนื้อหาโดยอัตโนมัติเมื่อแป้นพิมพ์ปรากณ์

ไลบรารีให้การตั้งค่าที่ยืดหยุ่น: คุณสามารถระบุระยะห่างระหว่างช่องและแป้นพิมพ์ เปิด/ปิดสำหรับคอนโทรลเลอร์เฉพาะเจาะจง และกำหนดพฤติกรรมสำหรับ UITextView และมุมมองป้อนที่กำหนดเอง อย่างไรก็ตาม method swizzling อาจขัดแย้งกับไลบรารีอื่น และ Apple ไม่แนะนำวิธีนี้สำหรับโค้ดผลิตเนื่องจากผลกระทบข้างค์งไม่สามารถคาดเดาได้

ทางเลือกรวมถึง TPKeyboardAvoiding (ไลบรารีน้ำหนักเบา, ~2,000 ดาว) และ KeyboardManager จากชุมชน สำหรับโปรเจกต์ทันสมัย Apple แนะนำให้ใช้เครื่องมือในตัว iOS 15+ และสำหรับโปรเจกต์ที่มีเวอร์ชันต่ำกว่า — UIScrollView กับ contentInset ซึ่งเป็นโซลูชันที่เชื่อถือได้มากที่สุดในตัว