IOS implements a cryptographic input box (Uikeyinput protocol) similar to the micro-letter and Alipay _ios

At present in the project needs to achieve the function of red envelopes, they wrote a password input box control, mainly used to the Uikeyinput protocol and Coregraphics framework, the effect of similar micro-letter payment, feeling still line on my thoughts and the production process written down to share with you.

Let your custom view have the input function (Uikeyinput protocol)

The Uikeyinput protocol can provide a simple keyboard input function for the responder, so that the responder that needs the keyboard becomes the first responder. The UIKEYINPUT protocol must be implemented with three methods, namely the following methods:

#pragma mark-uikeyinput/** * is used to display text objects with any text */(BOOL) HasText {return self.textStore.length > 0;}
    /** * Insert text/-(void) InsertText: (NSString *) text {if (Self.textStore.length < Self.passwordnum) {//Judge whether it is a number
    Nscharacterset *cs = [[Nscharacterset charactersetwithcharactersinstring:moneynumbers] invertedSet];
    nsstring*filtered = [[Text Componentsseparatedbycharactersinset:cs] componentsjoinedbystring:@ "];
    BOOL basictest = [text isequaltostring:filtered]; if (basictest) {if ([Self.delegate respondstoselector: @selector (passworddidchange:)]) {[Self.delegate passwo
      Rddidchange:self]; } if (self.textStore.length = = Self.passwordnum) {if (Self.delegate respondstoselector: @selector (PASSWORDC
        Ompleteinput:)] {[Self.delegate passwordcompleteinput:self];
      } [Self.textstore Appendstring:text];
    [Self setneedsdisplay]; /** * Delete text */(void) Deletebackward {if (self.tExtstore.length > 0) {[Self.textstore Deletecharactersinrange:nsmakerange (Self.textstore.length-1, 1)];
    if ([Self.delegate respondstoselector: @selector (passworddidchange:)]) {[Self.delegate passworddidchange:self];
} [self setneedsdisplay];

/** * Can be the first responder//(BOOL) Canbecomefirstresponder {return YES;} /** * Click to become the first corresponding/-(void) Touchesbegan: (Nsset<uitouch *> *) touches withevent: (Uievent *) event {if (![
  Self Isfirstresponder]) {[Self becomefirstresponder];

 }
}

Draw the password input box through Coregraphics

The idea is to draw the outer frame of the password input frame and the small black dot inside by the coregraphics frame, and then judge the number of digits by the string obtained from the keyboard, and realize the following:

/** * Sets the square edges/(void) Setsquarewidth: (cgfloat) squarewidth {_squarewidth = squarewidth;
[Self setneedsdisplay];

/** * Set the type of keyboard * *-(Uikeyboardtype) Keyboardtype {return uikeyboardtypenumberpad;}
  /** * Set the number of digits of the password * * (void) Setpasswordnum: (Nsuinteger) passwordnum {_passwordnum = Passwordnum;
[Self setneedsdisplay];
  /** * Draw * *-(void) DrawRect: (cgrect) rect {cgfloat height = rect.size.height;
  CGFloat width = rect.size.width;
  CGFloat x = (width-self.squarewidth*self.passwordnum)/2.0;
  CGFloat y = (height-self.squarewidth)/2.0;
  Cgcontextref context = Uigraphicsgetcurrentcontext ();
  Draw Outer frame cgcontextaddrect (context, CGRectMake (x, Y, Self.squarewidth*self.passwordnum, self.squarewidth));
  Cgcontextsetlinewidth (context, 1);
  Cgcontextsetstrokecolorwithcolor (context, self.rectColor.CGColor); Cgcontextsetfillcolorwithcolor (context, [Uicolor Whitecolor].
  Cgcolor); Draw the vertical bar for (int i = 1; I <= self.passwordnum; i++) {Cgcontextmovetopoint (COntext, x+i*self.squarewidth, y);
     Cgcontextaddlinetopoint (context, x+i*self.squarewidth, y+self.squarewidth);
  Cgcontextclosepath (context);
  } cgcontextdrawpath (context, kcgpathfillstroke);
  Cgcontextsetfillcolorwithcolor (context, self.pointColor.CGColor); Draw black dot for (int i = 1; I <= self.textStore.length i++) {Cgcontextaddarc (context, X+i*self.squarewidth-self.squ
    arewidth/2.0, Y+SELF.SQUAREWIDTH/2, Self.pointradius, 0, m_pi*2, YES);
  Cgcontextdrawpath (context, Kcgpathfill);
 }
}

SOURCE Download: Https://github.com/631106979/WCLPassWordView

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.