输入框的自定义键盘

DamonHu

2019 年 07 月 16 日

3430 次浏览

暂无评论

2918字数

iOS开发

下午在写一个颜色转换的demo，大家知道RGB颜色范围也就是0~255，16进制的颜色组成就是0~9，A~F，RGB颜色使用系统自带的数字键盘即可，但是16进制如果使用系统键盘会多出很多不必要的字符，所以就思考去使用自定义键盘。

效果演示和demo

16进制颜色键盘输入和RGB颜色输入效果演示可以看下面这张gif图片

GitHub地址:https://github.com/DamonHu/HudongBlogDemo/tree/master/KeyboardTest

实现原理

自定义键盘实现起来很简单，因为textField和textView都有一个inputView显示键盘。所以可以新创建一个view，在该view上面布局键盘之后通过按钮点击即可。

//键盘类型
enum ColorBoardType {
    case number    //RGB颜色输入
    case hexNumber    //16进制颜色输入
}

键盘内容布局

func p_createUI(boardType:ColorBoardType) -> Void {
        self.backgroundColor = UIColorFromRGB(rgbValue: 0x7fa99b)
        var hexNumberList:[[String]]
        switch boardType {
        case .number:
            hexNumberList = [["1","2","3"],["4","5","6"],["7","8","9"],["","0","删除"]]
        case .hexNumber:
            hexNumberList = [["0","1","2","3","4"],["5","6","7","8","9"],["A","B","C","D","E"],["#","F","删除"]]
        }
        
        var stackViewList = [UIStackView]()
        for numberList in hexNumberList {
            //每个按钮的布局
            let stackView = UIStackView(frame: CGRect.zero)
            stackView.axis = NSLayoutConstraint.Axis.horizontal
            stackView.distribution = UIStackView.Distribution.fillEqually
            stackView.spacing = 1
            stackView.alignment = UIStackView.Alignment.fill
            for number in numberList {
                let button = UIButton(type: UIButton.ButtonType.custom)
                button.setTitle(number, for: UIControl.State.normal)
                button.backgroundColor = UIColorFromRGB(rgbValue: 0x394a51)
                button.addTarget(self, action: #selector(p_buttonDidClicked(sender:)), for: UIControl.Event.touchUpInside)
                stackView.addArrangedSubview(button)
            }
            stackViewList.append(stackView)
        }
        
        let stackView = UIStackView(arrangedSubviews: stackViewList)
        stackView.axis = NSLayoutConstraint.Axis.vertical
        stackView.distribution = UIStackView.Distribution.fillEqually
        stackView.spacing = 1
        stackView.alignment = UIStackView.Alignment.fill
        
        self.addSubview(stackView)
        stackView.snp.makeConstraints { (make) in
            make.edges.equalToSuperview()
        }
    }

按钮的点击响应可以分为点击了删除之类的功能键和内容键，可以通过按钮的文字、tag之类的区分，然后响应不同的回调。在添加输入框的地方去响应回调，处理输入框的字符串

protocol ColorKeyBoardProtocol {
    ///点击了删除
    func keyBoardItemDidClickDelete(_ keyBoard:ColorKeyBoardView)
    
    /// 点击了内容按钮
    ///
    /// - Parameter text: 点击了键盘的内容
    func keyBoardItemDidClicked(_ keyBoard:ColorKeyBoardView,_ text:String)
}

因为这个只针对某个输入框进行自定义键盘的操作，所以实现起来还是很简单的。如果是全局的，可以看看有空做一个类似于搜狗的全局的自定义键盘。如果是某个页面的，可以使用该方案