In the actual development, we often encounter such a demand, that is, no matter what the image is long, we want it to show round, round with a border, rectangle and border, with rounded rectangles, and so on, Lib and Demo:https://github.com/mapleyuan/roundimageview. The effect is as follows, we are interested can be down to use, found that there is any problem also welcome to me.
I'll probably talk about the implementation below.
The first of course is inheriting ImageView, overriding the OnDraw () method. Let's take a look at the implementation of OnDraw:
protected void OnDraw (canvas canvas) {
Canvas.save ();
DrawPath ();
Canvas.clippath (MPath);
Super.ondraw (canvas);
Canvas.restore ();
Drawcanvas (canvas);
}
We call a method of drawing the area first, then look at the implementation of this method:
private void DrawPath () {
....................................................
Omit non-critical parts
....................................................
Case CIRCLE:
float R = math.min (width, height)/2;
Mpath.reset ();
Mpath.addcircle (WIDTH/2, HEIGHT/2, R, Path.Direction.CW);
Mpath.close ();
Break
....................................................
Omit non-critical parts
....................................................
}
As you can see, the Addcircle method is called and a circle is drawn clockwise. Back to the OnDraw method, the canvas's Clippath method was called to crop the view, and then the drawing would be equivalent to covering a layer of masks. OK, here we have achieved a round head. If you're not satisfied with this, like adding a border,
Continue to look down and find the Drawcanvas method called
private void Drawcanvas (canvas canvas) {
int width = getwidth ();
int height = getheight ();
if (mborderwidth <= 0) {
Return
}
Mborderpaint.setcolor (Mbordercolor);
Mborderpaint.setstrokewidth (Mborderwidth);
Mborderpaint.setstyle (Paint.Style.STROKE);
Mborderpaint.setantialias (TRUE);
....................................................
Omit non-critical parts
....................................................
Case CIRCLE:
float R = math.min (width, height)/2;
Canvas.drawcircle (WIDTH/2, HEIGHT/2, R-MBORDERWIDTH/2, Mborderpaint);
Break
....................................................
Omit non-critical parts
....................................................
}
Draw a circle in the canvas by setting the width, color, and finally the brush. At this point, we basically implement the circular imgeview function, similar to other shapes. More code details Welcome to Https://github.com/mapleyuan/RoundImageView) and welcome to the point of concern. Follow-up will be the usual common components put up, welcome to follow the download, thank you ~
Round avatars and some common requirements shapes custom ImageView components