Android打造带透明圆弧的ImageView

　　这几天因为项目需求，需要在ImageView上面叠加一层透明圆弧，并且在沿着圆弧的方向显示相应的文字，效果如下图所示：

　　拿到这个需求，首先想到的是自定义一个ImageView来实现此功能，即在onDraw()中绘制圆弧和文字。同时因为要保证圆弧的位置可以任意摆放，圆弧的颜色、透明度以及文字大小、颜色等都是可控的，所以增加了一些自定义属性。实现代码非常简单，如下：

1.自定义ImageView：

 1 package com.chunk.customviewsdemo.views.ArcImageView; 2  3 import android.content.Context; 4 import android.content.res.TypedArray; 5 import android.graphics.Canvas; 6 import android.graphics.Paint; 7 import android.graphics.Path; 8 import android.graphics.RectF; 9 import android.util.AttributeSet; 10 import android.widget.ImageView; 11  12 import com.chunk.customviewsdemo.R; 13  14 /** 15  * Description:A custom ImageView with circular arc and text 16  * Author: XiaoYu 17  * Date: 2016/5/10 13:55 18 */ 19 public class ArcImageView extends ImageView { 20   /** 21    * The default text size. 22   */ 23   private final float DEFAULT_TEXT_SIZE = 20; 24   /** 25    * The default scale value which decides the width of arc. 26   */ 27   private final float DEFAULT_SCALE = 0.5f; 28   /** 29    * The default transparency of arc. 30   */ 31   private final int DEFAULT_ARC_ALPHA =100; 32   /** 33    * The default width of arc. 34   */ 35   private final int DEFAULT_ARC_WIDTH =160; 36   /** 37    * The default angle that the arc starts with. 38   */ 39   private final int DEFAULT_START_ANGLE = 180; 40   /** 41    * The default angle that the arc. 42   */ 43   private final int DEFAULT_SWEEP_ANGLE = 90; 44   /** 45    * The default distance along the path to add to the text's starting position. 46   */ 47   private final int DEFAULT_H_OFFSET = 100; 48   /** 49    * The default distance above(-) or below(+) the path to position the text. 50   */ 51   private final int DEFAULT_V_OFFSET = 20; 52   private Context mContext; 53   /** 54    * The text displayed on ImageView along arc. 55   */ 56   private String mDrawStr; 57   /** 58    * The font size of text. 59   */ 60   private float mTextSize = DEFAULT_TEXT_SIZE; 61   /** 62    * The scale value which decides the width of arc. 63   */ 64   private float mScale = DEFAULT_SCALE; 65   /** 66    * The transparency of arc. 67   */ 68   private int mArcAlpha = DEFAULT_ARC_ALPHA; 69   /** 70    * The width of arc. 71   */ 72   private int mArcWidth = DEFAULT_ARC_WIDTH; 73   /** 74    * The start angle of angle. 75   */ 76   private int mStartAngle = DEFAULT_START_ANGLE; 77   /** 78    * The swept angle of angle. 79   */ 80   private int mSweepAngle = DEFAULT_SWEEP_ANGLE; 81   /** 82    * The default distance along the path to add to the text's starting position. 83   */ 84   private float mHOffset = DEFAULT_H_OFFSET; 85   /** 86    * The default distance above(-) or below(+) the path to position the text. 87   */ 88   private float mVOffset = DEFAULT_V_OFFSET; 89   /** 90    * The style of arc, all styles includes LEFT_TOP, LEFT_BOTTOM, RIGHT_TOP, RIGHT_BOTTOM, CENTER。 91    * of course, you can add your own style according to your demands. 92   */ 93   private int mDrawStyle; 94   /** 95    * The color of arc. 96   */ 97   private int mArcColor; 98   /** 99    * The color of text.100   */101   private int mTextColor;102 103   public ArcImageView(Context context) {104     super(context);105     this.mContext = context;106   }107 108   public ArcImageView(Context context, AttributeSet attrs) {109     super(context, attrs);110     this.mContext = context;111     obtainAttributes(attrs);112   }113 114   public ArcImageView(Context context, AttributeSet attrs, int defStyleAttr) {115     super(context, attrs, defStyleAttr);116     this.mContext = context;117     obtainAttributes(attrs);118   }119 120   /**121    * Set the text that will be drawn on arc.122    * @param drawStr the text content.123   */124   public void setDrawStr(String drawStr) {125     this.mDrawStr = drawStr;126     //refresh this view127     invalidate();128   }129 130   /**131    * Set the transparency of arc.132    * @param mArcAlpha the value of transparency.133   */134   public void setArcAlpha(int mArcAlpha) {135     this.mArcAlpha = mArcAlpha;136     //refresh this view137     invalidate();138   }139 140   @Override141   protected void onDraw(Canvas canvas) {142     super.onDraw(canvas);143     //draw arc144     Paint arcPaint = new Paint();145     arcPaint.setStrokeWidth(mArcWidth);146     arcPaint.setStyle(Paint.Style.STROKE);147     arcPaint.setColor(mArcColor);148     arcPaint.setAlpha(mArcAlpha);149     int width = getWidth();150     int height = getHeight();151     float radius;152     if (width > height) {153       radius = mScale * height;154     } else {155       radius = mScale * width;156     }157     RectF oval = new RectF();158 159     int center_x = width;160     int center_y = height;161 162     switch (mDrawStyle) {163       case 0:164         center_x = 0;165         center_y = 0;166         mStartAngle = 90;167         mSweepAngle = -90;168         break;169       case 1:170         center_x = 0;171         center_y = height;172         mStartAngle = 270;173         mSweepAngle = 90;174         break;175       case 2:176         center_x = width;177         center_y = 0;178         mStartAngle = 180;179         mSweepAngle = -90;180         break;181       case 3:182         center_x = width;183         center_y = height;184         mStartAngle = 180;185         mSweepAngle = 90;186         break;187       case 4:188         center_x = width / 2;189         center_y = height / 2;190         mStartAngle = 270;191         mSweepAngle = 90;192         break;193     }194     float left = center_x - radius;195     float top = center_y - radius;196     float right = center_x + radius;197     float bottom = center_y + radius;198     oval.set(left, top, right, bottom);199     canvas.drawArc(oval, mStartAngle, mSweepAngle, false, arcPaint);200 201     //draw text202     Paint textPaint = new Paint();203     textPaint.setTextSize(mTextSize);204     textPaint.setStyle(Paint.Style.FILL);205     textPaint.setColor(mTextColor);206     Path path = new Path();207     path.addArc(oval, mStartAngle, mSweepAngle);208     canvas.drawTextOnPath(mDrawStr, path, mHOffset, mVOffset, textPaint);209   }210 211   /**212    * Obtain custom attributes that been defined in attrs.213    * @param attrs A collection of attributes.214   */215   private void obtainAttributes(AttributeSet attrs) {216     TypedArray ta = mContext.obtainStyledAttributes(attrs, R.styleable.ArcImageView);217     mDrawStr = ta.getString(R.styleable.ArcImageView_drawStr);218     mTextSize = ta.getDimension(R.styleable.ArcImageView_textSize, DEFAULT_TEXT_SIZE);219     mArcAlpha = ta.getInteger(R.styleable.ArcImageView_arcAlpha, DEFAULT_ARC_ALPHA);220     mArcWidth = ta.getInteger(R.styleable.ArcImageView_arcWidth, DEFAULT_ARC_WIDTH);221     mStartAngle = ta.getInteger(R.styleable.ArcImageView_startAngle, DEFAULT_START_ANGLE);222     mSweepAngle = ta.getInteger(R.styleable.ArcImageView_startAngle, DEFAULT_SWEEP_ANGLE);223     mHOffset = ta.getInteger(R.styleable.ArcImageView_hOffset, DEFAULT_H_OFFSET);224     mVOffset = ta.getInteger(R.styleable.ArcImageView_vOffset, DEFAULT_V_OFFSET);225     mArcColor = ta.getColor(R.styleable.ArcImageView_arcColor, 0XCCCCCC);226     mTextColor = ta.getColor(R.styleable.ArcImageView_textColor, 0XFFFFFF);227     mDrawStyle = ta.getInt(R.styleable.ArcImageView_drawStyle, 0);228     ta.recycle();229   }230 }

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Android打造带透明圆弧的ImageView

关键词：Android