"Android" Custom circular ImageView (round head to specify size)

recently in the UI of the imitation hand Q, which is often used in this is the round head, see in the Android picture of the several ways to draw a picture of this article, understand the principle of making this kind of avatar. But there is still a shortage of methods in the inside to change the size of the picture according to the actual demand, This means that the original artwork is large, and the converted image is large, which is clearly not in line with our actual project requirements. So I made some improvements to the first method that I introduced, so that it can specify the size of the image directly in the XML.Gross steps

1. Center the original image into a square
2. Scales the square according to the specified width
3. Cut into a circle

effect

Code Implementation

Package com.demos.tencent_qq_ui. Customerview;import Android.content.Context; Import Android.graphics.Bitmap; Import Android.graphics.canvas;import Android.graphics.matrix;import Android.graphics.paint;import Android.graphics.porterduff;import Android.graphics.porterduffxfermode;import Android.graphics.Rect;import Android.graphics.drawable.bitmapdrawable;import Android.graphics.drawable.drawable;import Android.util.AttributeSet; Import Android.widget.ImageView; /** * Created by mummyding on 15-8-7.    */public class Avatarimageview extends ImageView {private paint paint = new paint ();    Public Avatarimageview (Context context) {super (context);    } public Avatarimageview (context context, AttributeSet Attrs) {Super (context, attrs);    } public Avatarimageview (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle);        }//The avatar is scaled by private Bitmap Scalebitmap (Bitmap Bitmap) {int width = getwidth (); Make sure you turn it into float. Otherwise, it may be that the error of scale is 0 because of insufficient precision float scale = (float) width/(float) bitmap.getwidth ();        Matrix matrix = new Matrix ();        Matrix.postscale (scale, scale);    Return Bitmap.createbitmap (Bitmap, 0, 0, bitmap.getwidth (), Bitmap.getheight (), Matrix, True);        }//Crop the original image to a square private Bitmap dealrawbitmap (Bitmap Bitmap) {int width = bitmap.getwidth ();        int height = bitmap.getheight ();  Get width int minWidth = width > height?        Height:width;        Computes the range of the square int lefttopx = (width-minwidth)/2;        int lefttopy = (height-minwidth)/2;        Cut into square Bitmap Newbitmap = Bitmap.createbitmap (Bitmap,lefttopx,lefttopy,minwidth,minwidth,null,false);    Return Scalebitmap (NEWBITMAP);        } @Override protected void OnDraw (canvas canvas) {drawable drawable = getdrawable ();            if (null! = drawable) {Bitmap Rawbitmap = ((bitmapdrawable) drawable). Getbitmap (); Handle Bitmap turn into square Bitmap NEWbitmap = Dealrawbitmap (Rawbitmap);            Convert Newbitmap to circular Bitmap Circlebitmap = Toroundcorner (Newbitmap, 14);            Final rect rect = new Rect (0, 0, circlebitmap.getwidth (), Circlebitmap.getheight ());            Paint.reset ();        Draw onto the canvas canvas.drawbitmap (circlebitmap, rect, rect, paint);        } else {Super.ondraw (canvas);  }} private Bitmap Toroundcorner (Bitmap Bitmap, int pixels) {//specified as argb_4444 can reduce picture size Bitmap output =        Bitmap.createbitmap (Bitmap.getwidth (), Bitmap.getheight (), Bitmap.Config.ARGB_4444);        Canvas canvas = new canvas (output);        final int color = 0xff424242;        Final rect rect = new Rect (0, 0,bitmap.getwidth (), Bitmap.getheight ());        Paint.setantialias (TRUE);        Canvas.drawargb (0, 0, 0, 0);        Paint.setcolor (color);        int x = Bitmap.getwidth ();        Canvas.drawcircle (X/2, X/2, X/2, paint); Paint.setxfermode (New Porterduffxfermode (PorterduFf.        mode.src_in));        Canvas.drawbitmap (Bitmap, rect, rect, paint);    return output; }}

you can then directly use it directly in XML, just like any other view.For example

<com.demos.tencent_qq_ui. Customerview.avatarimageview       android:layout_width= "96dip"  <!--self-specifying size--       android:layout_ height= "96dip"       android:layout_centerhorizontal= "true"       android:src= "@drawable/avatar"  <!-- Put pictures here--       />

In this way, the image displayed on the interface is circular.but I still have a shortage here is not to check the size of the original picture, if you put a picture of high-definition, it is likely to crash off. For this, my current solution is the Google official tutorialLoading Large Bitmaps efficientlybut it's the principle is not not to load the picture, but first calculate the scale value according to the size of the original image, and then read the picture according to the scale value (it is considered to compress when reading ...). But this method needs to provide the view ID, which means to give Avatarimageview an ID, and then a avatarimageview to correspond to a view (as I understand it) In this case, Avatarimageview cannot be reused. It can be troublesome to use this in many places in the project. I asked for it in StackOverflow, but no one has answered it yet t_tHow do I bitmap (set in src) compress?

"Reprint Please specify the source"

Author:mummyding

Source: http://blog.csdn.net/u012560612/article/category/5651761

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

"Android" Custom circular ImageView (round head to specify size)