在工作之余开始自学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即可。

到此就完成了各个键盘按钮的约束条件。

说明：本来设计时是点击“数字”按钮时，数字键盘会重新生成随机数，但是这里操作体验不好，因为能够明显看到数字重新生成的过程，故我将其处理成只要“字符”或“符号”按钮是处于选中状态，就让程序在“后台”默默地调用一次生成随机数方法，这样用户体验可能会更好。

其他功能的实现在此不再描述，代码里都有注释，任何问题欢迎留言。

已知缺陷：第一次点击空格按钮，按钮背景色不会变灰。

gitHub地址