iOS 인증 코드 입력 의 실현 방향 을 상세히 설명 합 니 다.

그림 에서 보 듯 이 현재 많은 App 들 이 밑줄,사각형 등 방식 의 인증 코드 입력 을 사용 하여 직관 적 이 고 아름 답 습 니 다!이런 효과 의 실현 방식 에 대해 다음 과 같은 몇 가지 방식 이 있다.
1.여러 UITextField 로 구성
이러한 방식 은 커서 가 깜빡 거 리 는 것 이 장점 이지 만 삭제 와 애니메이션 효 과 를 처리 할 때 약간 서 툴 러 보일 수 있 습 니 다.OFO 는 이렇게 이 루어 져 야 합 니 다.모든 UITextField 의 First Responsder 를 엄 격 히 처리 해 야 합 니 다.
2.UITextField 로 구성 되 어 있 으 며,부 텍스트 를 사용 합 니 다.
이 방식 은 가능 합 니 다.부 텍스트 를 사용 하여 모든 문자 의 간격 을 설정 하고 부 텍스트 를 편집 할 수 있 습 니 다.커서 가 반 짝 이 고 단점 도 애니메이션 효 과 를 처리 하기 어 려 울 것 입 니 다.
3.UIView 로 그리 기
이것 은 제 가 GitHub 에서 본 반제품 데모 입 니 다.하나의 UIView 를 이용 하여 Quartz 2D 와 UIBezierPath 를 사용 하여 텍스트 와 밑줄 을 그리고 입력 이벤트 와 키보드 이 벤트 를 처리 합 니 다.사실은 전체적으로 코드 도 많 지 않 고 300 줄 이내 이지 만 좋 은 iOS 로 기 초 를 그 려 야 합 니 다.
4.UITextField 하나 와 여러 UILabel
이것 은 제 가 다음 에 소개 한 사고 입 니 다.이 사고의 단점 은 커서 가 반 짝 이지 않 고 사실은 위조 실현 도 할 수 있 습 니 다.이런 수요 가 있어 야 하 는 지 확인 해 야 합 니 다.이 사고방식 은 비교적 간단 하고 애니메이션 에 쉽게 가입 할 수 있다.순수 하 게 100 여 줄 이 고 그 다음 에 구조 와 코드 를 본다.

새 UIView,초기 화 방법

- (instancetype)initWithCount:(NSInteger)count margin:(CGFloat)margin
{
  if (self = [super init]) {
    self.itemCount = count; // itemCount       ，  6 
    self.itemMargin = margin; // itemMargin   Label     
    [self configTextField];
  }
  return self;
}

내부 하위 컨트롤 추가(프레젠테이션)

- (void)configTextField
{
  UITextField *textField = [[UITextField alloc] init];
  textField.autocapitalizationType = UITextAutocapitalizationTypeNone;
  textField.keyboardType = UIKeyboardTypeNumberPad;
  [textField addTarget:self action:@selector(tfEditingChanged:) forControlEvents:(UIControlEventEditingChanged)];
  //    ：     YES，             ，        ，        
  // clearsOnBeginEditing         secureTextEntry = YES  
  // textField.secureTextEntry = YES;
  [self addSubview:textField];
  self.textField = textField;
  //    ：  textField      maskView，    textField     
  UIButton *maskView = [UIButton new];
  maskView.backgroundColor = [UIColor whiteColor];
  [maskView addTarget:self action:@selector(clickMaskView) forControlEvents:(UIControlEventTouchUpInside)];
  [self addSubview:maskView];
  self.maskView = maskView;
  for (NSInteger i = 0; i < self.itemCount; i++)
  {
    UILabel *label = [UILabel new];
    [self addSubview:label];
    [self.labels addObject:label];
  }
  for (NSInteger i = 0; i < self.itemCount; i++)
  {
    UIView *line = [UIView new];
    [self.lines addObject:line];
  }
}

여 기 는 maskView 에 대해 이해 하기 어 려 울 수 있 습 니 다.maskView 는 주로 아래 의 UITextField 를 막 기 위해 서 입 니 다.클래스 UIButton 을 사용 하 는 것 은 이 벤트 를 막 기 위해 서 입 니 다.클래스 UIView 를 사용 하면 이 벤트 를 self 에 전달 하고 밖 에 키보드 가 숨겨 진 코드 에 영향 을 줄 수 있 기 때문에 한번 해 보 세 요.
주요 처리 비 즈 니스 논리 코드

#pragma mark -     
- (void)tfEditingChanged:(UITextField *)textField
{
  if (textField.text.length > self.itemCount) {
    textField.text = [textField.text substringWithRange:NSMakeRange(0, self.itemCount)];
  }
  for (int i = 0; i < self.itemCount; i++)
  {
    UILabel *label = [self.labels objectAtIndex:i];
    if (i < textField.text.length) {
      label.text = [textField.text substringWithRange:NSMakeRange(i, 1)];
    } else {
      label.text = nil;
    }
  }
  //      ，      
  if (textField.text.length >= self.itemCount) {
    [textField resignFirstResponder];
  }
}

UITextField 의 delegate 를 사용 하지 않 았 습 니 다.UIControlEventEditingChanged 를 사용 하면 충분 합 니 다.하지만 영어 등 다른 문 자 를 입력 할 수 있다 면 delegate 를 제한 해 야 합 니 다.
이로써 인증 코드 입력 의 핵심 코드 가 없어 졌 습 니 다.이렇게 적은 것 같 지 않 습 니까?!이 를 바탕 으로 저 는 데모 로 3 가지 기본 효 과 를 실 현 했 습 니 다.그림 과 같 습 니 다.

Github 코드 주소:나 를 지적 하 다
팁
다른 사람 에 게 어떤 방법 을 사용 하 게 하고 싶 지 않 을 때 는 개인 적 인 방법 외 에 도 이렇게 할 수 있다.

- (instancetype)init UNAVAILABLE_ATTRIBUTE;
+ (instancetype)new UNAVAILABLE_ATTRIBUTE;

총결산
위 에서 말 한 것 은 소 편 이 소개 한 iOS 인증 코드 입력 의 실현 방향 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!