iOS 8 Custom Keyboard

Question

I am trying to build a custom keyboard, it's like a emoji keyboard, but the keyboard's data is from a json file. After parse this json file and get the data, how to make the custom keyboard use it and show in the keyboard view, like the emoji keyboard that built in? Right now, I follow App Extension Keyboard: Custom Keyboard guide, and there only small bits of information here. Is there any tutorial or guide about how to create a custom emoji keyboard online? The current codes I am trying are below:

class KeyboardViewController: UIInputViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        var error: NSError?
        let yanFile = NSBundle.mainBundle().pathForResource("yan", ofType: "json")
        let yanData = NSData(contentsOfFile: yanFile) as NSData
        let yanDict = NSJSONSerialization.JSONObjectWithData(yanData, options: NSJSONReadingOptions.MutableContainers, error: &error) as NSDictionary
        println("dict: \(yanDict)") //print nothing in console

        // Perform custom UI setup here
        self.nextKeyboardButton = UIButton.buttonWithType(.System) as UIButton

        self.nextKeyboardButton.setTitle(NSLocalizedString("Next Keyboard", comment: "Title for 'Next Keyboard' button"), forState: .Normal)

    }
}

The json like below:

{
    "list": 
    [
        {
            "tag": "laugh",
            "yan": 
            [
                "o(*≧▽≦)ツ┏━┓",
                "(/≥▽≤/)",
                "ヾ(o◕∀◕)ﾉ"
            ]
        },
        {
            "tag": "wanna",
            "yan": 
            [
                "✪ω✪",
                "╰(*°▽°*)╯",
                "≖‿≖✧",
                ">ㅂ<",
                "ˋ▽ˊ",
                "✪ε✪",
                "✪υ✪",
                "ヾ (o ° ω ° O ) ノ゙",
                "(｡◕ˇ∀ˇ◕）",
                "（¯﹃¯）"
            ]
        }
    ]
}

Just you have to follow extension guide line. It is also like you are working with UIVIewController so think like that and set up your UI. First Fetch your data from server, parse that and create your UI and i would suggest remove self.nextKeyboardButton or hide use your button to switch keyboard. — Ravee10, Jun 21 '14 at 11:48
@Ravee10 Like that part of code that I pare the json file? But it seems not working. — yong ho, Jun 21 '14 at 13:09
..Please keep in mind extension is not like application..it does not have nsrunloop and UIAplication running all the time to listen network response so use static data in that. — Ravee10, Jun 22 '14 at 06:54
Here is a good tutorial: http://verisage.us/blog/2014/07/17/ios-8-custom-keyboard-swift-tutorial/ — Spentak, Jul 19 '14 at 03:57

score 12 · Accepted Answer · edited May 23 '17 at 10:28

12

You can build a xib file by clicking new file -> view

1) inside the xib file create a uiview 320x216 and you can drag'n'drop whatever controls you want into it

2) then you can load the nib like this into your keyboard's inputView:

// Perform custom UI setup here
UIView *layout = [[[NSBundle mainBundle] loadNibNamed:@"keyboardXib" owner:self options:nil] objectAtIndex:0];
[self.inputView addSubview:layout];

3) i think it's amazing if you build a JSON to keyboard api you send a JSON of the keyboard map to your app and the app knows how to arrange the keys on the inputView accordingly

let us know if you build this project!

EDIT:

4) Most of what you need to do is parse the JSON and display the content you want from the JSON uibuttons, and also decide what text they are inserting into the text field

check out this question: How to parse a JSON file in swift?

Good luck!

edited May 23 '17 at 10:28

Community

1
1

answered Jun 29 '14 at 21:41

nurnachman

4,468
2
37
40

I get it. But what I am asking is why parse the json part don't work? – yong ho Jun 30 '14 at 02:59
@yongho - can you post the JSON? – nurnachman Jun 30 '14 at 08:06
@yongho - did i answer your question? :D – nurnachman Jul 06 '14 at 13:11

score 3 · Answer 2 · answered Jun 23 '14 at 12:24

First of all you need to create your UI for keyboard in your KeyboardViewController. It's up to you how you customize it, add buttons, views, gestures etc.. (By the way height of view is limited, to standard keyboard height size, so don't try to make it higher it won't draw) Template that is generated it's just sample to show how you can put a single button in it. After you setup your UI make sure you have Next Keyboard Button it's required.

Regarding Emoji, it's not real images, they are just unicode characters that later replaced with images by system. So you can't pass images, the only input that you can provide is NSString [self.textDocumentProxy insertText:@"hello "]; // Inserts the string "hello " at the insertion point

More details can be found here https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/ExtensibilityPG/Keyboard.html.

My keyboard was rejected by Apple for this reason : ----- 25.6 ----- We found that your keyboard extension does not include Number and Decimal types, which does not comply with the App Store Review Guidelines. Specifically, lack of Number and Decimal keyboards limits the range of tasks users can perform, which could create a poor user experience. ---------------- Do you have any idea how I can add another view in my custom keyboard to provide this ? Or another way to be OK with the guidelines ? Thanks a lot ! — ababab5, Oct 08 '14 at 08:35

iOS 8 Custom Keyboard

2 Answers2

Linked