keyInput实践：实现一个iOS网格密码输入框-CSDN博客

项目GitHub地址

先来两张效果图

开始

前几天朋友问我,怎么实现一个输入框的效果，设计图就是下面这张：

当时觉得挺眼熟的，很多支付APP的支付密码就是这样输入的。

如果总结下，就是当你输入比较少的内容，而又希望整体比较美观的话，就会这样做，因为系统的UITextField会把内容挤在一起。

然后我就来了兴致，准备认真封装下，写一个对于这类输入框的通用控件。所以就有了TFGridInputView

目前的功能

可以像系统输入控件那样点击弹出键盘输入，通过resignFirstResponder来取消输入。
可以像系统控件那样通过text属性获取或设置文字。
具有密码输入功能，即不显示明文
支持边框和圆角
每个小框（cell）显示一个字符，可以设置它的显示样式：
- 文字颜色和字体
- 背景色或背景图片
可以给小框的不同状态设置不同的样式，现在有:
- empty: 没有内容时
- fill: 填充了内容时
- highlight: 下一个要被输入的cell会被认为是highlight状态，类似于光标的作用。

如果设置了不同的样式，那么在输入的时候，可以直观的看到那些事输入的、那些是没输入的，输入位置也会比较醒目。当然这都是可以自由定义的，如果你不需要，可以把三种状态设为一样。

输入框的样式也有区别，目前有两种：
- 一种就是每个cell是分开的，就像上面朋友给的需求那样。
- 还一种是类似支付宝输入支付密码的样式，即一连串的紧贴的格子，如图。

使用

在项目代码里有详细的各种例子，欢迎直接看代码。这里给出一个简单示例：

//构建一个输入框
    _inputView = [[TFGridInputView alloc] initWithFrame:CGRectMake(30, 120, 100, 200) row:3 column:6];
    
    //构建一个样式，并调整各种格式
    TFGridInputViewCellStyle *style = [[TFGridInputViewCellStyle alloc] init];
    style.backColor = [UIColor colorWithWhite:0.9 alpha:1];
    style.textColor = [UIColor colorWithWhite:0.1 alpha:1];
    
    //如果各个状态样式一致，可以只设置empty状态，它会作为缺省值使用
    [_inputView setStyle:style forState:(TFGridInputViewCellStateEmpty)];
    
    [self.view addSubview:_inputView];
    
    //设置边框和圆角
    _inputView.DIVBorderColor = [UIColor lightGrayColor];
    _inputView.DIVBorderWidth = 0.5;
    
    //设置圆角
    _inputView.DIVCornerRadius = 5;
    
    //设置布局样式
    _inputView.layoutStyle = TFGridInputViewLayoutStyleNoGap;
}
复制代码