项目需求

根据UI设计我们的验证码输入框需要做成类似于支付密码的形式。如图所示

屏幕快照 2018-03-13 上午10.35.04.png

功能分析

简单的输入框无法实现，必须借助UICollectionView。具体做法是在输入框上面覆盖一个大小位置相同的collectionView。然后用手势触发使输入框为第一响应者，调起键盘。然后记录输入内容，刷新输入框。

代码实现

    //密码框
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
    self.collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH - 80, 38) collectionViewLayout:layout];
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.collectionView registerNib:[UINib nibWithNibName:@"SetSMSCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"SMSNumberCell"];
    [self.view1 addSubview:self.collectionView];
    self.smsCode.delegate = self;//smsCode为输入框
    [self.smsCode addTarget:self action:@selector(smsChangeAction:) forControlEvents:UIControlEventEditingChanged];
    self.collectionView.backgroundColor = [UIColor whiteColor];
    self.collectionView.scrollEnabled = NO;

代理方法，手势触发。

- (IBAction)smsNumberAction:(UITapGestureRecognizer *)sender {
    [self.smsCode becomeFirstResponder];
};
- (IBAction)smsBackKeyboard:(UITapGestureRecognizer *)sender {
    [self.smsCode resignFirstResponder];
}

- (void)smsChangeAction: (UITextField *)sender {
    [self.SmsArr removeAllObjects];//SmaArr为存储输入的内容
    for (int i = 0; i < sender.text.length; i++) {
        NSRange range;
        range.location = i;
        range.length = 1;
        NSString *tempSting = [sender.text substringWithRange:range];
        [self.SmsArr addObject:tempSting];
    }
    [self.collectionView reloadData];
}

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
    if ([string isEqualToString:@""]) {
        return YES;
    }
    if (textField.text.length >= 6) {
        return NO;
    }
    return YES;
}

- (void)textFieldDidEndEditing:(UITextField *)textField {
    if (textField.text.length == 6) {
        self.nextBT.backgroundColor = [UIColor colorWithHexColorString:@"#199301"];
        self.nextBT.userInteractionEnabled = YES;
    }
}

#pragma mark collectionDelegate
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 7;
}

- ( UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    SetSMSCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"SMSNumberCell" forIndexPath:indexPath];
    if (self.SmsArr.count == 0) {
        cell.SMSView.backgroundColor = [UIColor colorWithHexColorString:@"#f5f5f5"];
        cell.number.text = @"";
    } else {
        if (indexPath.row <= self.SmsArr.count -1) {
            cell.number.text = self.SmsArr[indexPath.row];
            cell.SMSView.backgroundColor = [UIColor colorWithHexColorString:@"#2FC312"];
        } else {
            cell.SMSView.backgroundColor = [UIColor colorWithHexColorString:@"#f5f5f5"];
            cell.number.text = @"";
        }
    }
    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake((SCREEN_WIDTH - 125) / 6, 38);
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return 0;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 9;
}