objective c - Add Stickers in Custom KeyBoard Extension

Question

I am looking to create a Custom Keyboard for iPhone,iPad. I have successfully integrated Phrases and Emoticons into the Keyboard, But couldn't get any idea how to add stickers in the keyboard.

Anyone knows how to add ?

Thanks.

Answer 1

I recently created a custom keyboard for sending stickers on iPhone. I noticed this question is tagged as Objective-C but I will be responding in Swift since that’s how I did it.

If I am understanding your question correctly, “add stickers in the keyboard” may refer to stickers similar to those on Facebook Messenger or Peach. My personal inspiration came from wanting to create something similar to Kim Kardashian’s KIMOJI app. This custom keyboard extension works by allowing the user to tap on a sticker, copy it, and then paste it into an input field to send.

To begin with, I found this great custom keyboard tutorial on AppCoda: Creating a Custom Keyboard Using iOS 8 App Extension (written in Swift). The tutorial walks you through how to create a new keyboard extension within an app, add a view which holds buttons (or keys), and apply appropriate constraints. However, I found all the details of creating keys less necessary for a sticker keyboard.

Following the tutorial, once you create a basic keyboard with a KeyboardViewController and KeyboardView xib, I added UIButtons. In my case, I added six buttons to correspond to six stickers. The first UIView row and second UIView row both held three buttons each. I applied constraints so that each button was equal height and width (approximately 100 x 100). In Storyboard, I clicked on each button and in the attributes inspector I set the button “image” property to the corresponding sticker image I had in my assets. Also, to determine an appropriate height for my keyboard, I found this helpful resource: iPhone Development 101 - iPhone & iPad Keyboard Sizes.

Note: In order to create stickers you need images of some sort. I drew / designed my own. You could also design them using Adobe Illustrator or an equivalent program.

Once you set the images for each button and run the app, the images may not appear. To fix this, I had to visit my sticker keyboard Target > Build Phases > Copy Bundle Resources to ensure Assets.xcassets was included. Running the app again, the images appeared.

Next, assuming you have created a KeyboardViewController that corresponds to your KeyboardView.xib, you can create a corresponding @IBAction for each button/sticker in the view controller. We want the user to copy the sticker selected to Pasteboard so they can send the stickers. To enable your custom keyboard to access Pasteboard, go into the keyboard extension’s Info.plist file. Under Information Property List > NSExtension > NSExtensionAttributes, change the RequestsOpenAccess property to YES.

Now, the IBAction method you created can assign the appropriate sticker image path to the Pasteboard! This is very generally how my code looked:

@IBAction func stickerPressed(sender: UIButton) {
        let image = UIImage(named: "sticker")
        UIPasteboard.generalPasteboard().image = image
}

When you run and test your app on a device and install it, click the globe icon on the keyboard to switch to your custom keyboard. Tap on a button/sticker, then tap in an input field to paste. In Facebook Messenger, options may appear to “Send Photo” “Edit” or “Cancel.” In Peach or Messages, it will send inline. It just depends on the app.

This process worked for me and I hope it can help someone else out there!