Round and rounded ImageView of Android custom controls

1、 What's the problem?

The problem comes from a very common scenario in app development - the user's Avatar should be displayed in a circle:

2、 What's the matter?

Witty, my first idea is to cut a mask picture with a transparent circle in the middle, the same surrounding color and the same size as the avatar, and cover it on the avatar. Ha ha ha!

On the premise of solid background color, this can really solve the problem, but what if the background is not so simple?

In this irregular context, there are two problems:

1) The background image is often adapted to the width scaling of the mobile phone, and the size of the avatar is fixed width height DP, so the fixed mask image can not ensure that it is consistent with the background pattern on different models.

2) In this non solid color background, if you want to adjust the position of the avatar one day, you have to change the picture mask again, which is really too difficult to maintain

So, since the avatar picture must be square, let ImageView round.

3、 Get to work

The basic idea is to customize an ImageView and draw a circular picture by rewriting the OnDraw method:

Analyze the code:

Canvas.drawcircle determines that the shape drawn is a circle, and the content of the circle is done through mpaintbitmap.setshader.

Among them, bitmapshader needs to set the way for bitmap to fill the ImageView (clamp: stretch edge, mirror: mirror, repeat: repeat the whole image).

In fact, it doesn't matter what is set here, because what we actually need is to scale the bitmap to be as large as ImageView, rather than the preset three effects.

So, don't forget to use mmatrix.setscale and mshader.setlocalmatrix together to zoom the picture.

4、 More ways to play - support borders

Look at the effect picture below. What should I do if I want to add a border to the round head?

Look at the code, adding a border is actually drawing a round edge with solid solid color paint, and then drawing the original avatar on this basis.

There are three points to note:

1) . the radius of the circle frame is not radius, but radius - mborderwidth / 2.0f. Imagine drawing a line with a pen. The line is actually drawn in the white circle on the right, but it is very thick.

2) . on the basis that the ImageView size remains unchanged, the actual size of the avatar is smaller than that without a border, so the width of the border should be removed during mmatrix.setscale.

3) When drawing the avatar bitmap, you can't directly canvas.drawcircle (radius, mpaintbitmap), so you will find that the right and lower edges of the avatar are stretched (right picture)

Why? Because paint starts painting based on the upper left corner by default, the actual area of the avatar is the red box in the right figure, and the parts beyond the red box (right and below the circle) are naturally stretched along the edge by the tilemode.clamp effect.

Therefore, it is necessary to move the position of the coordinate system and adjust the center of the circle in order to draw the avatar in the correct area (green box in the right figure).

5、 More ways to play -- support XML configuration

Now that you have a border, what should you do if you want to configure the width and color of the border?

Basically, there are two ideas:

1) . add a set interface to imageviewplus. After setting, use invalidate(); Redraw it;

2) . some custom attributes can be configured in XML, which will be much more convenient to use.

Let's focus on supporting XML configuration custom attributes.

To support XML configuration of custom attributes for custom controls, you first need to define attributes in \ res \ values:

Then read these custom attributes in the constructor of imageviewplus:

Use custom attributes in XML layouts:

6、 More ways to play - rounded ImageView

After completing the circular ImageView and the corresponding border, how to implement the following rounded ImageView?

In fact, the principle is the same. Just change the correspondence of canvas.drawcircle to canvas.drawroundrect. Paste the code directly:

7、 Demo source code

Android custom circular ImageView

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.