一个字符的一个输入框
本例使用布局框架Masonry，如果Masonry这个框架不知道的朋友，我建议可以去了解下，这是我一直在用的代码约束框架，好用方便。
1.使用textView，textView的代理方法(textViewDidChange)监听text的变化，textView值一变，取text的值并拆分成单个字符，将每个值填入每个框中。
添加textview
[_contairView addSubview:self.textView];
//添加textView
[self.textView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(_contairView);
}];
2.本例使用6个框来实现效果，实际可根据自己需要设置几位。设置位数的属性是
/*验证码的最大长度*/
@property (nonatomic, assign) NSInteger maxLenght;
根据设置的长度创建6个带框的view，每个view添加一个label来展示每个字符，并且在每个view上添加光标的layer。
计算两个框的padding
CGFloat padding = (CGRectGetWidth(self.frame) -_maxLenght*CGRectGetHeight(self.frame))/(_maxLenght - 1);
添加6个带光标的输入框
for (int i=0; i<self.maxLenght; i++) {
UIView *subView = [UIView new];
subView.backgroundColor = [UIColor whiteColor];
subView.cornerRadius = 4;
subView.borderWidth = (0.5);
subView.userInteractionEnabled = NO;
[_contairView addSubview:subView];
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
if (lastView) {
make.left.equalTo(lastView.mas_right).with.offset(padding);
}else{
make.left.equalTo(@(0));
}
make.centerY.equalTo(self.contairView);
make.height.equalTo(self.contairView.mas_height);
make.width.equalTo(self.contairView.mas_height);
}];
UILabel *subLabel = [UILabel new];
subLabel.font = [UIFont systemFontOfSize:38];
[subView addSubview:subLabel];
[subLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(subView);
make.centerY.equalTo(subView);
}];
lastView = subView;
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake((CGRectGetHeight(self.frame)-2)/2,5,2,(CGRectGetHeight(self.frame)-10))];
CAShapeLayer *line = [CAShapeLayer layer];
line.path = path.CGPath;
line.fillColor = _viewColorHL.CGColor;
[subView.layer addSublayer:line];
if (i == 0) {//初始化第一个view为选择状态
[line addAnimation:[self opacityAnimation] forKey:@"kOpacityAnimation"];
line.hidden = NO;
subView.borderColor = _viewColorHL;
}else{
line.hidden = YES;
subView.borderColor = _viewColor;
}
[self.viewArr addObject:subView];
[self.labelArr addObject:subLabel];
[self.pointlineArr addObject:line];
}
3.给光标添加动画，动画方式是透明度的变化。
- (CABasicAnimation *)opacityAnimation {
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.fromValue = @(1.0);
opacityAnimation.toValue = @(0.0);
opacityAnimation.duration = 0.9;
opacityAnimation.repeatCount = HUGE_VALF;
opacityAnimation.removedOnCompletion = YES;
opacityAnimation.fillMode = kCAFillModeForwards;
opacityAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
return opacityAnimation;
}
4.textView的代理实现
- (void)textViewDidChange:(UITextView *)textView{
NSString *verStr = textView.text;
//有空格去掉空格
verStr = [verStr stringByReplacingOccurrencesOfString:@" " withString:@""];
if (verStr.length >= _maxLenght) {
verStr = [verStr substringToIndex:_maxLenght];
[self endEdit];
}
textView.text = verStr;
if (self.block) {
//将textView的值传出去
self.block(verStr);
}
for (int i= 0; i < self.viewArr.count; i++) {
//以text为中间
UILabel *label = self.labelArr[i];
if (i<verStr.length) {
//如果text之前的每个字符，隐藏光标喝边框色
[self changeViewLayerIndex:i pointHidden:YES];
label.text = [verStr substringWithRange:NSMakeRange(i, 1)];
}else{
//如果等于textView的长度，将光标现实，并且有边框颜色
[self changeViewLayerIndex:i pointHidden:i==verStr.length?NO:YES];
if (!verStr&&verStr.length==0) {//textView的text为空的时候
[self changeViewLayerIndex:0 pointHidden:NO];
}
label.text = @"";
}
}
}
5.可定制选中和未选中的边框颜色
/*未选中下的view的borderColor*/
@property (nonatomic, strong) UIColor *viewColor;
/*选中下的view的borderColor*/
@property (nonatomic, strong) UIColor *viewColorHL;
6.使用方法如下
MQVerCodeInputView *verView = [[MQVerCodeInputView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH-50, 50)];
verView.maxLenght = 6;//最大长度
verView.keyBoardType = UIKeyboardTypeNumberPad;
[verView mq_verCodeViewWithMaxLenght];
verView.block = ^(NSString *text){
NSLog(@"text = %@",text);
};
verView.center = self.view.center;
[self.view addSubview:verView];
7.效果如下：
verCodeView.gif
