Android custom view implementation angle selector

First, let's take a look at the effect of Google photos

Achieve the final effect:

Realization idea

Carefully observe this effect, first analyze the composition structure, and I divide it into three parts:

1. A point representing a scale

2. Number above corresponding point

3. The current scale and triangle in the center of the control

It can be seen that the constituent elements are very simple and do not involve pictures and drawable, so you only need to draw them with canvas.

Next, observe the gesture operation and check the changes made by the control as the finger slides. The changes here are:

1. When the finger is pressed up, some areas become bright (some areas are visible areas)

2. As the finger slides, the corresponding number moves and the current angle value changes

3. The closer to the center, the lower the transparency, and the point below 0 ° is larger

Well, we have thoroughly analyzed this control. According to the analysis, first we need to draw the constituent element in the OnDraw () method of view, and then we need to make it move. Listen for gestures in the ontouchevent () method, change some values and redraw our view. It is obvious that what we want to change must be the value of the current angle.

Do it

Now that you have an idea, you should start at once, or what if you forget it next time?

Draw point

First, draw the points first. The position is very simple. It must start from the center of the view and draw points from left to right.

Where mpointcount is the number of points to draw, which is 51 by default. Mpointmargin is the margin between two points, and the length is the width of view divided by the number of points.

Look at the effect

Well, I succeeded in drawing the points.

Draw the number above the scale

Now that we have drawn the points, according to our ideas, we should draw the numbers to the correct position. Of course, drawing the numbers is very simple. The difficulty here is to find the correct position.

First of all, our numbers will move. With different current angles, the size and position of the displayed numbers are different. But there is no doubt that this position (x coordinate) must be a function of the current angle. As for the specific function, I believe you can quickly analyze it. After all, it is only a linear relationship. Here is the code directly.

According to our effect, we need to draw a scale of - 90 ° ~ 90 °, where - 45 ° ~ 45 ° is the reachable angle, and the other angles are not reachable.

Well, look at the effect. You can see that the numbers are drawn in the correct position.

Draw current angle

This is super simple, the position is also very easy to determine, and the path of the upper triangle is also very easy to know. However, it should be noted that when the current angle is about 0 °, the 0 ° scale should not be displayed.

Another small detail is that the closer to the center, the lower the transparency. That is, we need to change the alpha value of the brush paint according to the position from the center, and then draw the dots.

At this time, it was very similar, but it couldn't move.

Move

We have drawn all the parts to be drawn. It's time to move the view. The touch event of the angle selector is not complex. We only need to change the current angle value according to the sliding distance and redraw the view when we move the finger to see the moving effect. Why? Because when we draw numbers before, the position is determined by the current angle, so as soon as it changes, the position of numbers will also change.

Of course, you also need to deal with some details. For example, when the number moves, a certain range near the center will disappear (the transparency becomes 0). These are easy to control. Just change the transparency of the brush, but it is precisely the control of the details that can make a user-defined view with satisfactory results. Finally, let's look at the effect.

extend

As like as two peas, the angle selector we have made here is almost the same as that of Google Photos, but that's enough. No, it's not enough. We have to continue to expand. Why can we only reach plus or minus 45 °, we need to choose all the ranges freely, that is - 180 ° ~ 180 °, and then the digital color and point color should be freely selected. So we need to extend our angle selector to expose all changeable interfaces.

Finally, take a look at our various angle selectors, which are still very good-looking ~

summary

The above is the whole content of this article. Compared with the previous two, this custom view is undoubtedly much simpler. It only uses the most basic drawing knowledge and event mechanism, but the effect looks good. Hey, hey, anyway, I especially like this angle selector, although I don't know where I can use it except the cutting page. Therefore, using the simplest knowledge can also combine more complex effects. I hope you can give full play to your imagination and customize more fun, practical and cool controls together. I hope this article is helpful to you, even if it's just some inspiration, it's worth it. If you have any questions, you can also leave a message.