在工作之余开始自学iOS开发，接触`textField`控件时发现能够自定义键盘，于是开始仿写ICBC的安全登录键盘。起初并没有按照MVC的模式进行，在`mainStoryboard`里自定义了4个View，分别是inputAccessoryView、inputCharView（字母键盘）、inputNumberView（数字键盘）和inputSignView（符号键盘）。
设置```pwdTextField.inputAccessoryView=self.inputAccessoryView```，pwdTextField.inputView通过点击`inputAccessoryView`上的键盘类型按钮（数字、字符和符号）进行切换。存在的一个问题：每次点击“类型按钮”后都得先让`pwdTextField`放弃第一响应者，然后设置`pwdTextField`的`inputAccessoryView`和`inputView`，再让`pwdTextField`成为第一响应者。虽然这样也能够实现键盘功能，但是觉得这样做太low。
注：pwdTextField是密码输入框。
目前已实现的功能有：
◉数字键盘使用随机数字
◉记住用户名，登录时省去重新输入用户名之繁琐
◉点击头像，放大显示
◉点击头像编辑按钮，可以从相机或相册选择照片并加以保存
◉自定义Alert弹出框
◉明暗文密码切换
◉textField placeholder左右抖动
◉按下字母、符号按键，文字放大显示动画
◉密码框重新成为第一响应者时，键盘恢复成小写字符键盘
键盘演示示意图
今年5月初的时候想将之前写的安全键盘按照MVC的模式重新整理下，在梳理的过程中突然有个想法——通过点击键盘类型按钮来改变`inputCharView.leading`约束值来切换不同类型键盘。具体布局示意如下：
布局示意
约束条件如下：
约束条件
约束示意图
将`blueView.leading`通过`IBOutlet`的方式设置成NSLayoutConstraint *leftConstraint，点击红色按钮时设置`leftConstraint.constant=kScreenWidth`(屏宽)，点击蓝色按钮`leftConstraint.constant=0`，点击黄色按钮`leftConstraint.constant= - kScreenWidth`。
这里遇到一个小坑：设置blueView约束条件时，起初设置`blueView.trailing=0`，点击类型按钮时一直不能切换到与之类型相对应的键盘View。将`blueView.trailing=0`修改为`blueView`与其父视图等宽即可。
字符键盘约束设置
接下来设置键盘上各个按钮的约束条件，先从相对复杂的字符键盘按钮开始。我的想法是每个按钮的宽、高设为定值，分别为30和42，按钮q距离父视图左边=0，p距离父视图右边为0，第一排各个按钮top=8，各个按钮之间的间距等宽（`Equal widths`）。设置按钮间等间距且要适应不同屏幕尺寸适配问题，我采用了一些辅助UIView进行约束设置。完成设置时将辅助的View背景色设置为透明即可。
具体步骤：
1，设置按钮q的约束条件：宽=30，高=42，上=8，左=10；
按钮q的约束条件
2，分别设置w,e,r……o,p按钮与按钮q之间的约束：等宽、等高、水平居中；
按住键盘上的Control键的同时左键鼠标选中w按钮并将其拖至按钮q上，松开鼠标按键和Control键。此时按住键盘上的shift按键依次点击“Center Vertically”,"Equal widths"和“Equal Heights”按钮，最后点击“Add Constraints”按钮。第一排的其他按钮约束条件的设置步骤同w按钮。
等宽，等高，等水平
3，设置p的约束：右=10，上=8；
4，接下来设置按钮等间距，拖拉UIView并将其放置在各个按钮中间，方便看清View将其背景色设置为红色；
添加辅助View
5，分别对添加的View设定约束(相对于左侧按钮)为水平居中、等高，另外设置View距离左右两边的按钮约束均为0；
o与p之间的View的约束
6，选中所有辅助的View，设置等宽（Equal Widths）即可完成第一排按钮的约束；
7，第二排按钮约束：a按钮左=30，上=10；I按钮右=30，上=10。其他约束条件可参考第一排按钮进行设置；
8，第三排按钮约束：shift按钮.leading=q.leading，shift按钮.trailing=a.trailing，top=10，shift按钮与q等高；z 按钮.leading=s.leading，z按钮.trailing=s.trailing，top=10，z与s等宽，其他按钮类似方式设置即可；
9，第四排按钮约束：空格按钮.leading=shift按钮.leading，空格.trailing=n.trailing，空格.top=10，空格按钮与shift按钮等高；登录按钮类似设置。
注：1，符号键盘按钮的约束条件与字符键盘按钮约束设置方法类似，此处不再赘述；
2，在xib里我是将3个键盘View放在一个inputView下，原因是方便在控制器里设置self.pwdTextField.inputView=self.keyboardView.inputView。我自己在设计之初是想将inputView和inputAccessoryView作为一个整体赋值给pwdTextField的inputView，但是这样一来键盘显示不全，只能显示216的高度。
数字键盘按钮约束设置
要求设置数字按钮四周的间距为10（第一排按钮top设置为8），高度为42，同一排按钮等宽。
1，选中按钮1，2和3，设置左=10，上=8，右=10，高=42以及等宽，点击“Add 12 Constraints”按钮，更新约束：
约束条件设置
2，设置按钮4的左=10，上=10，右=10，按钮4与按钮1等宽、等高；按钮5和6的左、右、上都为10，分别设置按钮5、按钮6与按钮4等宽等高；
3，第三排和第四排按钮的约束条件设置方法参考步骤2即可。
到此就完成了各个键盘按钮的约束条件。
说明：本来设计时是点击“数字”按钮时，数字键盘会重新生成随机数，但是这里操作体验不好，因为能够明显看到数字重新生成的过程，故我将其处理成只要“字符”或“符号”按钮是处于选中状态，就让程序在“后台”默默地调用一次生成随机数方法，这样用户体验可能会更好。
其他功能的实现在此不再描述，代码里都有注释，任何问题欢迎留言。
已知缺陷：第一次点击空格按钮，按钮背景色不会变灰。
网友评论