Android Development Universal Rounded Corner ImageView

About the Author

Hello everyone, a new week has begun! This article is contributed by Ma Yunfei, sharing how to achieve rounded corners of images. I hope it can help friends in need.

Ma Yunfei's blog address:

http://blog.csdn.net/sw950729

text

I have nothing to do in the past month or two, so I started to package some things. Yesterday, my boss asked me to help him make a rounded corner picture. The idea is naturally different from the demo on the Internet.

The effect of the online demo:

It should be like this, but there are some problems. For example, your image itself has rounded corners? Or the image is too large and you want to reduce the display, but the display content is incomplete?

The effect I want to achieve is this:

The picture is ugly, sorry.

What this means is to use the minimum value of its width and height to make rounded corners for the width of the square. Of course, a rectangle can also be used, because I have tried it and there is no problem. You can try it yourself when the time comes.

Reference articles:

http://blog.csdn.net/lmj623565791/article/details/41967509

This is Xiangshen's article, but the effect is not what I want, because his drawing is from (0,0) point and then cutting the width and height to draw, not what I want to cut the middle and then draw.

The general code is similar to his. But I still deleted some useless code (haha, this is the feature of my copied code, why put it there if it is useless, it is an eyesore.)

Okay, here's the code. Initialization:

Here I used dp2px. This is to convert dp to px. There are a lot of codes online~:

Since it inherits ImageView, the onMeasure method is indispensable:

Here is the key point. If you don’t know about bitmapshader, take a look at this:

http://blog.csdn.net/aigestudio/article/details/41799811

The code for setting the bitmapshader is as follows:

If anyone has read the reference article I gave earlier, you can see that I modified the code of this class, which basically moved the starting point coordinates of the image from (0, 0) to the starting point I wanted.

As for why, we open the source code of ImageView and find Center_Crop. This code basically means to center the image.

Come, let's go to the source code:

We don't care how he calculates the scale, the key point is how to calculate his dx and dy.

Here I will give an example to calculate. The width and height of the drawable are (300, 200). The width and height of the view I want to draw are (200, 200). According to my idea, the drawing is from (50, 0) to (250, 250), not (0, 0) to (200, 200).

Without further ado, let's look at the calculation in the source code:

Let us draw a picture to explain all of this. After looking at the picture, you may understand.

The red box is what we are after, so the area 1 can be understood as gone. Destroyed. But the actual effect is like this:

The circle seems to be fine. Then you can see for yourself whether the left side of the rounded corner image is stretched. The stretching distance should be exactly the 50dp we calculated before. Because the 1 block in the above image no longer exists, the distance when you draw the image is the stretching distance. Now let's look at the -50dp image.

The part of 1 has been moved out. But it still exists, so the drawing will not show any stretching. Perfect~

After configuring the properties, the only thing left is the ondraw method. It is very simple, the code is as follows:

Of course you also have to consider onsizechanged, the code is not much:

OK. I'll add the attrs attribute here:

Now, a perfect, perfect rounded corner ImageVIew is solved. But it seems that something is missing. Right. Modify the rounded corners and the type by yourself, and it will be perfect after adding this.

Attach the code:

Now let's create a new XML file and put two pictures in it. One with rounded corners and one with a circle. Let's see how it works:

Add a scrollview to the outer layer of multiple pictures. OK. Let's take a look at the effect:

***~~

Change the size of the fillet by yourself. Change the type by yourself. Okay. That's all the main content for today. It took me more than 2 hours to sort it out. It's enough.