keyInput实践:实现一个iOS网格密码输入框

项目GitHub地址

先来两张效果图

<img src="http://upload-images.jianshu.io/upload_images/624048-192086ff8ed6f774.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="10%">

多行+紧贴+边框+圆角

开始

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

一个输入框

当时觉得挺眼熟的,很多支付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;
}
  • 推荐使用带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



2017.5.15 更新

增加长按复制黏贴的功能

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容