先來(lái)兩張效果圖
<img src="http://upload-images.jianshu.io/upload_images/624048-192086ff8ed6f774.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="10%">
開(kāi)始
前幾天朋友問(wèn)我,怎么實(shí)現(xiàn)一個(gè)輸入框的效果，設(shè)計(jì)圖就是下面這張：
當(dāng)時(shí)覺(jué)得挺眼熟的，很多支付APP的支付密碼就是這樣輸入的张遭。
如果總結(jié)下，就是當(dāng)你輸入比較少的內(nèi)容，而又希望整體比較美觀的話商虐，就會(huì)這樣做，因?yàn)橄到y(tǒng)的UITextField會(huì)把內(nèi)容擠在一起崖疤。
然后我就來(lái)了興致秘车，準(zhǔn)備認(rèn)真封裝下，寫(xiě)一個(gè)對(duì)于這類輸入框的通用控件劫哼。所以就有了TFGridInputView
目前的功能
可以像系統(tǒng)輸入控件那樣點(diǎn)擊彈出鍵盤(pán)輸入叮趴，通過(guò)
resignFirstResponder來(lái)取消輸入。可以像系統(tǒng)控件那樣通過(guò)
text屬性獲取或設(shè)置文字权烧。具有密碼輸入功能眯亦，即不顯示明文
支持邊框和圓角
-
每個(gè)小框（cell）顯示一個(gè)字符，可以設(shè)置它的顯示樣式：
- 文字顏色和字體
- 背景色或背景圖片
-
可以給小框的不同狀態(tài)設(shè)置不同的樣式般码，現(xiàn)在有:
- empty: 沒(méi)有內(nèi)容時(shí)
- fill: 填充了內(nèi)容時(shí)
- highlight: 下一個(gè)要被輸入的cell會(huì)被認(rèn)為是highlight狀態(tài)妻率，類似于光標(biāo)的作用。
如果設(shè)置了不同的樣式板祝，那么在輸入的時(shí)候宫静，可以直觀的看到那些事輸入的、那些是沒(méi)輸入的券时，輸入位置也會(huì)比較醒目囊嘉。當(dāng)然這都是可以自由定義的，如果你不需要革为，可以把三種狀態(tài)設(shè)為一樣扭粱。
- 輸入框的樣式也有區(qū)別，目前有兩種：
- 一種就是每個(gè)cell是分開(kāi)的震檩，就像上面朋友給的需求那樣琢蛤。
- 還一種是類似支付寶輸入支付密碼的樣式蜓堕，即一連串的緊貼的格子，如圖博其。
使用
在項(xiàng)目代碼里有詳細(xì)的各種例子套才，歡迎直接看代碼。這里給出一個(gè)簡(jiǎn)單示例：
//構(gòu)建一個(gè)輸入框
_inputView = [[TFGridInputView alloc] initWithFrame:CGRectMake(30, 120, 100, 200) row:3 column:6];
//構(gòu)建一個(gè)樣式慕淡，并調(diào)整各種格式
TFGridInputViewCellStyle *style = [[TFGridInputViewCellStyle alloc] init];
style.backColor = [UIColor colorWithWhite:0.9 alpha:1];
style.textColor = [UIColor colorWithWhite:0.1 alpha:1];
//如果各個(gè)狀態(tài)樣式一致背伴，可以只設(shè)置empty狀態(tài)，它會(huì)作為缺省值使用
[_inputView setStyle:style forState:(TFGridInputViewCellStateEmpty)];
[self.view addSubview:_inputView];
//設(shè)置邊框和圓角
_inputView.DIVBorderColor = [UIColor lightGrayColor];
_inputView.DIVBorderWidth = 0.5;
//設(shè)置圓角
_inputView.DIVCornerRadius = 5;
//設(shè)置布局樣式
_inputView.layoutStyle = TFGridInputViewLayoutStyleNoGap;
}
- 推薦使用帶row峰髓、column的init方法構(gòu)建傻寂，這樣可以在初始化時(shí)候就把cell確定好，避免重復(fù)構(gòu)建携兵。
- 設(shè)置cell的各種狀態(tài)需要的樣式疾掰，如果你每種狀態(tài)樣式一直，就只需要設(shè)置empty狀態(tài)即可徐紧。
- 如果你還需要邊框或圓角静檬，也可以繼續(xù)設(shè)置。
然后就可以使用了并级，大多數(shù)的工作都是在配置樣式拂檩。
關(guān)于布局規(guī)則
構(gòu)建了一個(gè)TFGridInputView對(duì)象后，給了一個(gè)frame嘲碧，但是可能cell的寬度加上cell之間的間隙會(huì)超過(guò)frame广恢，比如寬度100，然后一行5個(gè)cell,cell寬度30呀潭，這樣cell本身就占據(jù)了150的寬度了钉迷。
對(duì)于這種情況我的處理是：
cell的大小不變，cell之間間隙使用最小值钠署，然后反過(guò)來(lái)調(diào)整父視圖的frame
比如上面的情況糠聪，如果間隙是8，那么父視圖的寬度會(huì)被擴(kuò)充為：
305 + 8(5+1) = 198谐鼎。
這么做是因?yàn)椋?/p>
- 如果你使用的時(shí)候設(shè)置不正確舰蟆，那么我會(huì)幫你調(diào)整回來(lái)，只要你的cell大小和最小間隙是你需求的那樣
- 如果你想自己控制狸棍，那么就可以先計(jì)算好身害，把正確的cell大小和間隙傳遞過(guò)來(lái)，這樣就不會(huì)發(fā)生父視圖的frame不夠的問(wèn)題草戈，我這邊就不會(huì)修改你原本的frame了塌鸯。
- 在調(diào)整父視圖的frame后，發(fā)出通知
TFGridInputViewLayoutNotification唐片，以便使用它的部分可以匹配修改
這樣既有自由度丙猬，也不會(huì)麻煩涨颜。需要的人需要，不需要的人不需要茧球。
歡迎使用庭瑰，歡迎star
2017.5.15 更新
增加長(zhǎng)按復(fù)制黏貼的功能
