iOS-仿京東6位密碼支付輸入框

概述

用於安全支付的密碼支付輸入框.

詳細

代碼下載：http://www.demodashi.com/demo/10709.html

開發需求中有時候咱們須要用於安全支付的功能, 須要設置APP錢包的支付密碼, 頁面是仿照京東的6位輸入框的的作法, 效果以下圖:

看起來是有由6個UITextField組成, 其實並非，這只是一個假象.

1、實現思路:

 

• 1. 建立一個UITextField，僅僅一個而不是六個! 而後用5根豎線進行分割，這樣咱們看到的就是一個有6個等同輸入框的視圖.

• 2. 建立黑點能夠經過建立一個正方形的UIView，設置圓角爲寬高的一半，就是一個圓了，使其 frame 顯示在中間則黑點居中便可.

• 3. 當點擊輸入時候使用shouldChangeCharactersInRange 方法來用來輸入的 textfield 作處理, 是否成爲第一響應者,用來用戶輸入, 監聽其值的改變.

• 4. 當密碼的長度達到須要的長度時,關閉第一響應者. 這裏可使用 block 來傳遞 password 的值.

• 5. 提供一個清除 password 的方法

2、程序實現

先抽出加密支付頁面 ZLSafetyPswView, 在.m中主要就是實現頁面的效果：

#define kDotSize CGSizeMake (10, 10) // 密碼點的大小
#define kDotCount 6  // 密碼個數
#define K_Field_Height self.frame.size.height  // 每個輸入框的高度等於當前view的高度
@interface ZLSafetyPswView () <UITextFieldDelegate>
// 密碼輸入文本框
@property (nonatomic, strong) UITextField *pswTextField;
// 用於存放加密黑色點
@property (nonatomic, strong) NSMutableArray *dotArr;

建立分割線和黑點.

#pragma mark - 懶加載
- (NSMutableArray *)dotArr {
    if (!_dotArr) {
        _dotArr = [NSMutableArray array];
    }
    return _dotArr;
}

- (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];
    
    // 生成中間的黑點
    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];
        
        // 把建立的黑色點加入到存放數組中
        [self.dotArr addObject:dotView];
    }
}

建立一個UITextField.切記輸入的文字顏色和輸入框光標的顏色爲透明!

#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];
        // 輸入框光標的顏色爲無色
        _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;
}

文本框內容改變時,用來用戶輸入, 監聽其值的改變.

#pragma mark - 文本框內容改變
/**
 *  重置顯示的點
 */
- (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"]) { // 按回車關閉鍵盤
        
        [textField resignFirstResponder];
        return NO;
    } else if(string.length == 0) { // 判斷是否是刪除鍵
        
        return YES;
    } else if(textField.text.length >= kDotCount) { // 輸入的字符個數大於6，則沒法繼續輸入，返回NO表示禁止輸入
        
        NSLog(@"輸入的字符個數大於6，後面禁止輸入則忽略輸入");
        return NO;
    } else {
        
        return YES;
    }
}

清除密碼時收起鍵盤並將文本輸入框值置爲空.

#pragma mark - publick method
/**
 *  清除密碼
 */
- (void)clearUpPassword {
    [self.pswTextField resignFirstResponder];
    self.pswTextField.text = nil;
    [self textFieldDidChange:self.pswTextField];
}

 

接着在當前所需控制器裏,建立支付頁面並拿到用戶輸入密碼去作支付相關邏輯處理

// 加密支付頁面
    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];
}

3、運行效果與文件截圖

一、運行效果：

二、文件截圖：

4、其餘補充

我這裏是作6位支付密碼的, 你一樣能夠修改kDotCount密碼個數值,目前也有4位的.

 

界面性問題能夠根據本身項目需求調整便可, 具體可參考代碼, 項目可以直接運行!

代碼下載：http://www.demodashi.com/demo/10709.html

注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權