Android使用ImageView制作透明圆弧实例代码

Tags 软件编程 Android 分类：[default] 更新日期： 2016-01-25

这篇文章主要介绍了Android使用ImageView 制作透明圆弧实例代码的相关资料,需要的朋友可以参考下

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

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

1.自定义ImageView：

package com.chunk.customviewsdemo.views.ArcImageView; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.graphics.RectF; import android.util.AttributeSet; import android.widget.ImageView; import com.chunk.customviewsdemo.R; /** * Description:A custom ImageView with circular arc and text * Author: XiaoYu * Date: // : */ public class ArcImageView extends ImageView { /** * The default text size. */ private final float DEFAULT_TEXT_SIZE = ; /** * The default scale value which decides the width of arc. */ private final float DEFAULT_SCALE = .f; /** * The default transparency of arc. */ private final int DEFAULT_ARC_ALPHA =; /** * The default width of arc. */ private final int DEFAULT_ARC_WIDTH =; /** * The default angle that the arc starts with. */ private final int DEFAULT_START_ANGLE = ; /** * The default angle that the arc. */ private final int DEFAULT_SWEEP_ANGLE = ; /** * The default distance along the path to add to the text's starting position. */ private final int DEFAULT_H_OFFSET = ; /** * The default distance above(-) or below(+) the path to position the text. */ private final int DEFAULT_V_OFFSET = ; private Context mContext; /** * The text displayed on ImageView along arc. */ private String mDrawStr; /** * The font size of text. */ private float mTextSize = DEFAULT_TEXT_SIZE; /** * The scale value which decides the width of arc. */ private float mScale = DEFAULT_SCALE; /** * The transparency of arc. */ private int mArcAlpha = DEFAULT_ARC_ALPHA; /** * The width of arc. */ private int mArcWidth = DEFAULT_ARC_WIDTH; /** * The start angle of angle. */ private int mStartAngle = DEFAULT_START_ANGLE; /** * The swept angle of angle. */ private int mSweepAngle = DEFAULT_SWEEP_ANGLE; /** * The default distance along the path to add to the text's starting position. */ private float mHOffset = DEFAULT_H_OFFSET; /** * The default distance above(-) or below(+) the path to position the text. */ private float mVOffset = DEFAULT_V_OFFSET; /** * The style of arc, all styles includes LEFT_TOP, LEFT_BOTTOM, RIGHT_TOP, RIGHT_BOTTOM, CENTER。 * of course, you can add your own style according to your demands. */ private int mDrawStyle; /** * The color of arc. */ private int mArcColor; /** * The color of text. */ private int mTextColor; public ArcImageView(Context context) { super(context); this.mContext = context; } public ArcImageView(Context context, AttributeSet attrs) { super(context, attrs); this.mContext = context; obtainAttributes(attrs); } public ArcImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.mContext = context; obtainAttributes(attrs); } /** * Set the text that will be drawn on arc. * @param drawStr the text content. */ public void setDrawStr(String drawStr) { this.mDrawStr = drawStr; //refresh this view invalidate(); } /** * Set the transparency of arc. * @param mArcAlpha the value of transparency. */ public void setArcAlpha(int mArcAlpha) { this.mArcAlpha = mArcAlpha; //refresh this view invalidate(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //draw arc Paint arcPaint = new Paint(); arcPaint.setStrokeWidth(mArcWidth); arcPaint.setStyle(Paint.Style.STROKE); arcPaint.setColor(mArcColor); arcPaint.setAlpha(mArcAlpha); int width = getWidth(); int height = getHeight(); float radius; if (width > height) { radius = mScale * height; } else { radius = mScale * width; } RectF oval = new RectF(); int center_x = width; int center_y = height; switch (mDrawStyle) { case : center_x = ; center_y = ; mStartAngle = ; mSweepAngle = -; break; case : center_x = ; center_y = height; mStartAngle = ; mSweepAngle = ; break; case : center_x = width; center_y = ; mStartAngle = ; mSweepAngle = -; break; case : center_x = width; center_y = height; mStartAngle = ; mSweepAngle = ; break; case : center_x = width / ; center_y = height / ; mStartAngle = ; mSweepAngle = ; break; } float left = center_x - radius; float top = center_y - radius; float right = center_x + radius; float bottom = center_y + radius; oval.set(left, top, right, bottom); canvas.drawArc(oval, mStartAngle, mSweepAngle, false, arcPaint); //draw text Paint textPaint = new Paint(); textPaint.setTextSize(mTextSize); textPaint.setStyle(Paint.Style.FILL); textPaint.setColor(mTextColor); Path path = new Path(); path.addArc(oval, mStartAngle, mSweepAngle); canvas.drawTextOnPath(mDrawStr, path, mHOffset, mVOffset, textPaint); } /** * Obtain custom attributes that been defined in attrs.xml. * @param attrs A collection of attributes. */ private void obtainAttributes(AttributeSet attrs) { TypedArray ta = mContext.obtainStyledAttributes(attrs, R.styleable.ArcImageView); mDrawStr = ta.getString(R.styleable.ArcImageView_drawStr); mTextSize = ta.getDimension(R.styleable.ArcImageView_textSize, DEFAULT_TEXT_SIZE); mArcAlpha = ta.getInteger(R.styleable.ArcImageView_arcAlpha, DEFAULT_ARC_ALPHA); mArcWidth = ta.getInteger(R.styleable.ArcImageView_arcWidth, DEFAULT_ARC_WIDTH); mStartAngle = ta.getInteger(R.styleable.ArcImageView_startAngle, DEFAULT_START_ANGLE); mSweepAngle = ta.getInteger(R.styleable.ArcImageView_startAngle, DEFAULT_SWEEP_ANGLE); mHOffset = ta.getInteger(R.styleable.ArcImageView_hOffset, DEFAULT_H_OFFSET); mVOffset = ta.getInteger(R.styleable.ArcImageView_vOffset, DEFAULT_V_OFFSET); mArcColor = ta.getColor(R.styleable.ArcImageView_arcColor, XCCCCCC); mTextColor = ta.getColor(R.styleable.ArcImageView_textColor, XFFFFFF); mDrawStyle = ta.getInt(R.styleable.ArcImageView_drawStyle, ); ta.recycle(); } }

2.在values文件夹下的attrs.xml中自定义属性：