密碼輸入框在微信，支付寶中比較常見

主要功能點

1.6位（或者N位）密碼輸入框封裝

//? SBTextFieldAlert.h
/*** 密碼輸入框封裝*/#import <UIKit/UIKit.h>@interface SBPwdTextField : UIView<UITextFieldDelegate>@property(nonatomic,strong) UITextField *passwordTextField;- (void)clearUpPassword;@end

?

?

// // SBTextFieldAlert.m // SafeInpuTextFiled #define kDotSize CGSizeMake (10.0f,10.0f) //密碼點的大小 #define kDotCount 6 //密碼點數#import "SBPwdTextField.h"@implementation SBPwdTextField {NSMutableArray *passwordIndicatorArrary; }-(instancetype)initWithFrame:(CGRect)frame {self=[super initWithFrame:frame];if (self) {self.layer.borderWidth=1;self.layer.borderColor=[UIColor lightGrayColor].CGColor;[self addSubview:self.passwordTextField];[self initPwdTextField];}return self; }-(UITextField *)passwordTextField {if (!_passwordTextField) {_passwordTextField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0,50, 30)];_passwordTextField.hidden = YES;_passwordTextField.delegate = self;_passwordTextField.autocapitalizationType = UITextAutocapitalizationTypeNone;_passwordTextField.keyboardType = UIKeyboardTypeNumberPad;[_passwordTextField addTarget:self action:@selector(PwdTextFieldDidChange:) forControlEvents:UIControlEventEditingChanged];[self addSubview:_passwordTextField];}return _passwordTextField; }-(void)PwdTextFieldDidChange:(UITextField *)tf {NSLog(@"%@",tf.text);[self setDotWithCount:tf.text.length]; }-(void)initPwdTextField {//每個密碼輸入框的寬度CGFloat width = self.bounds.size.width/kDotCount;//生成分割線for (int i = 0; i < kDotCount-1; i++){UIImageView *lineImageView = [[UIImageView alloc] initWithFrame:CGRectMake((i + 1) * width, 0, 0.5f, self.bounds.size.height)];lineImageView.backgroundColor = [UIColor grayColor];[self addSubview:lineImageView];}passwordIndicatorArrary=[[NSMutableArray alloc]init];//生成中間的點for (int i = 0; i < kDotCount; i++){UIImageView *dotImageView = [[UIImageView alloc] initWithFrame:CGRectMake((width - kDotSize.width) / 2.0f + i * width, (self.bounds.size.height - kDotSize.height) / 2.0f, kDotSize.width, kDotSize.height)];dotImageView.backgroundColor = [UIColor blackColor];dotImageView.layer.cornerRadius = kDotSize.width / 2.0f;dotImageView.clipsToBounds = YES;dotImageView.hidden = YES; //先隱藏 [self addSubview:dotImageView];[passwordIndicatorArrary addObject:dotImageView];}}- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)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;} }/*** 重置顯示的點*/ - (void)setDotWithCount:(NSInteger)count {for (UIImageView *dotImageView in passwordIndicatorArrary){dotImageView.hidden = YES;}for (int i = 0; i< count; i++){((UIImageView*)[passwordIndicatorArrary objectAtIndex:i]).hidden = NO;}if (count== kDotCount) {NSLog(@"輸入完畢");[[NSNotificationCenter defaultCenter] postNotificationName:@"uuuu" object:self.passwordTextField.text];} }/*** 清除密碼*/ - (void)clearUpPassword {_passwordTextField.text = @"";[self setDotWithCount:_passwordTextField.text.length]; }/*** 點擊self 彈出鍵盤*/ -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {[_passwordTextField becomeFirstResponder]; }- (void)dealloc {[_passwordTextField removeFromSuperview];_passwordTextField=nil; }

?

?

2.顯示提示框封裝

// SBInputTextAlert.h // SafeInpuTextFiled #import <UIKit/UIKit.h> #import "SBPwdTextField.h"@interface SBInputTextAlert : UIView@property(nonatomic,strong) UILabel *titleLabel;/*** 密碼輸入框*/ @property(nonatomic,strong) SBPwdTextField *TextFieldAlert;-(void)show; -(void)dismiss;@end@interface SBCoverMask : UIView +(void)maskViewShow; +(void)maskViewDismiss; @end

?

