byczd / tfgridinputview

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;
}

• 推荐使用带row、column的init方法构建，这样可以在初始化时候就把cell确定好，避免重复构建。
• 设置cell的各种状态需要的样式，如果你每种状态样式一直，就只需要设置empty状态即可。
• 如果你还需要边框或圆角，也可以继续设置。

然后就可以使用了，大多数的工作都是在配置样式。

关于布局规则

构建了一个TFGridInputView对象后，给了一个frame，但是可能cell的宽度加上cell之间的间隙会超过frame，比如宽度100，然后一行5个cell,cell宽度30，这样cell本身就占据了150的宽度了。

对于这种情况我的处理是： cell的大小不变，cell之间间隙使用最小值，然后反过来调整父视图的frame

比如上面的情况，如果间隙是8，那么父视图的宽度会被扩充为： 305 + 8(5+1) = 198。

这么做是因为：

• 如果你使用的时候设置不正确，那么我会帮你调整回来，只要你的cell大小和最小间隙是你需求的那样
• 如果你想自己控制，那么就可以先计算好，把正确的cell大小和间隙传递过来，这样就不会发生父视图的frame不够的问题，我这边就不会修改你原本的frame了。
• 在调整父视图的frame后，发出通知TFGridInputViewLayoutNotification，以便使用它的部分可以匹配修改

这样既有自由度，也不会麻烦。需要的人需要，不需要的人不需要。

欢迎使用，欢迎star