Android gesture password view learning notes (II)

Let's continue with the content in our last blog. Ha, in the previous Android gesture password view note (I), we have implemented our indicatorview indicator view:

Let's implement our gesture password view:

Implementation idea:

1. We still need to get some attributes that users need to display (rows, columns, selected pictures, unselected pictures, incorrectly displayed pictures, width and color of connecting lines...).

2. We need to judge whether the current finger position is in a certain point according to the change of gesture, set the point to the selected state, and then record the two points every time we move to two points (i.e. a line segment).

3. Finally, draw all the recorded points (all line segments) on canvas, and record the num value corresponding to each point (that is, the password we set).

4. When the finger is raised, the callback method is executed to pass the encapsulated password set to the caller. OK ~ now that we have the right idea, let's realize the following:

First, define an attrs.xml file (for convenience, I will continue to define it directly in the attr of indicatorview implemented in the previous blog):

Then, the first view called gesturecontentview inherits the ViewGroup and re constructs three methods:

Then we need to get the custom attribute we passed in in the constructor with three parameters:

You will find that I call setwillnotdraw (false) here; Method, as the name implies, the OnDraw method will not be called until it is set to false. Of course, you can also rewrite the dispatchdraw method (I won't talk about the specific reason. Check online or see the source code of view).

Then, after we get what we need, we need to know that the size of each point is the same as our own size (the same routine, if you don't understand, read a blog):

Well, we all know the size of the view and the size of the points. Then we need to add our points according to the number of rows and columns we pass in:

First, add our points (i.e. sub views) in the onsizechanged method, because onsizechanged will be adjusted many times, and then avoid adding sub views repeatedly. We made a judgment and added sub views the first time when child = 0:

Number of added = number of rows * number of columns, and then add the created image to the current ViewGroup:

And all the point information is stored in a called points. Add (point); In the collection of, the gesturepoint object is stored in the collection:

Now that we have added many points, what we need to do is to arrange the positions of our points according to the rows and columns (override the onlayout method to place the positions of sub views):

Then we add our view and run the code:

design sketch:

Here, we are getting closer to our goal. The next thing to do is to rewrite the ontouchevent method, and then make corresponding changes through the sliding position of the finger:

1. We need to check whether the finger is within a certain point according to the position of the finger to judge whether the point is selected. If it is not selected, change its state to the selected state.

2. When a finger connects two points, we need to judge whether there is a point in the middle of the two points. For example, if our finger connects the two points (0, 0) and (2, 2), we need to judge whether there is a point (1, 1) in the middle. Then, you need to save the line segments (0, 0) ~ (1, 1) and line segments (1, 1) ~ (2, 2) in the set, and then the next time you draw a line segment, the starting point will be (2, 2) points.

3. Without selecting a point, we store the num value (password) corresponding to the point in the set.

4. When executing action_ In the up event (that is, when the finger is raised), the callback method passes the stored collection data to the caller.

Explain the getbetweenpoints method (to be clear, ha: I'm poor in math, and children's shoes with good methods have abused ha. Remember to comment and tell me, thank you ~ ~ I think my method is stupid, hee hee ~!):

All right!! The code is parsed here. If you don't understand children's shoes, drag the code and run.

In addition to a few difficult places, other places are also very simple things? Does something that used to look very tall feel soeasy now?? Ha ha ~ ~

Finally, the project GitHub link is given: https://github.com/913453448/GestureContentView

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.