項目中用到了圓形驗證碼輸入框,輸入框之間要求有一定的距離,UI圖如下:
UI圖
- 上面的UI圖主要有以下幾個要求:
- 輸入框為圓形
- 輸入框之間有適當距離
- 輸入框顏色在輸入文本時有變化
剛開始想著用固定的幾個 UITextField 實現,但轉念一想,用 UITextField 實現有點麻煩(輸入框多的話,它們之間的響應事件不太容易控制,需要來回變換),于是開始想其它辦法,最后用了以下的思路:
- 創建一個 UITextField,用 UILabel 顯示 UITextField 上輸入的數字,需要監聽文本的輸入,同時對 UILabel 進行一些操作,再用 block 將輸入的文本傳出來。
封裝的圓形輸入框主要實現了以下功能:輸入框的數量、距離、顏色、大小等都可以自行設定,用起來也很方便,只需以下幾行代碼即可:
NNValidationCodeView *view = [[NNValidationCodeView alloc] initWithFrame:CGRectMake(80, 100, 300, 45) andLabelCount:4 andLabelDistance:10];
[self.view addSubview:view];
view.changedColor = [UIColor yellowColor];
view.codeBlock = ^(NSString *codeString) {
NSLog(@"驗證碼:%@", codeString);
};
這是 demo 的效果圖:
效果圖1
效果圖2
由于代碼很容易看懂,另外代碼中也寫了注釋,因此這里不再對項目做過多的陳述,這是 demo地址,需要的話可以拿去借鑒,有什么不足之處希望能留下寶貴意見或建議!