iOS自定义键盘实战

iOS自定义键盘实战

0x01 来龙去脉

github代码下载 地址

在iOS8之前,iOS系统的输入法只能使用苹果官方提供的输入法。
对于中文来说,官方的输入法并不好用,或者说不够好用,词库,联想,云输入等都没有或者和搜狗输入法,百度输入法等有中国特色的输入法相比有一定的差距。
部分用户因为输入法的原因,选择了安卓等其他系统,或者选择了越狱。
iOS自定义键盘是iOS8系统新推出的功能,允许开发者开发第三方键盘。众人拾柴火焰高,功能的开放,为iOS用户体验的提示必然带来更大的推动。

0x02 输入法的基本结构

输入法的基本结构

输入法的项目可以使用普通的project模版,但是需要增加一个自定义键盘的Target,所有的人机交互,都在项目生成的UIInputViewController一个子类里实现。关键的要素如下:

  • 一个Xcode的Project
  • 一个自定义键盘的Target
  • 一个UIInputViewController的子类
  • 必须提供一个明显的切换到其他输入法的按钮

0x03 功能需求描述

  1. 键盘上提供一个按钮,点击之后输入“一支红杏出墙来”

0x04 交互序列

交互序列

0x05 实现

0x0501. 建立一个单视图的project

创建project

0x0502. 增加一个自定义键盘的target(Custom Keyboard)

创建键盘target

添加之后,会看到有一个文件:KeyboardViewController,这是我们的主战场

A1B535C54EB087327FFD1536F79556FF.png

0x0503. 编辑代码

代码的内容很简单,创建两个按钮,一个点击之后,切换输入法,一个点击之后,向当前输入控件里添加”一枝红杏出墙来"

//
//  KeyboardViewController.swift
//  keyboard
//
//  Created by qi on 15/12/3.
//  Copyright © 2015年 im.windgo. All rights reserved.
//

import UIKit

class KeyboardViewController: UIInputViewController {

    @IBOutlet var nextKeyboardButton: UIButton! //切换输入法
    @IBOutlet var yizhihongxingButton: UIButton! //输入一支红杏出墙来的按钮
    override func updateViewConstraints() {
        super.updateViewConstraints()
    
        // Add custom view sizing constraints here
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    
        // Perform custom UI setup here
        
        //创建切换到另一个键盘的按钮
        self.nextKeyboardButton = UIButton(type: .System)
        self.nextKeyboardButton.setTitle(NSLocalizedString("切换键盘", comment: "切换到下一个键盘的按钮"), forState: .Normal)
        self.nextKeyboardButton.sizeToFit()
        self.nextKeyboardButton.translatesAutoresizingMaskIntoConstraints = false
        self.nextKeyboardButton.addTarget(self, action: "advanceToNextInputMode", forControlEvents: .TouchUpInside)
        self.view.addSubview(self.nextKeyboardButton)
        
        let nextKeyboardButtonLeftSideConstraint = NSLayoutConstraint(item: self.nextKeyboardButton, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1.0, constant: 0.0)
        let nextKeyboardButtonBottomConstraint = NSLayoutConstraint(item: self.nextKeyboardButton, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
        self.view.addConstraints([nextKeyboardButtonLeftSideConstraint, nextKeyboardButtonBottomConstraint])
        
        
        yizhihongxingButton=UIButton()
        yizhihongxingButton.backgroundColor=UIColor.magentaColor()
        yizhihongxingButton.setTitle("一支红杏出墙来!", forState: UIControlState.Normal)
        yizhihongxingButton.frame=CGRectMake(0, 40, UIScreen.mainScreen().bounds.width, 100)
        yizhihongxingButton.addTarget(self, action: "onInputText", forControlEvents: UIControlEvents.TouchUpInside)
        self.view.addSubview(yizhihongxingButton)
        

    }
    

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated
    }

    override func textWillChange(textInput: UITextInput?) {
        // The app is about to change the document's contents. Perform any preparation here.
    }

    override func textDidChange(textInput: UITextInput?) {
        // The app has just changed the document's contents, the document context has been updated.
    
        var textColor: UIColor
        let proxy = self.textDocumentProxy
        if proxy.keyboardAppearance == UIKeyboardAppearance.Dark {
            textColor = UIColor.whiteColor()
        } else {
            textColor = UIColor.blackColor()
        }
        self.nextKeyboardButton.setTitleColor(textColor, forState: .Normal)
    }
    
    func onInputText(){
        self.textDocumentProxy.insertText("一支红杏出墙来!")
    }


0x05004. 运行代码

  • 选择运行的target


    运行键盘
  • 执行会让你选择在哪个应用里使用键盘,选择Safari浏览器就可以了


    选择使用输入法的app
  • 选择地址栏,进入输入状态,可以看到键盘,点击会输入“一支红杏出墙来!”

最终运行效果

注意:如果看不到键盘,可以切换下输入法,如果输入法里面没有,需要到“设置”里面将键盘加入。

更深入的技术细节:英文好的可以看官方文档
喜欢看中文的可以看翻译官方文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容