The author blog

http://www.jianshu.com/u/51d1fd73fb72

The source address

https://github.com/lygttpod/AndroidCustomView/blob/master/app/src/main/java/com/allen/androidcustomview/widget/PayPsdInp utView.java

directory

  1. preface

  2. rendering

  3. Analysis of existing works

  4. Implementation steps

  5. The specific implementation

    1. Draw the outer border:

    2. Draw a dividing line between passwords:

    3. Draw a solid circle instead of the typed character:

  6. conclusion

  7. Set pieces


preface

Before starting to read this article, let’s talk about the usage scenario. As we know, mobile payment has occupied 90% of our daily payment, mainly wechat Pay and Alipay Payment, and more and more apps have begun to add payment modules. No matter what kind of payment is used, there is a necessary step. That is to input the payment password (fingerprint payment again this will not discuss oh), so today to bring you a custom payment password input box design and implementation, while recording their own work encountered problems and solutions.


2

rendering

According to the convention we first look at alipay and wechat pay password input box style



3

Analysis of existing works

See this effect BELIEVE that many developers first reaction is to search online to see if there is a ready (ha ha, I am no exception oh), because this is a simple some view does not involve animation so there are many online related examples, I summarized here can be roughly divided into several categories:


  1. By way of layout

    Put six EditViews in the layout, one view in the middle of each input field to set the middle line, allow one EditView to enter only one character, listen for each, and let the other EditView take focus after each password is entered. This can be done, and the implementation is very simple, but there is a lot of code, and this way does not seem to force the grid is not high enough or not forced grid.


  2. Fully custom view (Inherited View)

    This is a little more complicated, the general process is, first listen to touch events, press the pop-up keyboard, and then listen to the soft keyboard, get each click on the keyboard corresponding to the string, and then draw 6 circles in the onDraw method, draw the outer border, and then the middle of the dividing line. There is a problem here is that every time you need to monitor the value of the soft keyboard and a series of operations, plus many Android models can not which soft keyboard problems. (It’s not practical, but it’s not cool.)


  3. Inherit from EditView to implement a custom view

    The general process is similar to the previous one, but we do not need to deal with the soft keyboard, less tedious and compatibility of the operation, while not losing force, ha ha.


So if you look at these three implementations, you probably already know what kind of implementation we’re going to use, which is a custom view that integrates with EditView, so you can use a lot of EditView properties



4

Implementation steps

  1. Draw the outer border (can be a right Angle or a rounded corner, we give the designer whatever he wants)

  2. Draw the dividing line between passwords (vertical line)

  3. Draws a solid circle instead of the entered character

  4. Listen on input characters for easy extension processing

  5. Implement some common external interface method calls


5

The specific implementation

1. Draw the outer border:



To draw the border we need to first know the width and height of the view, initialize the width and height with onSizeChanged, and then draw the rounded rectangle (default rectangle is passed with radius 0).


2. Draw a dividing line between passwords:


Since the dividing line must be equally divided, assuming that our password maximum input maxCount=6, then we only need to draw 5 dividing lines to calculate the dividing line coordinates

Compute the coordinates of the starting and ending points of the dividing line


So once we’ve done that let’s just run it and see what the border looks like

3, Draw a solid circle instead of the input character:


Here you listen for the EditView’s input, override the onTextChanged method to get the length of the input character, and then calculate the coordinate position of the center of each circle

When I write here, do you feel that the style problem is almost complete? When I run it, enter a few strings and see, MD is broken.

It can be seen from the picture that the corresponding solid circle is drawn, but the bottom line, cursor, character is still there, if you use this to cross must be cursed by the product.

This problem must be a code problem, we can solve the problem one by one, first set a transparent background color for the view, and then hide the cursor, and then run to see


This time the bottom line and cursor are seen, but the input character is still there, what is the problem?? We overwrote the onDraw method, but we still have the same character. Yeah, we’re just going to rewrite it, it’s got to have its own method, so we’re just going to get rid of all the redrawing methods in EditView, and we’re going to get really excited about that, and we’re going to do that in the OnDraw method

At this time can not suppress the inner small excitement run to see (ha ha, perfect solution to the problem)

Now the main function has been completed, the rest needs to encapsulate some methods for external calls, I have encapsulated several methods here, we know that there are two pages to set the payment password: A password, to reset your password, we according to the normal logic to monitor the password input box, enter the password after comparing to see is just a matter of equal, in order to facilitate future use don’t every time you go to write a lot of monitoring method, we directly after the internal packaging is good to use rise more convenient

So I’m going to go straight to the code, and the code is easy to understand

In actual use, we set it like this (is it a lot easier to use the process instantly?)

This is the end of the article, but our UI designers gave the renderings are not like this, not according to the common sense card (heart suddenly feel ten thousand grass mud horse)

Take a look at our renderings


He is not according to the constant play, but this is their consistent style, since they want to the effect that we can do, the whole process is still the same, the only difference is the dividing line between framing and password into the gap at the bottom of the line, it definitely won’t we, is it not draw six lines, each line of the starting point coordinates and on the left side of the center of the circle above calculation, I’m not going to describe it much but look at the code

That’s the end of the project. Look at the results

6

conclusion

The above wechat payment password and our realistic effect are encapsulated in PayPsdInputView, you can switch different styles according to your needs.

If other payment password input style will also be added in the future, the purpose is only a —-> next time to save time and effort.

You can choose from two styles


7

Set pieces

I believe that there must be some friends will say MDZZ, isn’t it simple to draw a rectangle, draw a circle, draw a line, what is good to write, anyone can do it. What I’m trying to say is that you’re right, it’s very simple, but don’t forget, it’s very simple, and when you go line by line, you’ll find a lot of problems that you might not have noticed. Just a few simple knowledge points are actually useless, the knowledge points used to reorganize into a functional module when you really master.

Come on, cousin, have a smoke to calm your temper


I would like to record the problems encountered in my project in this article for those who need similar functions. If you have a good suggestion, welcome to comment and point out, we discuss, learn, progress!

Please feel free to tip me if this article has been useful to you.

Reward

people gave a reward

Long press the QR code to transfer money to me

Please feel free to tip me if this article has been useful to you.

Due to apple’s new regulations, the appreciation function of the iOS version of wechat has been disabled, and qr code transfer can be used to support public accounts.

Read more