IOS implementation Input Verification code, password-by-bit segmentation (ii) _ios

This article provides the implementation of IOS implementation of input verification code, password-by-bit segmentation of a train of thought, share for everyone to reference, I hope to communicate with you.

First, the realization of ideas
1. Description of Ideas

• Customizing a view, inheriting from UIView
• Add child controls to view Textfield,backgroundimageview,label
• Draws the contents of the CAPTCHA/password to the specified area of the label (computed), so the label is to be customized and the validation code is drawn in the DrawRect method
• Use a property securetextentry to control the display of the authentication code (display the true number) or password (show dot)
  

2, child controls in the view

• TextField: only responsible for pop-up keyboard, get keyboard input data, not to demonstrate keyboard input content, is actually hidden
• Backgroundimageview: Displays the background picture that implements the segmentation effect
• Label: Displays the contents of a validation code or password
  

3, the relationship between controls
As shown in figure:

• Number "1": Parent view (Vertificationcodeinputview)
• Number "2": Child View (TextField)
• Number "3": Child View (Backgroundimageview)
• Number "4": Child View (label)
• The picture comes from the Xcode debugging tool

Hierarchical relationship

• Label is used to display the contents of the verification code, must be at the top
  
• Backgroundimageview displays a background image, so it must be behind the label and can be displayed

Second, realize the effect
Password input effect

Validation code Input Effect

Third, the realization step
Code structure
As shown in figure:

1, Idvertificationcodeinputview (number "1" view) of the properties

Public properties (Vertificationcodeinputview related properties)

@interface idvertificationcodeinputview:uiview
/** background picture
*/@property (nonatomic, copy) NSString * Backgroudimagename;
/** Authentication Code/password number of digits */
@property (nonatomic, assign) Nsinteger Numberofvertificationcode;
/** Control Verification Code/password is ciphertext display */
@property (nonatomic, assign) bool Securetextentry;
/** authentication code/password content, you can get the verification code/password input box authentication code/password content * *
@property (nonatomic, copy) NSString *vertificationcode;
@end

Private property (child control for Vertificationcodeinputview)

@interface Idvertificationcodeinputview () <UITextFieldDelegate>
/** is used to get the contents of the keyboard input and does not actually show the */
@property (Nonatomic, Strong) Uitextfield *textfield;
/** Verification Code/Password input box background picture * * * *
@property (nonatomic, strong) Uiimageview *backgroundimageview;
/** the label*/
@property (nonatomic, strong) Idlabel *label that is actually used to display the authentication code/password;
@end

2, Idlabel (number "4" view) properties

Public properties

@interface Idlabel:uilabel
/** Authentication Code/password number of digits/
@property (nonatomic, assign) Nsinteger Numberofvertificationcode ;
/** Control Verification Code/password is ciphertext display */
@property (nonatomic, assign) bool Securetextentry;
@end

3. Business logic

Initialization of Vertificationcodeinputview

• Set the default number of authentication codes/passwords (4-bit), add textfield and label

• If you set a background picture, you need to add Backgroundimageview to the Vertificationcodeinputview

-(void) Setbackgroudimagename: (NSString *) backgroudimagename {
  _backgroudimagename = backgroudimagename;
  If the user sets the background picture, add the background picture
  Self.backgroundimageview = [[Uiimageview alloc] initWithFrame:self.bounds];
  Self.backgroundImageView.image = [UIImage imageNamed:self.backgroudImageName];
  Insert the background picture behind the label to avoid blocking the display of the Verification code/password
  [self insertSubview:self.backgroundImageView belowSubview:self.label];
}

• If you set the number of digits of the authentication code/password, and if the ciphertext is displayed, you need to keep the corresponding property in the label consistent with the Vertificationcodeinputview

-(void) Setnumberofvertificationcode: (Nsinteger) numberofvertificationcode {
  _numberofvertificationcode = Numberofvertificationcode;
  Keep the label's verification code/password number consistent with Idvertificationcodeinputview, at which point the label must have been created
  Self.label.numberOfVertificationCode = _ Numberofvertificationcode;
}
-(void) Setsecuretextentry: (bool) securetextentry {
  _securetextentry = securetextentry;
  Self.label.secureTextEntry = _securetextentry;
}

