支付宝密码输入效果

主要分为俩部分,textField的构建和view的展示
1、textField构建,首先要去掉textField复制粘贴功能

#import "PayPassTextField.h"
继承于UITextField,主要目的是为了去掉textField复制粘贴功能
代码如下
//禁止粘贴复制全选等
- (BOOL)canPerformAction:(SEL)action withSender:(id)sender
{
    UIMenuController *menuController = [UIMenuController sharedMenuController];
    if (menuController) {
        [UIMenuController sharedMenuController].menuVisible = NO;
    }
    return NO;
}

2、view的展示

.h 文件中
#import <UIKit/UIKit.h>
#import "PayPassTextField.h"
//Block输入完成、返回输入结果,做后来要做的事
typedef void (^TextFinished)(NSString *textStr);
@interface PayPassView : UIView
@property (nonatomic, strong)PayPassTextField *passText;
@property (nonatomic, copy)TextFinished finishInput;
@end
.m 文件中
#import "PayPassView.h"

#define ScreenHeight [UIScreen mainScreen].bounds.size.height
#define ScreenWidth  [UIScreen mainScreen].bounds.size.width
#define ColorRGB(r,g,b,a)  [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a]
#define allLineColor       [UIColor colorWithRed:205/255.0 green:205/255.0 blue:205/255.0 alpha:1]
#define SASize CGSizeMake (10, 10) //密码点的大小


@interface PayPassView ()<UITextFieldDelegate>
@property (nonatomic, strong)UIView *backGroundView;
@property (nonatomic, strong)NSMutableArray *dataArray;// 用来存放黑色小点
@end

展示view的构建、
初始化方法将textField分割,同时将创建的view黑点添加到数组中保存
self.passText = [[PayPassTextField alloc]initWithFrame:CGRectMake(20, CGRectGetMaxY(lineView.frame) + 10, ScreenWidth - 40, 40)];
    self.passText.keyboardType = UIKeyboardTypeNumberPad;
    self.passText.backgroundColor = [UIColor whiteColor];
    //输入的文字颜色为白色
    self.passText.textColor = [UIColor whiteColor];
    //输入框光标的颜色为白色
    self.passText.tintColor = [UIColor whiteColor];
    self.passText.delegate = self;
    self.passText.autocapitalizationType = UITextAutocapitalizationTypeNone;
    self.passText.layer.borderColor = allLineColor.CGColor;
    self.passText.layer.borderWidth = 0.5;
    //监控输入内容变化
    [self.passText addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged];
    [view1 addSubview:self.passText];
    
    CGFloat width = CGRectGetWidth(self.passText.frame) / 6;
    
    //生成分割线
    for (int i = 0; i < 5; i ++) {
        UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetMinX(self.passText.frame) + (i + 1) * (width + 0.5), CGRectGetMinY(self.passText.frame), 0.5, 40)];
        lineView.backgroundColor = allLineColor;
        [view1 addSubview:lineView];
    }
    
    self.dataArray = [NSMutableArray array];
    for (int i = 0; i < 6; i++) {
        UIView *dotView = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetMinX(self.passText.frame) + (width - 6) / 2 + i * width, CGRectGetMinY(self.passText.frame) + (40 - SASize.height) / 2, SASize.width, SASize.height)];
        dotView.backgroundColor = [UIColor blackColor];
        dotView.layer.cornerRadius = SASize.width / 2.0f;
        dotView.clipsToBounds = YES;
        dotView.hidden = YES; //先隐藏
        [view1 addSubview:dotView];
        //把创建的黑色点加入到数组中
        [self.dataArray addObject:dotView];
    }
#pragma mark -- UITextFieldDelegate
- (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 >= 6) {
        //输入的字符个数大于6,则无法继续输入,返回NO表示禁止输入
        NSLog(@"输入的字符个数大于6,忽略输入");
        return NO;
    } else {
        return YES;
    }
}

- (void)textFieldDidChange:(UITextField *)textField
{
    for (UIView *dotView in self.dataArray) {
        dotView.hidden = YES;
    }
    for (int i = 0; i < textField.text.length; i ++) {
        ((UIView *)[self.dataArray objectAtIndex:i]).hidden = NO;
    }
    if (textField.text.length == 6) {
        _finishInput(textField.text);
        [self removeFromSuperview];
    }
}

以上就是支付宝密码输入效果,如有问题,谢谢指出 demo地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,455评论 25 708
  • 2017.02.22 可以练习,每当这个时候,脑袋就犯困,我这脑袋真是神奇呀,一说让你做事情,你就犯困,你可不要太...
    Carden阅读 1,378评论 0 1
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,250评论 4 61
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,566评论 7 249
  • 遇到爱情是一种什么感觉呢?会不会是,你走在这个人身边两人有说不完的话。当你们抬头看星星的时候,那份安静一点都不尴尬...
    心迪心理阅读 722评论 0 3