// SBInputTextAlert.m // SafeInpuTextFiled #import "SBInputTextAlert.h" #define SBKeyWindow [UIApplication sharedApplication].keyWindow@interface SBInputTextAlert ()@property(nonatomic,strong) UIView *linView;@end@implementation SBInputTextAlert-(instancetype)initWithFrame:(CGRect)frame {self=[super initWithFrame:frame];if (self) {self.layer.cornerRadius=8;self.layer.masksToBounds=YES;[self initSubViews];[self addSubview:self.titleLabel];[self addSubview:self.linView];[self addSubview:self.TextFieldAlert];}return self; }-(UIView *)linView {if (!_linView) {_linView=[[UIView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.titleLabel.frame)+10, self.bounds.size.width,0.5)];_linView.backgroundColor=[UIColor greenColor];}return _linView; }-(void)initSubViews {UIButton *closeButton=[[UIButton alloc]initWithFrame:CGRectMake(0, 0, 50, 30)];[closeButton setTitle:@"關閉" forState:UIControlStateNormal];closeButton.backgroundColor=[UIColor greenColor];[closeButton addTarget:self action:@selector(dismiss) forControlEvents:UIControlEventTouchUpInside];[self addSubview:closeButton]; }-(UILabel *)titleLabel {if (!_titleLabel) {_titleLabel=[[UILabel alloc]init];_titleLabel.textAlignment=NSTextAlignmentCenter;_titleLabel.font=[UIFont boldSystemFontOfSize:18];_titleLabel.frame=CGRectMake(0,5, self.bounds.size.width,25);}return _titleLabel; }-(SBPwdTextField *)TextFieldAlert {if (!_TextFieldAlert) {CGFloat textFieldwidth=(self.bounds.size.width-40);_TextFieldAlert=[[SBPwdTextField alloc]initWithFrame:CGRectMake(20, 50 ,textFieldwidth,textFieldwidth/6)];}return _TextFieldAlert; }/*** 顯示這兒view*/ -(void)show{[SBCoverMask maskViewShow];self.frame=CGRectMake(0,-100, self.bounds.size.width, self.bounds.size.height);[UIView animateWithDuration:0.3 animations:^{self.hidden = NO;self.frame=CGRectMake(SBKeyWindow.frame.size.width/2-self.bounds.size.width/2,100, self.bounds.size.width, self.bounds.size.height);[self.TextFieldAlert becomeFirstResponder];[SBKeyWindow addSubview:self];}]; } /*** 隱藏這個view*/ -(void)dismiss{[SBCoverMask maskViewDismiss];[UIView animateWithDuration:0.5 animations:^{self.hidden = YES;[self.TextFieldAlert resignFirstResponder];[self removeFromSuperview];}];//清空密碼 [self.TextFieldAlert clearUpPassword]; }@end/*** 蒙版MaskView*/ @implementation SBCoverMask +(void)maskViewShow{SBCoverMask *view = [[SBCoverMask alloc] initWithFrame:[[UIScreen mainScreen] bounds]];view.backgroundColor = [UIColor blackColor];view.alpha = 0.3;[[UIApplication sharedApplication].keyWindow addSubview:view]; } +(void)maskViewDismiss{UIWindow *keyWidow=[UIApplication sharedApplication].keyWindow;for (UIView *view in keyWidow.subviews) {if ([view isKindOfClass:[SBCoverMask class]]) {[view removeFromSuperview];}} }@end

?

使用

- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.UIButton *CSButton=[UIButton buttonWithType:UIButtonTypeCustom];CSButton.frame=CGRectMake(50,350, 100, 80);CSButton.backgroundColor=[UIColor redColor];[CSButton setTitle:@"顯示輸入框" forState:UIControlStateNormal];[CSButton addTarget:self action:@selector(showKeyBord) forControlEvents:UIControlEventTouchDown];[self.view addSubview:CSButton];UIButton *CSButton2=[UIButton buttonWithType:UIButtonTypeCustom];CSButton2.frame=CGRectMake(self.view.frame.size.width-100-50,350, 100, 80);CSButton2.backgroundColor=[UIColor redColor];[CSButton2 setTitle:@"隱藏輸入框" forState:UIControlStateNormal];[CSButton2 addTarget:self action:@selector(hideKeyBord) forControlEvents:UIControlEventTouchDown];[self.view addSubview:CSButton2];[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(gotoNextVC:) name:@"uuuu" object:nil]; }-(SBInputTextAlert *)SBTextField{if (!_SBTextField) {_SBTextField=[[SBInputTextAlert alloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width-20,200)];_SBTextField.titleLabel.text=@"請輸入6位支付密碼";_SBTextField.backgroundColor=[UIColor whiteColor];}return _SBTextField; }-(void)gotoNextVC:(NSNotification *)nti {NSLog(@"text=%@",nti.object);[self.SBTextField dismiss];secondViewController *secvc=[[secondViewController alloc]init];[self presentViewController:secvc animated:YES completion:nil]; }-(void)showKeyBord {[self.SBTextField show];[self.SBTextField.TextFieldAlert.passwordTextField becomeFirstResponder]; }-(void)hideKeyBord {[self.SBTextField dismiss];[self.SBTextField.TextFieldAlert.passwordTextField resignFirstResponder]; }

?

效果圖? 可根據設計圖添加相關UI即可

Demo地址 http://files.cnblogs.com/files/sixindev/SafeInpuTextFiled.zip

轉載于:https://www.cnblogs.com/sixindev/p/4589275.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的简单实现支付密码输入框 By HL的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。