Android自定义带边框的圆形view_移动开发_编程开发_程序员俱乐部

由于项目需要，需要做一个圆形的带边框并且里边还有文字的view →_→

↓↓↓↓这样↓↓↓↓

如果在布局文件中做的话是非常麻烦的，而且复用性也不高。所以想到用自定义一个view的来实现该功能，这样封装性和复用性就会相对提高，可方便在以后类似的项目中使用。可能也有同学有过这样的需求，所以在这分享出来供大家参考，不足之处还请多多指点。

看代码：

  1package com.stock.manage.friend.view;import android.content.Context;

  2 import android.content.res.TypedArray;

  3 import android.graphics.Bitmap;
  4 import android.graphics.Bitmap.Config;
  5 import android.graphics.BitmapFactory;
  6 import android.graphics.Canvas;
  7 import android.graphics.Color;
  8 import android.graphics.Paint;
  9 import android.graphics.Paint.FontMetrics;
 10 import android.graphics.PorterDuff;
 11 import android.graphics.PorterDuffXfermode;
 12 import android.util.AttributeSet;
 13 import android.view.View;
 14 
 15 /**
 16  * 自定义View 实现圆 圆形等效果
 17  * @author chengzijian
 18  * 
 19  */
 20 public class CustomImageView extends View {
 21 
 22     /**
 23      * 图片
 24      */
 25     private Bitmap mSrc;
 26 
 27     /**
 28      * 控件的宽度
 29      */
 30     private int mWidth;
 31     /**
 32      * 控件的高度
 33      */
 34     private int mHeight;
 35     /**
 36      *内颜色
 37      */
 38     private int inColor;
 39     /**
 40      * 边框颜色
 41      */
 42     private int outColor;
 43     /**
 44      *边框粗细
 45      */
 46     private int outStrokeWidth;
 47     /**
 48      * 文字
 49      */
 50     private String mText;
 51     /**
 52      * 文字颜色
 53      */
 54     private int mTextColor;
 55     /**
 56      * 文字大小
 57      */
 58     private float mTextSize;
 59 
 60     public CustomImageView(Context context, AttributeSet attrs) {
 61         this(context, attrs, 0);
 62     }
 63 
 64     public CustomImageView(Context context) {
 65         this(context, null);
 66     }
 67 
 68     /**
 69      * 初始化一些自定义的参数
 70      * 
 71      * @param context
 72      * @param attrs
 73      * @param defStyle
 74      */
 75     public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
 76         super(context, attrs, defStyle);
 77 
 78         TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.StockManage);
 79         mSrc = BitmapFactory.decodeResource(getResources(), array.getResourceId(R.styleable.StockManage_icon, -1));
 80         if (mSrc == null) {
 81             inColor = array.getColor(R.styleable.StockManage_inColor, Color.WHITE);
 82         }
 83         mTextColor = array.getColor(R.styleable.StockManage_textColor, Color.BLACK);
 84         outColor = array.getColor(R.styleable.StockManage_outColor, -1);
 85         outStrokeWidth = array.getDimensionPixelSize(R.styleable.StockManage_stroke, 0);
 86         mWidth = array.getDimensionPixelSize(R.styleable.StockManage_width, 0);
 87         mHeight = array.getDimensionPixelSize(R.styleable.StockManage_height, 0);
 88         mText = array.getString(R.styleable.StockManage_text);
 89         mTextSize = array.getDimension(R.styleable.StockManage_textSize,R.dimen.text_size_sub);// 如果设置为DP等单位，会做像素转换  
 90         //释放资源
 91         array.recycle();
 92     }
 93 
 94     /**
 95      * 计算控件的高度和宽度
 96      */
 97     @Override
 98     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 99         setMeasuredDimension(mWidth, mHeight);
