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

效果演示和demo

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

1.gif

1.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) }

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


☟☟可点击下方广告支持一下☟☟

最后修改:2019 年 07 月 18 日
请我喝杯可乐,请随意打赏: ☞已打赏列表