4, eject the keyboard, and receive the keyboard input characters

Eject keyboard

-(void) Touchesbegan: (Nsset<uitouch *> *) touches withevent: (Uievent *) event {
  [Self.textfield Becomefirstresponder];
}

The characters that receive keyboard input

-(BOOL) TextField: (Uitextfield *) TextField Shouldchangecharactersinrange: (nsrange) range replacementstring: ( NSString *) string {/
  /To determine whether the "delete" character
  if (string.length!= 0) {//Is not a "delete" character
    //The number of digits of the authentication code/password is up to a predetermined number of digits if
    ( TextField.text.length < Self.numberofvertificationcode) {
      Self.label.text = [Textfield.text Stringbyappendingstring:string];
      Self.vertificationcode = Self.label.text;
      Return YES
    } else {return
      NO;
    }
  } else {//is the delete character
    self.label.text = [Textfield.text substringtoindex: TEXTFIELD.TEXT.LENGTH-1];
    Self.vertificationcode = Self.label.text;
    Return YES
  }
}

5. Draw Verification Code/password (idlabel)

To manually invoke the DrawRect method

Rewrite the SetText method to manually invoke the DrawRect method when text changes, drawing the contents of the text in the specified format to the label
-(void) SetText: (NSString *) text {
  Super Settext:text];
  Manually invoke the DrawRect method
  [self setneedsdisplay];
}

Draw verification Code/password

Draws the authentication code/password-(void) DrawRect: (cgrect) Rect {//the width and height of the range of each captcha/password = rect.size.width/(float) Self in the specified format.
  Numberofvertificationcode;;
  float height = rect.size.height; Draws each CAPTCHA/password to the specified area for (int i = 0; i < self.text.length i++) {//Compute the plot area for each captcha/password CGRect temprect = CGRECTM
    Ake (i * width, 0, width, height);
      if (self.securetextentry) {//password, show dot uiimage *dotimage = [uiimage imagenamed:@ "dot"]; Compute the plot area of the dot cgpoint securitydotdrawstartpoint = cgpointmake (Width * i + (width-dotimage.size.width)/2.0, (TEMPR
      Ect.size.height-dotimage.size.height)/2.0);
    Draw a dot [dotimage drawatpoint:securitydotdrawstartpoint];  else {//Authenticode, display number//Traverse verification Code/password per character nsstring *charecterstring = [nsstring stringwithformat:@ '%c ', [self.text
      CHARACTERATINDEX:I]];
      Set the real property of the authentication code/password Nsmutabledictionary *attributes = [[Nsmutabledictionary alloc] init];
      Attributes[nsfontattributename] = Self.font; Calculate each testCode/password to draw the starting point (in order to make the verification code/password in the middle of the temprect, should not be drawn from the focus of temprect)//the size of each CAPTCHA/password in the specified style cgsize charactersize = [Chare
      Cterstring Sizewithattributes:attributes]; Cgpoint Vertificationcodedrawstartpoint = cgpointmake (Width * i + (width-charactersize.width)/2.0, (TempRect.size.heig
      Ht-charactersize.height)/2.0);
    Draw verification Code/password [charecterstring drawatpoint:vertificationcodedrawstartpoint withattributes:attributes];
 }
  }
}

6, using the example

Create in the controller and set Vertificationcodeinputview related properties

-(void) viewdidload {
  [super viewdidload];
  Self.view.backgroundColor = [Uicolor lightgraycolor];
  Self.vertificationcodeinputview = [[Idvertificationcodeinputview alloc] Initwithframe:cgrectmake (+, MB, m)];
  Self.vertificationCodeInputView.backgroudImageName = @ "1";
  Verification Code (display number)
  self.vertificationCodeInputView.secureTextEntry = NO;
  Self.vertificationCodeInputView.secureTextEntry = YES;
  [Self.view AddSubview:self.vertificationCodeInputView];
}

Click on the screen to print the contents of the Verification code

-(void) Touchesbegan: (Nsset<uitouch *> *) touches withevent: (Uievent *) event {
  NSLog (@ "%@", Self.vertificationCodeInputView.vertificationCode);
}

The above is the entire content of this article, I hope to help you learn.