Android自定义带边框的圆形view

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

↓↓↓↓这样↓↓↓↓

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

看代码：

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

import android.content.res.TypedArray;

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 并定义以下内容

代码如下：

    <declare-styleable name="StockManage">
        <attr name="width" format="dimension" /><!-- 宽度 -->
        <attr name="height" format="dimension" /><!-- 高度 -->
        <attr name="inColor" format="color" /><!-- 圈内颜色 -->
        <attr name="outColor" format="color" /><!-- 圈外颜色 -->
        <attr name="textColor" format="color" /><!-- 颜色-->
        <attr name="stroke" format="dimension" /><!-- 圆圈的宽度 -->
        <attr name="textSize" format="dimension" /><!-- 字体大小 -->
        <attr name="text" format="string" /><!-- 字 -->
        <attr name="icon" format="reference" /><!-- 图片 -->
    </declare-styleable>

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

比如：

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

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

 

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

我们在布局文件中使用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sm="http://schemas.android.com/apk/res/com.stock.manage.friend"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

        <com.stock.manage.friend.view.CustomImageView
            android:id="@+id/my_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            sm:height="100dip"
            sm:inColor="@color/white"
            sm:outColor="@color/black"
            sm:stroke="2dip"
            sm:text="文字"
            sm:textColor="@color/black"
            sm:textSize="12sp"
            sm:width="100dip" />

</LinearLayout >

 

其中：

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

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

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

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