開發(fā)需求中有時候我們需要用于安全支付的功能, 需要設(shè)置APP錢包的支付密碼, 頁面是仿照京東的6位輸入框的的做法, 效果如下圖:
看起來是有由6個UITextField組成, 其實(shí)并不是，這只是一個假象.
實(shí)現(xiàn)思路:
- 創(chuàng)建一個UITextField暇藏，僅僅一個而不是六個! 然后用5根豎線進(jìn)行分割蹂随，這樣我們看到的就是一個有6個等同輸入框的視圖.
- 創(chuàng)建黑點(diǎn)可以通過創(chuàng)建一個正方形的UIView够话，設(shè)置圓角為寬高的一半担汤，就是一個圓了壤巷，使其 frame 顯示在中間則黑點(diǎn)居中即可.
- 當(dāng)點(diǎn)擊輸入時候使用shouldChangeCharactersInRange 方法來用來輸入的 textfield 做處理, 是否成為第一響應(yīng)者,用來用戶輸入, 監(jiān)聽其值的改變.
- 當(dāng)密碼的長度達(dá)到需要的長度時,關(guān)閉第一響應(yīng)者. 這里可以使用 block 來傳遞 password 的值.
- 提供一個清除 password 的方法
現(xiàn)在核心代碼如下:
先抽出加密支付頁面 ZLSafetyPswView, 在.m中主要就是實(shí)現(xiàn)頁面的效果：
#define kDotSize CGSizeMake (10, 10) // 密碼點(diǎn)的大小
#define kDotCount 6 // 密碼個數(shù)
#define K_Field_Height self.frame.size.height // 每一個輸入框的高度等于當(dāng)前view的高度
@interface ZLSafetyPswView () <UITextFieldDelegate>
// 密碼輸入文本框
@property (nonatomic, strong) UITextField *pswTextField;
// 用于存放加密黑色點(diǎn)
@property (nonatomic, strong) NSMutableArray *dotArr;
@end
創(chuàng)建分割線和黑點(diǎn).
#pragma mark - 懶加載
- (NSMutableArray *)dotArr {
if (!_dotArr) {
_dotArr = [NSMutableArray array];
}
return _dotArr;
}
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor whiteColor];
[self setupWithPswTextField];
}
return self;
}
- (void)setupWithPswTextField {
// 每個密碼輸入框的寬度
CGFloat width = self.frame.size.width / kDotCount;
// 生成分割線
for (int i = 0; i < kDotCount - 1; i++) {
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetMinX(self.pswTextField.frame) + (i + 1) * width, 0, 1, K_Field_Height)];
lineView.backgroundColor = [UIColor grayColor];
[self addSubview:lineView];
}
self.dotArr = [[NSMutableArray alloc] init];
// 生成中間的黑點(diǎn)
for (int i = 0; i < kDotCount; i++) {
UIView *dotView = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetMinX(self.pswTextField.frame) + (width - kDotCount) / 2 + i * width, CGRectGetMinY(self.pswTextField.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 addSubview:dotView];
// 把創(chuàng)建的黑色點(diǎn)加入到存放數(shù)組中
[self.dotArr addObject:dotView];
}
}
創(chuàng)建一個UITextField.切記輸入的文字顏色和輸入框光標(biāo)的顏色為透明!
#pragma mark - init
- (UITextField *)pswTextField {
if (!_pswTextField) {
_pswTextField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, K_Field_Height)];
_pswTextField.backgroundColor = [UIColor clearColor];
// 輸入的文字顏色為無色
_pswTextField.textColor = [UIColor clearColor];
// 輸入框光標(biāo)的顏色為無色
_pswTextField.tintColor = [UIColor clearColor];
_pswTextField.delegate = self;
_pswTextField.autocapitalizationType = UITextAutocapitalizationTypeNone;
_pswTextField.keyboardType = UIKeyboardTypeNumberPad;
_pswTextField.layer.borderColor = [[UIColor grayColor] CGColor];
_pswTextField.layer.borderWidth = 1;
[_pswTextField addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged];
[self addSubview:_pswTextField];
}
return _pswTextField;
}
文本框內(nèi)容改變時,用來用戶輸入, 監(jiān)聽其值的改變.
#pragma mark - 文本框內(nèi)容改變
/**
* 重置顯示的點(diǎn)
*/
- (void)textFieldDidChange:(UITextField *)textField {
NSLog(@"目前輸入顯示----%@", textField.text);
for (UIView *dotView in self.dotArr) {
dotView.hidden = YES;
}
for (int i = 0; i < textField.text.length; i++) {
((UIView *)[self.dotArr objectAtIndex:i]).hidden = NO;
}
if (textField.text.length == kDotCount) {
NSLog(@"---輸入完畢---");
[self.pswTextField resignFirstResponder];
}
// 獲取用戶輸入密碼
!self.passwordDidChangeBlock ? : self.passwordDidChangeBlock(textField.text);
}
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
NSLog(@"輸入變化%@", string);
if([string isEqualToString:@"\n"]) { // 按回車關(guā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;
}
}
清除密碼時收起鍵盤并將文本輸入框值置為空.
#pragma mark - publick method
/**
* 清除密碼
*/
- (void)clearUpPassword {
[self.pswTextField resignFirstResponder];
self.pswTextField.text = nil;
[self textFieldDidChange:self.pswTextField];
}
接著在當(dāng)前所需控制器里,創(chuàng)建支付頁面并拿到用戶輸入密碼去做支付相關(guān)邏輯處理
// 加密支付頁面
ZLSafetyPswView *pswView = [[ZLSafetyPswView alloc] initWithFrame:CGRectMake(50, 100, self.view.frame.size.width - 100, 45)];
[self.view addSubview:pswView];
self.pswView = pswView;
pswView.passwordDidChangeBlock = ^(NSString *password) {
NSLog(@"---用戶輸入密碼為: %@",password);
};
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.backgroundColor = [UIColor orangeColor];
button.frame = CGRectMake(100, 280, self.view.frame.size.width - 200, 50);
[button addTarget:self action:@selector(clearPsw) forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"清空密碼" forState:UIControlStateNormal];
[self.view addSubview:button];
方便測試加上清空密碼按鈕
// 清空密碼
- (void)clearPsw {
[self.pswView clearUpPassword];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self.view endEditing:YES];
}
我這里是做6位支付密碼的, 你同樣可以修改kDotCount密碼個數(shù)值,目前也有4位的.
