iOS开发:自定义支付密码验证码输入框

今天需求下来了需要自定义一个验证码输入框,于是就开始思考用什么方式去实现,效果图要这样的:


1871540282209_.pic.jpg

由于本人比较懒,所以不怎么喜欢用drawRect方法去画线条。。所以一开始想着用6个label带上边框排列摆放,后来发现边框重合的问题没法解决,所以无奈之下还是用了drawRect + 6个背景色为透明色的label来组合出这个UI。

下面的就是我自己封装好的一个密码输入框,调用也只需要两三行代码即可,用于一般的小需求非常好用。而且demo很简单,又复杂的需求也可以自行去里面修改。

具体的思路也很简单,就是通过一个隐藏的TextFiled来控制输入的密码,然后相应的在TextFiled的代理事件里面处理UI上的变化。

JXCPasswordView

github地址

使用方法

下载上面的项目,然后把JXCPasswordView的.h和.m文件拖到自己项目中

在需要使用的地方引入头文件

#import "JXCPasswordView.h"

声明属性

@property (nonatomic,strong)JXCPasswordView *verCodeView;

确定密码框宽度

#define kCodeViewWidth [UIScreen mainScreen].bounds.size.width * 0.124 * 6

JXCPasswordView公共方法

/**
 自定义初始化密码框

 @param frame frame
 @param length 密码长度
 @param boldColor 密码框的线条颜色
 @return 密码框
 */
- (instancetype)initWithFrame:(CGRect)frame andLength:(NSInteger)length andBoldColor:(UIColor *)boldColor;


/**
 当输入密码错误时,清除原先的密码
 */
- (void)cleanDatas;

在自己的场景中调用

- (void)setPswdView {
    _verCodeView = [[JXCPasswordView alloc]initWithFrame:CGRectMake(([UIScreen mainScreen].bounds.size.width-kCodeViewWidth)/2, 300, kCodeViewWidth, kCodeViewWidth/6) andLength:6 andBoldColor:[UIColor blackColor]];
    _verCodeView.backgroundColor = [UIColor whiteColor];
    _verCodeView.delegate = self;
    [self.view addSubview:_verCodeView];
}

实现代理方法

- (void)getPassWord:(NSString *)password {
    NSLog(@"验证码:%@",password);
    
    /**
     在这里根据需求校验输入的密码或者验证码是否正确
     如果验证失败,则调用方法清除页面
     */
    
//    [_verCodeView cleanDatas];
    
}

如果有发现什么bug或者不严谨的地方也请多多指正。

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

推荐阅读更多精彩内容

  • .前言 最简单的方式实现:支付宝的密码输入框.以及常规的验证码输入框 先上效果图 提供的demo有两套思路:1.使...
    侭情显現阅读 4,949评论 1 3
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,009评论 3 119
  • 最伤情至断肠崖,绝黯然成销魂掌。
    深海光雨阅读 96评论 0 0
  • 【永遇乐】寒衣节 十字街头,万层烟落,哀烬飞絮。故影匆匆,经年只有、此刻丝丝语。天宫若似、人间冷暖,今夜盛装歌舞。...
    雲末阅读 528评论 0 8
  • 时令进入秋季,许多人的鼻子开始不舒服,都说是“慢性鼻炎”犯了,打喷嚏流鼻涕,躺下就不通气,还有嗓子整天吭吭咔咔的,...
    嫣然逢春阅读 320评论 0 3