Example of Android仿iOS Digital Password Unlock Interface

As shown below:

Every Android developer knows that the most commonly used unlocking method for Android is the 9-square grid unlocking, while the most commonly used unlocking method for iOS is the numeric password unlocking. In the development process, we often need to combine Android and iOS. Sometimes, we need to make our unlocking interface look like the numeric keyboard on iOS.

Here, I have implemented a simulated iOS number password unlock interface. Here, I have adopted two methods to implement it, the first is to use the form of custom control, and the second is to use our layout to implement it. Here, I will focus on explaining the thought process of using the custom control form. As for the implementation method using layout files, I will not give a specific explanation. The specific code will be uploaded later for everyone to download and study.

Of course, my abilities are limited, and you may think that my method is not good. Then, please tell me, see how you think it should be implemented, and let's study and learn together.

Alright, no more chatter. Now let's talk about the implementation method of the custom control I use:

1.The most important thing is to implement a custom number keyboard (a custom View control):

1.draw the numbers

// draw the first row1,2,3
 canvas.drawText("1", first_x, 40 + first_y, paint);
 canvas.drawText("2", first_x * 2, 40 + first_y, paint);
 canvas.drawText("3", first_x * 3, 40 + first_y, paint);
 // draw the2row4,5,6
 canvas.drawText("4", first_x, 40 + first_y + first_x, paint);
 canvas.drawText("5", first_x * 2, 40 + first_y + first_x, paint);
 canvas.drawText("6", first_x * 3, 40 + first_y + first_x, paint);
 // draw the3row7,8,9
 canvas.drawText("7", first_x, 40 + first_y + first_x * 2, paint);
 canvas.drawText("8", first_x * 2, 40 + first_y + first_x * 2, paint);
 canvas.drawText("9", first_x * 3, 40 + first_y + first_x * 2, paint);
 // draw the4row 0
 canvas.drawText("0", first_x * 2, 40 + first_y + first_x * 3, paint);

2.After drawing the numbers, we need to add a layer of circle outside each number, draw the circle

//draw the circles in the first row
 canvas.drawCircle(first_x+10, 40 + first_y - 15, 50, paint);
 canvas.drawCircle(first_x*2+10, 40 + first_y - 15, 50, paint);
 canvas.drawCircle(first_x*3+10, 40 + first_y - 15, 50, paint);
 //draw the first2arranged circles
 canvas.drawCircle(first_x+10, 40 + first_y + first_x - 15, 50, paint);
 canvas.drawCircle(first_x*2+10, 40 + first_y + first_x - 15, 50, paint);
 canvas.drawCircle(first_x*3+10, 40 + first_y + first_x - 15, 50, paint);
 //draw the first3arranged circles
 canvas.drawCircle(first_x+10, 40 + first_y + first_x * 2 - 15, 50, paint);
 canvas.drawCircle(first_x*2+10, 40 + first_y + first_x * 2 - 15, 50, paint);
 canvas.drawCircle(first_x*3+10, 40 + first_y + first_x * 2 - 15, 50, paint);
 //draw the last circle
 canvas.drawCircle(first_x*2+10, 40 + first_y + first_x * 3 - 15, 50, paint);

3.After clicking the number, we give a different effect to let the user know that they have clicked this number. Here, I changed the color of the outer circle to yellow

//determine whether the number was clicked
 if(circle_x > 0 && circle_y > 0){//click
 if(type == 0){//Press refresh
 paint.setColor(Color.YELLOW);//set the pen color
 canvas.drawCircle(circle_x, circle_y, 50, paint);//draw a circle
 }else if(type == 1{//refresh after bounce
 paint.setColor(Color.WHITE);//set the pen color
 canvas.drawCircle(circle_x, circle_y, 50, paint);//draw a circle
 //After drawing is completed, reset
 circle_x = 0; circle_y = 0;
 }
 }

4.Finally, determine which number was clicked

/*
 * determine which number circle was clicked
 */
private void handleDown(float x, float y){
 //determine which column's data was clicked
 if(xs[0] - 50 <= x && x <= xs[0] + 50){//the first column
 //Get the horizontal coordinate of the center of the circle where clicked
 circle_x = xs[0];
 //Determine which row is clicked
 if(ys[0] - 50 <= y && ys[0] + 50 >= y){//the1row
 //Get the vertical coordinate of the center of the circle of the clicked number
 circle_y = ys[0];
 number = 1;//Set the clicked number
 }else if(ys[1] - 50 <= y && ys[1] + 50 >= y){//the2row
 //Get the vertical coordinate of the center of the circle of the clicked number
 circle_y = ys[1];
 number = 4;//Set the clicked number
 }else if(ys[2] - 50 <= y && ys[2] + 50 >= y){//the3row
 //Get the vertical coordinate of the center of the circle of the clicked number
 circle_y = ys[2];
 number = 7;//Set the clicked number
 }
 }else if(xs[1] - 50 <= x && x <= xs[1] + 50){//the2column
 //Get the horizontal coordinate of the center of the circle where clicked
 circle_x = xs[1];
 //Determine which row is clicked
 if(ys[0] - 50 <= y && ys[0] + 50 >= y){//the1row
 //Get the vertical coordinate of the center of the circle of the clicked number
 circle_y = ys[0];
 number = 2;//Set the clicked number
 }else if(ys[1] - 50 <= y && ys[1] + 50 >= y){//the2row
 //Get the vertical coordinate of the center of the circle of the clicked number
 circle_y = ys[1];
 number = 5;//Set the clicked number
 }else if(ys[2] - 50 <= y && ys[2] + 50 >= y){//the3row
 //Get the vertical coordinate of the center of the circle of the clicked number
 circle_y = ys[2];
 number = 8;//Set the clicked number
 }else if(ys[3] - 50 <= y && ys[3] + 50 >= y){//the4row
 //Get the vertical coordinate of the center of the circle of the clicked number
 circle_y = ys[3];
 number = 0;//Set the clicked number
 }
 }else if(xs[2] - 50 <= x && x <= xs[2] + 50){//the3column
 //Get the horizontal coordinate of the center of the circle where clicked
 circle_x = xs[2];
 //Determine which row is clicked
 if(ys[0] - 50 <= y && ys[0] + 50 >= y){//the1row
 //Get the vertical coordinate of the center of the circle of the clicked number
 circle_y = ys[0];
 number = 3;//Set the clicked number
 }else if(ys[1] - 50 <= y && ys[1] + 50 >= y){//the2row
 //Get the vertical coordinate of the center of the circle of the clicked number
 circle_y = ys[1];
 number = 6;//Set the clicked number
 }else if(ys[2] - 50 <= y && ys[2] + 50 >= y){//the3row
 //Get the vertical coordinate of the center of the circle of the clicked number
 circle_y = ys[2];
 number = 9;//Set the clicked number
 }
 }
 sendAccessEvent(R.string.numeric_keyboard_down);
 type = 0;//Press refresh
 //Draw the background circle when clicked
 invalidate();
}

Well, that's about it. By the way, above here4The control that displays the password also adopts the custom control method, using threads to implement the input numbers after1After a second, replace the input numbers with password characters. (Some people might say that setting the style of the system's EditText control to password can also achieve this, but I want to say that it is not possible, at least I have tried and it doesn't work)

The above example of the android仿ios digital password unlock interface shared by the editor is all the content I want to share with everyone. I hope it can give you a reference, and I also hope that everyone will support the Yell Tutorial.

Declaration: The content of this article is from the network, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)