美文网首页
iOS 类似微信支付宝密码登录框效果

iOS 类似微信支付宝密码登录框效果

作者: 笑啥风云 | 来源:发表于2018-04-26 14:17 被阅读128次
Simulator Screen Shot - iPhone 8 - 2018-04-26 at 14.00.04.png

公司项目做一个效果类似于微信支付宝的密码框,这里对效果做了一个封装:
由于要求输入框不能有拷贝粘贴的效果,这里就写了一个继承UITextField的一个子类:NOCopyTextField,并重写- (BOOL)canPerformAction:(SEL)action withSender:(nullable id)sender;

  • (BOOL)canPerformAction:(SEL)action withSender:(id)sender
    {
    [super canPerformAction:action withSender:sender];
    if (action == @selector(paste:))//禁止粘贴
    return NO;
    if (action == @selector(select:))// 禁止选择
    return NO;
    if (action == @selector(selectAll:))// 禁止全选
    return NO;
    return NO;
    }
    我的思路是:自定义一个View视图,首先将要显示给用户信息的按钮(我这里用的按钮,因为有背景图片和文字)添加到这个View视图上,并将一个UITextField也添加到这个View视图上面,注意要覆盖在这些按钮上面,并设置这个UITextField的光标颜色和字体颜色等设置为透明色,当点击UITextField的时候监听输入事件,并截取字符分别添加到上面的按钮上面。大致的思路是这样的,具体代码如下:
    在.h文件中

import "WXPasswordView.h"

@property (nonatomic,strong) NOCopyTextField *textfield;
@property (nonatomic,strong) NSMutableArray *btnsArr;

  • (instancetype)initWithFrame:(CGRect)frame withCountNum:(int)count;
    .m文件中

import "WXPasswordView.h"

define Selfsize self.bounds.size

@interface WXPasswordView()<UITextFieldDelegate>
{
int _count;
}
@end
@implementation WXPasswordView

  • (NSMutableArray *)btnsArr{
    if (!_btnsArr) {
    _btnsArr = [[NSMutableArray alloc]init];
    }
    return _btnsArr;
    }

  • (instancetype)initWithFrame:(CGRect)frame withCountNum:(int)count{
    self = [super initWithFrame:frame];
    _count = count;
    if (self) {
    [self createUI];
    }
    return self;
    }

  • (void)createUI{

    float btnWidth = (Selfsize.width - 75)/_count;
    float btnHeigth = btnWidth;
    for (int i = 0; i < _count; i++) {
    UIButton btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setBackgroundImage:[UIImage imageNamed:@"square"] forState:UIControlStateNormal];
    btn.titleLabel.font = [UIFont systemFontOfSize:30];
    btn.frame = CGRectMake(i
    (btnWidth + 25) , (Selfsize.height - btnHeigth)/2.0, btnWidth, btnHeigth);
    [self addSubview:btn];
    [self.btnsArr addObject:btn];
    }
    _textfield = [[NOCopyTextField alloc]initWithFrame:CGRectMake(0, 0, Selfsize.width - 20, 100)];
    _textfield.delegate = self;
    _textfield.backgroundColor = [UIColor clearColor];
    _textfield.textColor = [UIColor clearColor];
    _textfield.keyboardType = UIKeyboardTypeNumberPad;

    //输入框光标的颜色为白色
    _textfield.tintColor = [UIColor clearColor];
    [_textfield addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged];
    [self addSubview:_textfield];

}

  • (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 >= _count) {
    //输入的字符个数大于4,则无法继续输入,返回NO表示禁止输入
    NSLog(@"输入的字符个数大于4,忽略输入");
    [textField resignFirstResponder];
    return NO;
    } else {
    return YES;
    }
    }
    /
  • 重置显示的点
    */
  • (void)textFieldDidChange:(UITextField *)textField
    {
    NSLog(@"%@", textField.text);
    for (int i = 0; i < _count; i++) {
    UIButton *btn = (UIButton *)[self.btnsArr objectAtIndex:i];
    if (i<textField.text.length) {
    [btn setTitle:[NSString stringWithFormat:@"%c",[textField.text characterAtIndex:i]] forState:UIControlStateNormal];
    }else{
    [btn setTitle:@"" forState:UIControlStateNormal];
    }
    }
    if (textField.text.length == _count) {
    [textField resignFirstResponder];

    }
    }
    这样在一个Controller里面直接调用这个封装好的View就可以了
    @property (nonatomic,strong) WXPasswordView *passView;//弄一个全局变量,方便使用
    _passView = [[WXPasswordView alloc]initWithFrame:CGRectMake(10, 100, screen_size.width - 20, 100) withCountNum:4];
    [self.view addSubview:self.passView];
    代码就到这里吧!后面要用到文本框的字符串的时候使用self.passView.textfield.text就可以获取到

相关文章

网友评论

      本文标题:iOS 类似微信支付宝密码登录框效果

      本文链接:https://www.haomeiwen.com/subject/mugplftx.html