Detailed explanation of the method of drawing dashed lines by Android custom view

preface

To tell you the truth, when I first saw this requirement, my first reaction was that canvas only had drawLine method, not drawdashline method! How about this? Do I have to make a continuous traversal drawLine myself? In less than a second, I gave up the idea because it was disgusting. There must be some methods, but I don't know.

Drawing method

The simplest way is to use shapedrawable. For example, if you want to separate two controls with dashed lines, you can add a view to the two controls and give it a dashed background.

Well, that's it in theory, and it's very simple in implementation.

After writing, you can see the effect from the preview function of Android studio.

Is it simple? Wait, don't be happy too early. Run on the real machine to see the effect.

What the hell is this? It's clearly a dotted line. You can see from the preview on studio that the code is OK. In fact, this is because hardware acceleration is enabled by default on our current mobile phones, and dashgap does not support hardware acceleration. We just need to modify the view parameters and turn off the hardware acceleration.

Using shapedrawable to implement dashed lines is simple, but simplicity means inflexibility. For example, the dotted line is required to determine whether to add it according to the user's operation. In this case, it is not as convenient as using canvas.

As mentioned earlier, canvas only has the drawLine method, but there is no drawdashline method. But you should know that although canvas decides what to draw, how to draw is determined by the brush paint. Next, let's see how this magical brush can help us draw a straight line into a virtual one.

Paint has the method of setpatheffect (patheffect effect). There are five subclasses of patheffect: composepatheffect, cornerpatheffect, dashpatheffect, discretepatheffect, pathdashpatheffect and sumpatheffect. Dashpatheffect is the dotted line effect we need. You can try other effects yourself.

The creation of dashpatheffect requires two parameters, a float array, representing the length of solid lines and spaces. For example, if the parameter I give is new float [] {10,5}, then a unit of the dotted line is a solid line of 10 pixels plus a blank of 5 pixels, and then it is used as a unit to draw repeatedly to form a dotted line. If the set parameter is new float [] {10,5, 20,10}, one unit of the dotted line is the dotted line segment composed of 10 pixel solid line, 5 pixel blank, 20 pixel solid line and 10 pixel blank.

Another parameter represents offset. Generally, we can set it to 0. If you want to realize the animation effect of the dotted line, you can constantly change this value to make the dotted line move.

Then implement the custom view and replace it with the dotted line (view) in the XML file above.

After the code runs, it is found that the dotted line becomes a straight line, which has no effect at all. With the above experience of using shapedrawable, we have every reason to guess that this is caused by hardware acceleration. From the official document hardware acceleration, we can see that it is really caused by hardware acceleration.

(PS: in fact, the real situation is that I know that shapedrawable has no dotted line effect after customizing the view. It may also be caused by hardware acceleration.)

Modify the OnDraw method again. After running again, the dotted line appears normally.

Both shapedrawable and drawLine methods can achieve the effect of dotted lines, but their disadvantage is also obvious, that is, they do not support hardware acceleration. Because the above code is simple, it will not cause the problem of Caton, but if your custom view is very complex, for example, when the user draws a rectangular box, if the figure pulled out by the user is a square, we will draw a diagonal dotted line to remind the user. In this case, the disadvantages of not supporting hardware acceleration may appear. Fortunately, we have other methods to draw dotted lines. The setpatheffect method just doesn't support straight lines. Let's find out if there is another way to draw straight lines. Drawpath can draw various paths. Of course, it can also help us draw straight lines, although it's a little overqualified.

Let's see how the code is written again.

Set setlayertype (layer_type_software, null); After this code is removed, it can also draw a dotted line, which proves that it supports hardware acceleration.

So far, we have perfectly realized the drawing of dotted lines, but this article is not finished yet! The dotted line we draw is a solid rectangle. What if we require this to be composed of a solid circle? Or is it composed of other graphics? At this time, we can use pathdashpatheffect to realize it. See clearly, it is pathdashpatheffect rather than dashpatheffect! Pathdashpatheffect allows us to add a path to define the style of dashed lines. Let's change setpatheffect () to see the effect.

In fact, the dotted line composed of circles is also very beautiful. That's all for drawing the dotted line, but what if we want to add some effect to the dotted line? For example, the dotted line is completely opaque from the middle, while the two sides will gradually become transparent. Do you want to hit someone? It's not that you can't use it. Why do you ask so much! There's no way. Come on. Paint also has another method, setshader (shader shader). Shader can be understood as a shader. It has a subclass of LinearGradient, which can help us realize linear color change. Look at the code first.

To highlight the effect, change the color of the dotted line to black.

The effect is OK. Of course, it's not the scene applied to the picture. Well, this is really over. Although it is not difficult to draw dotted lines, there are still some noteworthy places (hardware acceleration), and then play it carefully. Although it is simple, you can still play some tricks.

summary

The above is the whole content of this article. I hope the content of this article can bring some help to Android developers. If you have any questions, you can leave a message. Thank you for your support for programming tips.