Android App Digital Unlock example detailed _android

Android App Digital Lock

Recently took time to do the following digital unlock function, the phone has digital unlock, app can also do, to avoid some of the application of privacy leakage, is to achieve the effect of the map:

Preface: These two days the boss gave a task, said is to do a copy of iOS Digital lock screen interface, thought that this thing online should have quite a lot of, and then the first Baidu A, who knows the case seems to be a little poor, and then with a skeptical mentality to download the "source" of the hardships found, look at the written, and then their own a bit of the idea, On their own by the "source" of the idea of their own realization of a, see above.

Ideas:

Here we can look at two parts, one for the input and the other for the bottom button.
First look at the above section, we can be seen as TextView, and then respond to the following button action. The following section, each button in the diagram needs to be drawn out, the difficulty is based on the first key of the coordinates (we initialize the first coordinates) to calculate the coordinates of each key, and then according to the finger touch screen events to determine which button is clicked

Next we'll look at the core code:

Input Box section:

public class Passwordtextview extends textview{private final string sing = "*";//ciphertext display content private String content = "";
 /display content//text Change event callback interface private Ontextchangedlistener Ontextchangedlistener; /** * Handler Thread object, used to update the display content of the password box * To display the input content as redaction * * * Private Handler Handler = new Handler () {public void handlemess
   Age (Android.os.Message msg) {//ciphertext display PasswordTextView.this.setText (sing);
   The callback changes the event interface if (Ontextchangedlistener!= null) {ontextchangedlistener.textchanged (content);
 }
  };

 }; /** * Construction Method * @param context * @param attrs/Public Passwordtextview (context, AttributeSet attrs) {su
 Per (context, attrs); /** * Set Text Change Event Monitor * @param ontextchangedlistener/public void Setontextchangedlistener (Ontextchangedlistener o
 Ntextchangedlistener) {this.ontextchangedlistener = Ontextchangedlistener;
  /** * Sets the contents of the Password box to display * @param text/public void settextcontent (String text) {//Get input this.content = text; if (! Textutils.iseMpty (text)) {handler.sendemptymessage (0);//Send message to Handler}else{This.settext ("");
 /** * Get the displayed content * @return/public String gettextcontent () {return content; /** * Text Changes event interface/public interface ontextchangedlistener{/** * Password Box text changes call * @param content/Publi
 c void TextChanged (String content);

 }
}

the key section below

public class Numerick Eyboard extends View {private int screen_width = 0;//screen width private float first_x = 0;//Draw 1 x coordinates private float first_y = 0;//Draw 1 's y-coordinate private float[] xs = new float[3];//declare array to hold the center axis of each column private float[] ys = new Floa t[4];//declare array save each row of the center ordinate private float circle_x, circle_y;//Click on the center coordinates private INT number = -1;//Click on the digital private onnumberclic

 K onnumberclick;//Digital Click event * * To determine Refresh data *-1 No data refresh * 0 Press Refresh * 1 bounce Refresh/private int type =-1;
  /** * Construction Method * * @param context */public Numerickeyboard (context) {super (context);
  InitData (context),//Initialization data} public Numerickeyboard (context, AttributeSet attrs) {Super (context, attrs); InitData (context);//Initialization Data}/** * Set the Digital Click event * * @param onnumberclick/public void Setonnumberclick (ONNUMBERC
 Lick Onnumberclick) {this.onnumberclick = Onnumberclick; }//Initialize data private void InitData (context context) {//get screen width screen_width = systemutils.getsystemdisplay (contEXT) [0];
  Gets the x-coordinate of the drawing 1 first_x = SCREEN_WIDTH/4;
  Gets the y-coordinate first_y = (systemutils.getsystemdisplay (context) [1]-systemutils.getsystemdisplay (context) [1]/3)/4 that draws 1.
  Add the horizontal axis of each row xs[0] = first_x + 10;
  XS[1] = first_x * 2 + 10;
  XS[2] = first_x * 3 + 10;
  Add ordinate ys[0 for each column] = + first_y-15;
  YS[1] = + first_y + first_x-15;
  YS[2] = + first_y + first_x * 2-15;
 YS[3] = + first_y + first_x * 3-15;
  } @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);
  Create a Brush object Paint Paint = new Paint ();
  Paint.setcolor (Color.Black)//Set Brush color paint.settextsize (40);//Set Font size paint.setstrokewidth (2);
  Draw the text, note that starting from the coordinates to draw//the more difficult is to calculate the coordinates//draw the first row of 1,2,3 Canvas.drawtext ("1", first_x, + first_y, paint);
  Canvas.drawtext ("2", first_x * 2, + first_y, paint);
  Canvas.drawtext ("3", first_x * 3, + first_y, paint);
  Draw 2nd Row 4,5,6 Canvas.drawtext ("4", first_x, + first_y + first_x, paint); Canvas.drawtext ("5", first_x * 2,+ first_y + first_x, paint);
  Canvas.drawtext ("6", first_x * 3, + first_y + first_x, paint);
  Draw 3rd row 7,8,9 Canvas.drawtext ("7", first_x, + first_y + first_x * 2, paint);
  Canvas.drawtext ("8", first_x * 2, + first_y + first_x * 2, paint);
  Canvas.drawtext ("9", first_x * 3, + first_y + first_x * 2, paint);
  Draw 4th row 0 Canvas.drawtext ("0", first_x * 2, + first_y + first_x * 3, paint); Draw a circle Paint.setcolor (color.white) for each digit;/Set brush color Paint.setantialias (TRUE);//Set anti-aliasing//Set Draw Hollow circle Paint.setstyle (paint .
  Style.stroke);
  Sequentially draw the first row of the round canvas.drawcircle (first_x +, + first_y-15, paint);
  Canvas.drawcircle (first_x * 2 +, + first_y-15, paint);
  Canvas.drawcircle (first_x * 3 +, + first_y-15, paint);
  Sequentially draw the 2nd row of the round canvas.drawcircle (first_x +, + first_y + first_x-15, paint);
  Canvas.drawcircle (first_x * 2 +, + first_y + first_x-15, paint); Canvas.drawcircle (first_x * 3 + first_y + first_x-Paint);
  Sequentially draw the 3rd row of the round canvas.drawcircle (first_x +, + first_y + first_x * 2-15, paint);
  Canvas.drawcircle (first_x * 2 + + first_y + first_x * 2-15, paint);
  Canvas.drawcircle (first_x * 3 + + first_y + first_x * 2-15, paint);

  Draw the last round canvas.drawcircle (first_x * 2 + + first_y + first_x * 3-15, paint); To determine whether to click on the number (click the number produced by the gradient effect) if (circle_x > 0 && circle_y > 0) {if (type = = 0) {//Press refresh Paint.setcolor (C) Olor.  white);/Set Brush color Paint.setstyle (Paint.Style.FILL_AND_STROKE);//Draw solid Circle canvas.drawcircle when pressed (circle_x, circle_y, 70, paint);//Draw Circle} else if (type = = 1) {//Bounce refresh Paint.setcolor (color.white);/Set Brush color Paint.setstyle (Paint.Style.STR
    OKE), and then draw the Hollow round canvas.drawcircle (circle_x, circle_y, paint) when it bounces;//Draw circle//Draw complete, reset circle_x = 0;
   circle_y = 0; /** * Get Touch Click event/@Override public boolean ontouchevent (Motionevent event) {//Incident judgment switch (event.get Action ()) {case motionevent.action_down://Press//judgment click coordinates position float x = event.getx ()//x coordinate float y = event.ge
    TY ();//press the y-coordinate of the Handledown (x, y) to determine which number is clicked;
   return true; Case motionevent.action_up://Bounce type = 1;//Bounce Refresh invalidate ()//Refresh interface//return clicked number if (Onnumberclick!= null &A
    mp;& number!=-1) {Onnumberclick.onnumberreturn (number);
    SetDefault ()//restore default//Send auxiliary event sendaccessevent (R.STRING.NUMERIC_KEYBOARD_UP);
   return true;
    Case motionevent.action_cancel://cancellation//restore Default value SetDefault ();
  return true;
 return false;
  * * * Restore Default value * * private void SetDefault () {circle_x = 0;
  circle_y = 0;
  Type =-1;
  Number =-1;
 Sendaccessevent (R.string.numeric_keyboard_cancel); * * Set accessibility description/private void sendaccessevent (int resid) {//Set description Setcontentdescription (GetContext (). Getstrin
  G (Resid));
  Send Auxiliary event sendaccessibilityevent (accessibilityevent.type_view_selected); SetcontentdescriptIon (NULL); * * * To determine which number of clicks is a circle/private void Handledown (float x, float y) {//Judge clicks on that column of data if (Xs[0]-<= x && Amp
   X <= Xs[0] + 70) {//The first column//get the center axis of the click at circle_x = Xs[0];
    To determine which row is clicked if (Ys[0]-<= y && ys[0] + >= y) {//1th row//Get the click of the number Circle Center ordinate circle_y = ys[0]; Number = 1;//Set Click numbers} else if (ys[1]-<= y && ys[1] + >= y) {//2nd row//Get the center ordinate Cir of the digital circle clicked
    cle_y = ys[1]; Number = 4;//Set Click numbers} else if (ys[2]-<= y && ys[2] + >= y) {//3rd row//Get the center ordinate of the clicked number Circle CIRCL
    e_y = ys[2]; Number = 7;//Set click Numbers}} else if (Xs[1]-<= x && x <= xs[1] + 70) {//2nd column//Get the center axis of the Click Circle
   _x = xs[1];
    To determine which row is clicked if (Ys[0]-<= y && ys[0] + >= y) {//1th row//Get the click of the number Circle Center ordinate circle_y = ys[0]; Number = 2;//Set Click numbers} else if (ys[1]-<= y && ys[1] + >= y) {//2nd row//Get the center ordinate Cir of the digital circle clicked Cle_y = ys[1]; Number = 5;//Set Click numbers} else if (ys[2]-<= y && ys[2] + >= y) {//3rd row//Get the center ordinate of the clicked number Circle CIRCL
    e_y = ys[2]; Number = 8;//Set Click numbers} else if (ys[3]-<= y && ys[3] + >= y) {//4th row//Get the center ordinate of the clicked number Circle CIRCL
    e_y = ys[3]; Number = 0;//Set click Numbers}} else if (xs[2]-<= x && x <= xs[2] + 70) {//3rd column//Get the center axis of the Click Circle
   _x = xs[2];
    To determine which row is clicked if (Ys[0]-<= y && ys[0] + >= y) {//1th row//Get the click of the number Circle Center ordinate circle_y = ys[0]; Number = 3;//Set Click numbers} else if (ys[1]-<= y && ys[1] + >= y) {//2nd row//Get the center ordinate Cir of the digital circle clicked
    cle_y = ys[1]; Number = 6;//Set Click numbers} else if (ys[2]-<= y && ys[2] + >= y) {//3rd row//Get the center ordinate of the clicked number Circle CIRCL
    e_y = ys[2];
  Number = 9;//Set click on the Numbers} sendaccessevent (R.string.numeric_keyboard_down);
 Type = 0;//Press Refresh//Draw the background round invalidate (); /** * Digital Click event/public interface OnnumBerclick {/** * Returns the number of clicks * * @param #/public void Onnumberreturn (int number);

 }
}

It said, the difficulty is to calculate the position of the key, here I downloaded the demo inside the calculation of the corresponding changes, if you do not understand the android screen coordinates of the students please see the following article:

Reference:

Android coordinate system detailed

GitHub Download Address: Demo download

Thank you for reading, I hope to help you, thank you for your support for this site!