開發(fā)中我們有時候需要用到設置APP錢包的支付密碼鸽粉，用于安全支付的功能斜脂，頁面是仿照微信或者是支付寶的6位輸入框的的做法，就是看上去有6個UITextField触机，每一個都是一樣大小帚戳，這其實是一個假象；
Simulator Screen Shot 2016年5月26日 下午7.51.18.png
我的設計思路是：創(chuàng)建一個UITextField威兜，重點是創(chuàng)建一個哦销斟，然后用5根豎線進行分割，這樣就是讓我們看到了一個有6個一樣的輸入框在那里躺著了椒舵；你說輸入時那個黑點點啊蚂踊，我們可以通過創(chuàng)建一個正方形的UIView，設置圓角為寬高的一半笔宿，就是一個圓了犁钟，具體如何在中間顯示，就是定義這個黑色圓點的frame啊泼橘，讓他顯示在中間涝动，好了，代碼如下：
首先在.h中接收UITextFieldDelegate的代理
#import <UIKit/UIKit.h>
//接收UITextField的代理
@interface SYSafetySetUpController : UIViewController<UITextFieldDelegate>
@end
在.m中炬灭，主要就是實現(xiàn)頁面的效果：
#import "SYSafetySetUpController.h"
#import "Header.h"
#define kDotSize CGSizeMake (10, 10) //密碼點的大小
#define kDotCount 6 //密碼個數(shù)
#define K_Field_Height 45 //每一個輸入框的高度
@interface SYSafetySetUpController ()
@property (nonatomic, strong) UITextField *textField;
@property (nonatomic, strong) NSMutableArray *dotArray; //用于存放黑色的點點
@end
@implementation SYSafetySetUpController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"安全設置";
self.view.backgroundColor = [UIColor sy_tabBarColor];
[self.view addSubview:self.textField];
//頁面出現(xiàn)時讓鍵盤彈出
[self.textField becomeFirstResponder];
[self initPwdTextField];
}
- (void)initPwdTextField
{
//每個密碼輸入框的寬度
CGFloat width = (Screen_Width - 32) / kDotCount;
//生成分割線
for (int i = 0; i < kDotCount - 1; i++) {
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetMinX(self.textField.frame) + (i + 1) * width, CGRectGetMinY(self.textField.frame), 1, K_Field_Height)];
lineView.backgroundColor = [UIColor sy_grayColor];
[self.view addSubview:lineView];
}
self.dotArray = [[NSMutableArray alloc] init];
//生成中間的點
for (int i = 0; i < kDotCount; i++) {
UIView *dotView = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetMinX(self.textField.frame) + (width - kDotCount) / 2 + i * width, CGRectGetMinY(self.textField.frame) + (K_Field_Height - kDotSize.height) / 2, kDotSize.width, kDotSize.height)];
dotView.backgroundColor = [UIColor blackColor];
dotView.layer.cornerRadius = kDotSize.width / 2.0f;
dotView.clipsToBounds = YES;
dotView.hidden = YES; //先隱藏
[self.view addSubview:dotView];
//把創(chuàng)建的黑色點加入到數(shù)組中
[self.dotArray addObject:dotView];
}
}
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
NSLog(@"變化%@", string);
if([string isEqualToString:@"\n"]) {
//按回車關閉鍵盤
[textField resignFirstResponder];
return NO;
} else if(string.length == 0) {
//判斷是不是刪除鍵
return YES;
}
else if(textField.text.length >= kDotCount) {
//輸入的字符個數(shù)大于6醋粟，則無法繼續(xù)輸入，返回NO表示禁止輸入
NSLog(@"輸入的字符個數(shù)大于6，忽略輸入");
return NO;
} else {
return YES;
}
}
/**
* 清除密碼
*/
- (void)clearUpPassword
{
self.textField.text = @"";
[self textFieldDidChange:self.textField];
}
/**
* 重置顯示的點
*/
- (void)textFieldDidChange:(UITextField *)textField
{
NSLog(@"%@", textField.text);
for (UIView *dotView in self.dotArray) {
dotView.hidden = YES;
}
for (int i = 0; i < textField.text.length; i++) {
((UIView *)[self.dotArray objectAtIndex:i]).hidden = NO;
}
if (textField.text.length == kDotCount) {
NSLog(@"輸入完畢");
}
}
#pragma mark - init
- (UITextField *)textField
{
if (!_textField) {
_textField = [[UITextField alloc] initWithFrame:CGRectMake(16, 100, Screen_Width - 32, K_Field_Height)];
_textField.backgroundColor = [UIColor whiteColor];
//輸入的文字顏色為白色
_textField.textColor = [UIColor whiteColor];
//輸入框光標的顏色為白色
_textField.tintColor = [UIColor whiteColor];
_textField.delegate = self;
_textField.autocapitalizationType = UITextAutocapitalizationTypeNone;
_textField.keyboardType = UIKeyboardTypeNumberPad;
_textField.layer.borderColor = [[UIColor sy_grayColor] CGColor];
_textField.layer.borderWidth = 1;
[_textField addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged];
}
return _textField;
}
如果想要更加完美一些米愿，可以禁止UITextField的粘貼復制功能厦凤；在此我提出一個我的方法，創(chuàng)建一個繼承與UITextField的類育苟，在.m中實現(xiàn)下面的方法
/**
* /禁止可被粘貼復制
*/
- (BOOL)canPerformAction:(SEL)action withSender:(id)sender
{
return NO;
}
寫了一個demo较鼓，是經(jīng)過簡單的封裝的，有興趣的可以看看违柏！
GitHub
