Android 自定义圆形图片和文本

Android自定义圆形图片和文本

http://blog.csdn.net/zapperbot/article/details/46872923?ref=myread（转）

一、首先是圆形文本，实现如下样式

1、创建样式文件drawable/setting_bg.xml和download_bg.xml

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="oval" android:useLevel="false" >  
4.     <solid android:color="@color/red" />  
5.     <stroke  
6.         android:width="1dp"  
7.         android:color="@android:color/white" />  
8. </shape>  

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="oval" android:useLevel="false" >  
4.     <solid android:color="@color/green" />  
5.     <stroke  
6.         android:width="1dp"  
7.         android:color="@android:color/white" />  
8. </shape>  

2、创建布局文件

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.         android:gravity="center"  
4.         android:orientation="horizontal"  
5.         android:layout_width="fill_parent"  
6.         android:layout_height="fill_parent"  
7.         android:background="@color/gray_pressed">  
8.     <TextView  
9.         android:id="@+id/text1"  
10.         android:layout_width="80dp"  
11.         android:layout_height="80dp"  
12.         android:textSize="20sp"  
13.         android:layout_marginTop="30dp"  
14.         android:textColor="@android:color/white"   
15.         android:text="@string/biz_font_download"  
16.         android:background="@drawable/download_bg"  
17.         android:gravity="center_horizontal|center_vertical"/>  
18.     <TextView  
19.         android:id="@+id/text2"  
20.         android:layout_width="80dp"  
21.         android:layout_height="80dp"  
22.         android:textSize="20sp"  
23.         android:layout_marginLeft="30dp"  
24.         android:layout_marginTop="30dp"  
25.         android:textColor="@android:color/white"   
26.         android:text="@string/base_plugin_setting"  
27.         android:background="@drawable/setting_bg"  
28.         android:gravity="center_horizontal|center_vertical"/>  
29. </LinearLayout>  

二、圆形图片，如下样式

1、创建values/attrs.xml，新增三个属性：border_thickness-为边框宽度，border_inside_color-内边框颜色，border_outside_color-外边框颜色

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <declare-styleable name="RoundImageView">   
4.         <attr name="border_thickness" format="dimension" />   
5.         <attr name="border_inside_color" format="color" />   
6.         <attr name="border_outside_color" format="color"></attr>   
7.     </declare-styleable>  
8. </resources>  

2、自定义ImageView

[java]  view plain copy print ?

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

3、创建布局文件

[html]  view plain copy print ?

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="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:background="@drawable/home_bg"  
7.     android:orientation="vertical">  
8.       
9.     <com.settings.RoundImageView  
10.         android:id="@+id/btnSettings"  
11.         android:layout_marginRight="5dp"  
12.         android:layout_width="110dp"  
13.         android:layout_height="110dp"  
14.         android:scaleType="centerCrop"  
15.         android:src="@drawable/back_btn"    
16.         imagecontrol:border_inside_color="#fff7f2e9"    
17.         imagecontrol:border_outside_color="#ffd5d1c8"    
18.         imagecontrol:border_thickness="2dp"/>  
19.                       
20. </LinearLayout>  

局部文件中要加入xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"，imagecontrol:border_inside_color、imagecontrol:border_outside_color、imagecontrol:border_thickness三个属性是在attrs.xml中定义的

4、在Activity中设置头像

[java]  view plain copy print ?

1. ImageView btnSettings = (ImageView) findViewById(R.id.btnSettings);  
2. btnSettings.setImageResource(R.drawable.i_touxiang);  

到此整个效果都已经实现了，其中圆形文本直接通过设置样式就可以，而圆形图片则需要我们通过自定ImageView来实现。

版权声明：★★★★★★★★ 本文为博主原创文章，如需转载请注明出处：http://blog.csdn.net/zapperbot ★★★★★★★★