Android 圆形图片

Android自定义圆形图片，可设置最多两个的外边框。包括从网络获取图片显示。

解决图片锯齿问题。

解决图片变形问题。

原始图片：

核心代码：

[java]  view plain copy

1. /** 
2.  * 圆形ImageView，可设置最多两个宽度不同且颜色不同的圆形边框。 
3.  *  
4.  * @author Alan 
5.  */  
6. public class RoundImageView extends ImageView {  
7.     private int mBorderThickness = 0;  
8.     private Context mContext;  
9.     private int defaultColor = 0xFFFFFFFF;  
10.     // 如果只有其中一个有值，则只画一个圆形边框  
11.     private int mBorderOutsideColor = 0;  
12.     private int mBorderInsideColor = 0;  
13.     // 控件默认长、宽  
14.     private int defaultWidth = 0;  
15.     private int defaultHeight = 0;  
16.   
17.     public RoundImageView(Context context) {  
18.         super(context);  
19.         mContext = context;  
20.     }  
21.   
22.     public RoundImageView(Context context, AttributeSet attrs) {  
23.         super(context, attrs);  
24.         mContext = context;  
25.         setCustomAttributes(attrs);  
26.     }  
27.   
28.     public RoundImageView(Context context, AttributeSet attrs, int defStyle) {  
29.         super(context, attrs, defStyle);  
30.         mContext = context;  
31.         setCustomAttributes(attrs);  
32.     }  
33.   
34.     private void setCustomAttributes(AttributeSet attrs) {  
35.         TypedArray a = mContext.obtainStyledAttributes(attrs,  
36.                 R.styleable.roundedimageview);  
37.         mBorderThickness = a.getDimensionPixelSize(  
38.                 R.styleable.roundedimageview_border_thickness, 0);  
39.         mBorderOutsideColor = a  
40.                 .getColor(R.styleable.roundedimageview_border_outside_color,  
41.                         defaultColor);  
42.         mBorderInsideColor = a.getColor(  
43.                 R.styleable.roundedimageview_border_inside_color, defaultColor);  
44.     }  
45.   
46.     @Override  
47.     protected void onDraw(Canvas canvas) {  
48.         Drawable drawable = getDrawable();  
49.         if (drawable == null) {  
50.             return;  
51.         }  
52.   
53.         if (getWidth() == 0 || getHeight() == 0) {  
54.             return;  
55.         }  
56.         this.measure(0, 0);  
57.         if (drawable.getClass() == NinePatchDrawable.class)  
58.             return;  
59.         Bitmap b = ((BitmapDrawable) drawable).getBitmap();  
60.         Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);  
61.         if (defaultWidth == 0) {  
62.             defaultWidth = getWidth();  
63.   
64.         }  
65.         if (defaultHeight == 0) {  
66.             defaultHeight = getHeight();  
67.         }  
68.         // 保证重新读取图片后不会因为图片大小而改变控件宽、高的大小（针对宽、高为wrap_content布局的imageview，但会导致margin无效）  
69.         // if (defaultWidth != 0 && defaultHeight != 0) {  
70.         // LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(  
71.         // defaultWidth, defaultHeight);  
72.         // setLayoutParams(params);  
73.         // }  
74.         int radius = 0;  
75.         if (mBorderInsideColor != defaultColor  
76.                 && mBorderOutsideColor != defaultColor) {// 定义画两个边框，分别为外圆边框和内圆边框  
77.             radius = (defaultWidth < defaultHeight ? defaultWidth  
78.                     : defaultHeight) / 2 - 2 * mBorderThickness;  
79.             // 画内圆  
80.             drawCircleBorder(canvas, radius + mBorderThickness / 2,  
81.                     mBorderInsideColor);  
82.             // 画外圆  
83.             drawCircleBorder(canvas, radius + mBorderThickness  
84.                     + mBorderThickness / 2, mBorderOutsideColor);  
85.         } else if (mBorderInsideColor != defaultColor  
86.                 && mBorderOutsideColor == defaultColor) {// 定义画一个边框  
87.             radius = (defaultWidth < defaultHeight ? defaultWidth  
88.                     : defaultHeight) / 2 - mBorderThickness;  
89.             drawCircleBorder(canvas, radius + mBorderThickness / 2,  
90.                     mBorderInsideColor);  
91.         } else if (mBorderInsideColor == defaultColor  
92.                 && mBorderOutsideColor != defaultColor) {// 定义画一个边框  
93.             radius = (defaultWidth < defaultHeight ? defaultWidth  
94.                     : defaultHeight) / 2 - mBorderThickness;  
95.             drawCircleBorder(canvas, radius + mBorderThickness / 2,  
96.                     mBorderOutsideColor);  
97.         } else {// 没有边框  
98.             radius = (defaultWidth < defaultHeight ? defaultWidth  
99.                     : defaultHeight) / 2;  
100.         }  
101.         Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius);  
102.         canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight  
103.                 / 2 - radius, null);  
104.     }  
105.   
106.     /** 
107.      * 获取裁剪后的圆形图片 
108.      *  
109.      * @param radius 
110.      *            半径 
111.      */  
112.     public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {  
113.         Bitmap scaledSrcBmp;  
114.         int diameter = radius * 2;  
115.   
116.         // 为了防止宽高不相等，造成圆形图片变形，因此截取长方形中处于中间位置最大的正方形图片  
117.         int bmpWidth = bmp.getWidth();  
118.         int bmpHeight = bmp.getHeight();  
119.         int squareWidth = 0, squareHeight = 0;  
120.         int x = 0, y = 0;  
121.         Bitmap squareBitmap;  
122.         if (bmpHeight > bmpWidth) {// 高大于宽  
123.             squareWidth = squareHeight = bmpWidth;  
124.             x = 0;  
125.             y = (bmpHeight - bmpWidth) / 2;  
126.             // 截取正方形图片  
127.             squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,  
128.                     squareHeight);  
129.         } else if (bmpHeight < bmpWidth) {// 宽大于高  
130.             squareWidth = squareHeight = bmpHeight;  
131.             x = (bmpWidth - bmpHeight) / 2;  
132.             y = 0;  
133.             squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,  
134.                     squareHeight);  
135.         } else {  
136.             squareBitmap = bmp;  
137.         }  
138.   
139.         if (squareBitmap.getWidth() != diameter  
140.                 || squareBitmap.getHeight() != diameter) {  
141.             scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter,  
142.                     diameter, true);  
143.   
144.         } else {  
145.             scaledSrcBmp = squareBitmap;  
146.         }  
147.         Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(),  
148.                 scaledSrcBmp.getHeight(), Config.ARGB_8888);  
149.         Canvas canvas = new Canvas(output);  
150.   
151.         Paint paint = new Paint();  
152.         Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(),  
153.                 scaledSrcBmp.getHeight());  
154.   
155.         paint.setAntiAlias(true);  
156.         paint.setFilterBitmap(true);  
157.         paint.setDither(true);  
158.         canvas.drawARGB(0, 0, 0, 0);  
159.         canvas.drawCircle(scaledSrcBmp.getWidth() / 2,  
160.                 scaledSrcBmp.getHeight() / 2, scaledSrcBmp.getWidth() / 2,  
161.                 paint);  
162.         paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));  
163.         canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);  
164.         // bitmap回收(recycle导致在布局文件XML看不到效果)  
165.         // bmp.recycle();  
166.         // squareBitmap.recycle();  
167.         // scaledSrcBmp.recycle();  
168.         bmp = null;  
169.         squareBitmap = null;  
170.         scaledSrcBmp = null;  
171.         return output;  
172.     }  
173.   
174.     /** 
175.      * 边缘画圆 
176.      */  
177.     private void drawCircleBorder(Canvas canvas, int radius, int color) {  
178.         Paint paint = new Paint();  
179.         /* 去锯齿 */  
180.         paint.setAntiAlias(true);  
181.         paint.setFilterBitmap(true);  
182.         paint.setDither(true);  
183.         paint.setColor(color);  
184.         /* 设置paint的　style　为STROKE：空心 */  
185.         paint.setStyle(Paint.Style.STROKE);  
186.         /* 设置paint的外框宽度 */  
187.         paint.setStrokeWidth(mBorderThickness);  
188.         canvas.drawCircle(defaultWidth / 2, defaultHeight / 2, radius, paint);  
189.     }  
190.   
191. }  

