Sticker View pada Chat app

Oke ini adalah case yang sudah lama ketika saya sedang browsing-browsing aplikasi chat, yaitu bagaimana kita merubah view keyboard kita ke view sticker atau gif seperti Whatsapp dan aplikasi lainya.

Well, sudah lama saya penasaran tetapi sekedar penasaran dan belum coba browsing-browsing bagaimana implementasi nya. Satu-satunya yang terpikir adalah menambahkan view diatas keyboard atau membuat custom keyboard sendiri, tapi ternyata setelah coba-coba implement saya sadar bahwa user experience yang terjadi sangat berbeda dengan yang ada di Whatsapp, Telegram dan aplikasi chat lainya.

Sore kemarin karena saya sedang gabut, saya coba browsing-browsing lagi dan baru sadar kalo pernah implement inputView pada UITextField yang secara experience menggantikan keyboard view dengan UIPickerView atau UIDatePicker.

Nah …sudah ketemu bagaimana kita menampilkan custom view nya ketika keyboard aktif. Sekarang bagaimana kita mengaktifkan atau mendeaktifkan Keyboard atau CustomView yang kita punya.

Skip-skip-skip akhirnya nemu method reloadInputViews() di UITextfield yang bisa mengubah inputView dari custom view ke keyboard atau sebaliknya. Oke waktunya implementasi.

Untuk implementasi tidak beda jauh dengan waktu kita membuat view untuk chat app, temen-temen bisa cari sendiri sudah banyak tutorial yang dibuat oleh senior-senior iOS engineer.

Alat dan Bahan

override var canBecomeFirstResponder: Bool { return true }

override var inputAccessoryView: UIView? {
    get {
        return containerView
    }
}

@objc
private func stickerTapped(_ sender: UIButton) {
    if textField.inputView != nil {
        textField.inputView = nil
    } else {
        textField.inputView = stickerView
    }
    textField.reloadInputViews()
}

func stickerTapped(_ sender: UIButton) method yang kita gunakan untuk aktif dan menonaktifkan keyboard dan sticker view.

Source Code

alfian0/StickerView

Related Article

Building a Message Sticker App Extension in Xcode 8