Keyboard Avoidance — esensi, metode implementasi, dan pergeseran antarmuka

Apa itu Keyboard Avoidance

Keyboard Avoidance — adalah kumpulan teknik yang memastikan visibilitas bidang input aktif saat keyboard sistem muncul di iOS. Masalah dasar: keyboard menempati hingga 50% layar dan menutupi bagian bawah antarmuka, termasuk bidang teks, tombol kirim, dan elemen lainnya.

Ada tiga pendekatan utama untuk implementasi: manajemen manual melalui Keyboard Notifications (metode klasik, berfungsi sejak iOS 3.0), penggunaan UIScrollView dengan pengguliran otomatis (direkomendasikan oleh Apple), dan Keyboard Layout Guide (metode modern sejak iOS 15+). Pemilihan tergantung pada versi iOS minimum yang didukung dan kompleksitas antarmuka.

Menurut Apple, tidak adanya Keyboard Avoidance adalah salah satu penyebab paling umum penolakan aplikasi saat review, jika bidang teks sepenuhnya tertutup oleh keyboard. Pedoman App Store secara eksplisit mensyaratkan bahwa semua elemen interaktif tetap dapat diakses selama input aktif.

Mengapa iOS tidak melakukannya secara otomatis

iOS tidak dapat secara otomatis menentukan elemen mana yang harus tetap terlihat, karena tidak mengetahui semantik antarmuka. Dalam formulir sederhana dengan satu bidang teks, cukup menggeser seluruh layar. Dalam antarmuka kompleks dengan panel khusus, tombol mengambang, dan beberapa bagian, diperlukan logika perilaku yang berbeda.

Selain itu, beberapa aplikasi sengaja tidak menggeser konten — misalnya, kalkulator keyboard atau editor di mana keyboard adalah bagian dari ruang kerja. iOS menyerahkan keputusan kepada pengembang, menyediakan API yang fleksibel untuk setiap skenario.

Keyboard Frame Notifications

UIKeyboardWillShowNotification — pemberitahuan utama yang dikirim iOS sebelum keyboard muncul. Ini berisi CGRect dengan posisi akhir keyboard di kamus UIResponder.keyboardFrameEndUserInfoKey, serta durasi animasi di UIResponder.keyboardAnimationDurationUserInfoKey.

Penangan pemberitahuan harus menghitung tumpang tindih antara bidang teks aktif dan keyboard, kemudian mengubah jarak bawah (contentInset atau frame) wadah. Jika bidang berada di bawah tepi atas keyboard, konten bergeser ke atas sebesar tumpang tindih. Saat keyboard disembunyikan, jarak kembali ke nilai awal.

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

Saat menggunakan pemberitahuan, penting untuk menyinkronkan animasi dengan keyboard sistem. iOS mengirimkan kurva animasi (UIResponder.keyboardAnimationCurveUserInfoKey) dan durasi. Gunakan UIView.animate dengan parameter ini agar konten bergeser dengan mulus, bersamaan dengan munculnya keyboard.

Keyboard Layout Guide di iOS 15+

UIScrollView.keyboardLayoutGuide — adalah API modern untuk Keyboard Avoidance, diperkenalkan di iOS 15. Ini secara otomatis melacak posisi keyboard dan memperbarui batasan Auto Layout yang menghubungkan bagian bawah antarmuka dengan tepi atas keyboard.

Untuk penggunaan, cukup aktifkan panduan tata letak di UIScrollView atau UIStackView dan ikat batasan bawah konten ke sana. Tidak ada kerja manual dengan pemberitahuan, perhitungan tinggi, dan animasi yang diperlukan — sistem melakukan semuanya secara otomatis, menyinkronkan animasi dengan muncul dan disembunyikannya keyboard.

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

// Kaitkan batasan bawah ke atas keyboard
contentView.bottomAnchor.constraint(
    equalTo: scrollView.keyboardLayoutGuide.topAnchor
).isActive = true

followsUndockedKeyboard — properti yang menentukan apakah panduan harus bereaksi terhadap keyboard yang dapat dilepaskan dari tepi bawah (di iPad). Setel ke true hanya jika antarmuka bekerja dengan benar dengan keyboard mengambang. Untuk iPhone, properti ini diabaikan — keyboard selalu terpasang ke tepi bawah.

UIScrollView dan keyboard

UIScrollView — adalah wadah yang direkomendasikan Apple sebagai dasar untuk Keyboard Avoidance. Saat keyboard muncul, scroll view meningkatkan contentInset.bottom-nya, memungkinkan konten digulir ke atas dan membuat bidang aktif terlihat.

Metode kunci — scrollRectToVisible, yang secara terprogram menggulir scroll view sehingga persegi panjang yang ditentukan (bidang teks aktif) berada di area yang terlihat. Dengan menggabungkan perubahan contentInset dengan panggilan scrollRectToVisible, Anda memastikan bahwa bidang tidak hanya tidak tertutup, tetapi juga berada di bagian atas area yang terlihat.

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

Untuk UIViewController dengan UITableView, Apple merekomendasikan penggunaan UITableViewController, yang secara otomatis menyesuaikan contentInset saat keyboard muncul. Jika Anda menggunakan UIViewController dengan tabel yang ditambahkan, Anda harus mengimplementasikan Keyboard Avoidance secara manual — UITableViewController tidak menyediakan perilaku ini untuk pengontrol khusus.

Auto Layout dan Keyboard Avoidance

Auto Layout memungkinkan implementasi Keyboard Avoidance tanpa memprogram animasi — cukup ubah aktivitas (isActive) batasan tertentu atau perbarui konstannya sebagai respons terhadap pemberitahuan keyboard.

Skema tipikal: buat IBOutlet NSLayoutConstraint untuk jarak bawah scroll view atau konten, dan di penangan keyboardWillShow atur constraint.constant = keyboardHeight, dan di keyboardWillHide reset ke 0. Perbarui tata letak melalui layoutIfNeeded di dalam blok animate untuk transisi yang mulus.

Saat menggunakan UIStackView, perubahan batasan jarak bawah juga berfungsi: stack view secara otomatis mendistribusikan ulang elemen anak. Namun, jika stack view berada di dalam UIScrollView, lebih baik mengelola contentInset scroll view itu sendiri, bukan batasan di dalamnya.

Solusi pihak ketiga untuk Keyboard Avoidance

IQKeyboardManager — pustaka paling populer (lebih dari 16.000 bintang di GitHub) yang mengimplementasikan Keyboard Avoidance otomatis tanpa satu baris kode pun di pengontrol. Ini menggunakan method swizzling untuk melacak bidang teks dan secara otomatis menaikkan konten saat keyboard muncul.

Pustaka ini menyediakan pengaturan yang fleksibel: Anda dapat menentukan jarak antara bidang dan keyboard, mengaktifkan/menonaktifkan untuk pengontrol tertentu, mengonfigurasi perilaku untuk UITextView dan tampilan input khusus. Namun, method swizzling dapat bertentangan dengan pustaka lain, dan Apple tidak merekomendasikan pendekatan ini untuk kode produksi karena efek samping yang tidak terduga.

Alternatif termasuk TPKeyboardAvoiding (pustaka ringan, ~2000 bintang) dan KeyboardManager dari komunitas. Untuk proyek modern, Apple merekomendasikan penggunaan alat bawaan iOS 15+, dan untuk proyek dengan versi minimum yang lebih rendah — UIScrollView dengan contentInset, yang merupakan solusi bawaan paling andal.