布局文件：

[html]  view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:background="#fffffdfa"  
7.     android:orientation="vertical"  
8.     android:paddingBottom="@dimen/activity_vertical_margin"  
9.     android:paddingLeft="@dimen/activity_vertical_margin"  
10.     android:paddingRight="@dimen/activity_vertical_margin"  
11.     android:paddingTop="@dimen/activity_vertical_margin"  
12.     tools:context=".MainActivity" >  
13.   
14.     <LinearLayout  
15.         android:layout_width="match_parent"  
16.         android:layout_height="wrap_content"  
17.         android:orientation="horizontal" >  
18.   
19.         <com.alan.roundimageview.RoundImageView  
20.             android:id="@+id/roundImage_network"  
21.             android:layout_width="60dp"  
22.             android:layout_height="60dp"  
23.             android:src="@drawable/default_portrait" />  
24.   
25.         <com.alan.roundimageview.RoundImageView  
26.             android:id="@+id/roundImage_one_border"  
27.             android:layout_width="80dp"  
28.             android:layout_height="80dp"  
29.             android:layout_marginLeft="10dp"  
30.             android:layout_marginRight="10dp"  
31.             imagecontrol:border_outside_color="#FFFF0000"  
32.             imagecontrol:border_thickness="2dp"  
33.             android:src="@drawable/default_portrait" />  
34.   
35.         <com.alan.roundimageview.RoundImageView  
36.             android:id="@+id/roundImage_two_border"  
37.             android:layout_width="120dp"  
38.             android:layout_height="120dp"  
39.             android:scaleType="centerCrop"  
40.             imagecontrol:border_inside_color="#fff7f2e9"  
41.             imagecontrol:border_outside_color="#ffd5d1c8"  
42.             imagecontrol:border_thickness="2dp"   
43.             android:src="@drawable/default_portrait"/>  
44.     </LinearLayout>  
45.   
46.     <LinearLayout  
47.         android:layout_width="match_parent"  
48.         android:layout_height="wrap_content"  
49.         android:layout_marginTop="10dp"  
50.         android:orientation="horizontal" >  
51.   
52.         <com.alan.roundimageview.RoundImageView  
53.             android:layout_width="60dp"  
54.             android:layout_height="60dp"  
55.             android:src="@drawable/default_portrait" />  
56.   
57.         <com.alan.roundimageview.RoundImageView  
58.             android:layout_width="80dp"  
59.             android:layout_height="80dp"  
60.             android:layout_marginLeft="10dp"  
61.             android:layout_marginRight="10dp"  
62.             imagecontrol:border_outside_color="#FFFF0000"  
63.             imagecontrol:border_thickness="2dp"   
64.             android:src="@drawable/default_portrait"/>  
65.   
66.         <com.alan.roundimageview.RoundImageView  
67.             android:layout_width="120dp"  
68.             android:layout_height="120dp"  
69.             android:scaleType="centerCrop"  
70.             imagecontrol:border_inside_color="#fff7f2e9"  
71.             imagecontrol:border_outside_color="#ffd5d1c8"  
72.             imagecontrol:border_thickness="2dp"  
73.             android:src="@drawable/default_portrait" />  
74.     </LinearLayout>  
75.   
76. </LinearLayout>  

源代码下载