Use bitmapshader in Android to make a round head with its own border

The effects are as follows:

A brief introduction to bitmapshader

What shaders are, what kinds of shaders are there and how to use them do not belong to the scope of this article. Students who do not know much about this aspect are recommended to learn the basic use of shaders first.

The main function of bitmapshader is to fill the specified bitmap on the canvas through the paint object to achieve a series of effects. There are three modes to choose from

1. Clamp - stretch. Here, the last element of the picture is stretched and repeated. This effect will be more obvious when the picture is relatively small and the area to be drawn is relatively large.

In the first mock exam, 2.REPEAT - repeat is repeated in different directions. This pattern is not satisfied with the smaller picture. It will repeat the pattern in the horizontal direction.

3. Mirror - Flip. This mode is similar to repeat, but the repetition here is reversed and repeated, which is similar to the effect of origami.

We will use the clamp mode, because as long as we control the size of the graph, we can avoid stretching the image.

Specific implementation introduction

In order to customize the image, border width and color, we first create a new attrs XML file. The contents to be written in it are as follows

Of course, some other features can be added here. Now that we have defined the features we want to use, we need to parse these properties in the custom view and make use of them. The parsing process is as follows

It is worth noting that the parsing of the MSRC attribute is a drawable object, so we need to convert it into a bitmap object.

Next, we will use the obtained bitmap object to paint the circular head image. The initialization of bitmapshader and paint is as follows

Msrcbitmap is to appropriately reduce or enlarge the obtained image to meet our requirements for graphics. What are mwidth and mheight here? In fact, we are defining the view layout_ Width and layout_ The value passed in the height, but here I deal with them, that is, select the minimum value operation, so as to avoid the phenomenon that the image filling is not satisfied with the specified area because the width is greater than the height or the height is greater than the width. It is worth noting that to customize the view, you need to wrap_ Content is specially processed, otherwise the system will not display the view of this attribute. As for how to deal with it, you can take a look at the source code of this example. It is very simple. I believe many people know it at a glance or have known it for a long time.

Another point to emphasize is that mradius here, that is, the radius of the circle to be drawn, why subtract the width of the border by 2? You know, our circle is drawn according to the specified width or height of the view. If the circle we draw happens to be the inscribed circle of the specified view, where is the border? It must be drawn outside the view, so we can't see the complete border. Therefore, the significance of this subtraction is to make room for the border.

After the above operations, we have drawn the round head image. Let's draw the border. In fact, it's very simple. I just defined another paint object and drew a circle with it. The initialization operation of the brush is as follows

OK, now you can draw in the OnDraw () function, as shown below

In this way, the whole effect is completed. Let's see how to use it

Note that this sentence must be added to the container

Specific implementation of the core code

summary

The above is all about Android using bitmapshader to make its own framed round avatar. I hope this article can be helpful when you develop Android. If you have any questions, you can leave a message.