Android high imitation wechat payment password input control

Like wechat payment password control, it is a common function in app. Recently, the project needed this function, so it realized this function. As always, shooting needs to find the right angle and become a need to clarify ideas. For this "small and beautiful" control, our thinking should be like this.

I. dynamically load the number of passwords to be entered through the code.

II. Use GridView simulation to generate an input numeric keyboard, and pop it out from the bottom of the screen according to habits.

III. conduct event monitoring on the input numeric keypad, fill the input number into the password box, and conduct event callback when the length of your input password is the same.

This mind map should look like this:

First, we need to dynamically load the password box according to the requirements, and the corresponding code is as follows:

Here, we set the password length to 6, add the six password box controls to the parent control containing these controls, and there is a separate control in each password control. And put each password input control into the control array so that we can carry out the next operation.

Then, we use GridView to generate a 12 grid analog digital keyboard. In this way, the analog keyboard looks like this:

The source code should look like this:

Load the data on the simulated keyboard as 0-9 and X, and then fill the data into the GridView control through an adapter. These are the old routines of old drivers. According to the Convention, the simulated keyboard should pop up from the bottom of the screen. What I do here is to attach the GridView to the popupwindow, and then pop up from the bottom of the screen. The corresponding codes are as follows:

When the control is loaded, it pops up.

Finally, what we need to do is to monitor the simulated keyboard and fill the input of the simulated keyboard into the password box. What seems to be very tall is actually monitoring the onItemClick event of GridView. The corresponding code is as follows:

If the user clicks the number 0-9, it will be filled in the password box. If the user clicks the backspace key, the content of the corresponding password box will be deleted. See, the text box array list used above comes in handy. It is worth pointing out that because the backspace click effect is different, I use code to set its style here.

When the user finishes entering the last password box, the callback will be carried out. The corresponding code is:

After a lot of tossing and turning, it's done. The final effect is as follows:

Source code download: http://xiazai.jb51.net/201608/yuanma/Android-MyPayUI (jb51.net).rar

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.