100     }
101 
102     /**
103      * 绘制
104      */
105     @Override
106     protected void onDraw(Canvas canvas) {
107 
108         int min = Math.min(mWidth, mHeight);
109         /**
110          * 长度如果不一致，按小的值进行压缩
111          */
112         if (mSrc != null) {
113             mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);
114             canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);
115         } else {
116             canvas.drawBitmap(createCircleImage(null, min), 0, 0, null);
117         }
118     }
119 
120     /**
121      * 根据原图和边长绘制圆形图片
122      * 
123      * @param source
124      *            color 这两个参数只能取一个
125      * @param min
126      * @return
127      */
128     private Bitmap createCircleImage(Bitmap source, int min) {
129 
130         final Paint paint = new Paint();
131         paint.setAntiAlias(true);
132         Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
133         /**
134          * 产生一个同样大小的画布
135          */
136         Canvas canvas = new Canvas(target);
137         /**
138          * 首先绘制圆形
139          */
140         canvas.drawCircle(min / 2, min / 2, min / 2, paint);
141 
142         /**
143          * 使用SRC_IN，参考上面的说明
144          */
145         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
146         /**
147          * 绘制图片
148          */
149         if (source != null)// 画图片
150             canvas.drawBitmap(source, 0, 0, paint);
151         else { // 画圆
152             paint.setColor(inColor);
153             canvas.drawCircle(min / 2, min / 2, min / 2, paint);
154         }
155 
156         if (outColor != 0) {
157             // 让画出的图形是空心的
158             paint.setStyle(Paint.Style.STROKE);
159             // 设置画出的线的 粗细程度
160             paint.setStrokeWidth(outStrokeWidth);
161             paint.setColor(outColor);
162             canvas.drawCircle(min / 2, min / 2, min / 2, paint);
163         }
164         if(mText != null){
165             // 让画出的图形是实心的
166             paint.setStyle(Paint.Style.FILL);
167             paint.setStrokeWidth(1);
168             if(mTextColor != 0 ){
169                 paint.setColor(mTextColor);
170             }
171             if(mTextSize != 0 ){
172                 paint.setTextSize(mTextSize);
173             }
174             paint.setTextAlign(Paint.Align.CENTER);
175             FontMetrics fm = paint.getFontMetrics();  
176             //得到文字的高度
177             float fFontHeight = (float)Math.ceil(fm.descent - fm.ascent);  
178             
179             canvas.drawText(mText, mWidth/2, mHeight/2+fFontHeight/4, paint);
180         }
181         return target;
182     }
183 
184     //设置文字
185     public void setText(String string) {
186         mText = string;
187         //重绘
188         invalidate();
189         requestLayout();
190     }
192 }

这段代码其实也很简单，主要就是初始化参数信息并画圆和文字的， 代码中大部分的注释都写了，这里就不在描述。

做的的自定义view，难免少不了自定属性。上边代码中78行使用到的 R.styleable.StockManage 就是我们要定义的属性。

需要在values文件夹中新建arrays.xml 并定义以下内容

代码如下：

 1     <declare-styleable name="StockManage">
 2         <attr name="width" format="dimension" /><!-- 宽度 -->
 3         <attr name="height" format="dimension" /><!-- 高度 -->
 4         <attr name="inColor" format="color" /><!-- 圈内颜色 -->
 5         <attr name="outColor" format="color" /><!-- 圈外颜色 -->
 6         <attr name="textColor" format="color" /><!-- 颜色-->
 7         <attr name="stroke" format="dimension" /><!-- 圆圈的宽度 -->
 8         <attr name="textSize" format="dimension" /><!-- 字体大小 -->
 9         <attr name="text" format="string" /><!-- 字 -->
10         <attr name="icon" format="reference" /><!-- 图片 -->
11     </declare-styleable>

这段代码中的 name="StockManage" 就是我们要调用的的名称。里面的字段调动办法为 name_name, 前面的name是StockManage后面的是属性的name。

比如：

mTextColor = array.getColor(R.styleable.StockManage_textColor, Color.BLACK);

对自定义属性不太了解的同学，可去查看下相关的资料。。。

现在我们自定义的view已经写完了。接着 看使用方法。

我们在布局文件中使用：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:sm="http://schemas.android.com/apk/res/com.stock.manage.friend"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:orientation="vertical" >
 8 
 9         <com.stock.manage.friend.view.CustomImageView
10             android:id="@+id/my_view"
11             android:layout_width="wrap_content"
12             android:layout_height="wrap_content"
13             sm:height="100dip"
14             sm:inColor="@color/white"
15             sm:outColor="@color/black"
16             sm:stroke="2dip"
17             sm:text="文字"
18             sm:textColor="@color/black"
19             sm:textSize="12sp"
20             sm:width="100dip" />
21 
22 </LinearLayout >

其中：

xmlns:sm="http://schemas.android.com/apk/res/com.stock.manage.friend"

定义的是命名空间。黑色字体是我的包名。sm是名称。这样就可以使用arrays下面的属性了。

调用方法就是 sm:width="100dip"。类似这样。

这样就实现了自定义圆形view的功能了。 就不上图了，该吃饭了。。。