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

概述这几天因为项目需求，需要在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 vIEwinvalIDate();}/*** Set the transparency of arc.* @param marcAlpha the value of transparency.*/public voID setArcAlpha(int marcAlpha) {this.marcAlpha = marcAlpha;//refresh this vIEwinvalIDate();}@OverrIDeprotected voID onDraw(Canvas canvas) {super.onDraw(canvas);//draw arcPaint 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 textPaint textPaint = new Paint();textPaint.setTextSize(mTextSize);textPaint.setStyle(Paint.Style.FILL);textPaint.setcolor(mTextcolor);Path path = new Path();path.addArc(oval,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中自定义属性：

<?xml version="." enCoding="utf-"?><resources><declare-styleable name="ArcImageVIEw"><attr name="drawStr" format="string" /><attr name="textSize" format="dimension" /><attr name="arcAlpha" format="integer" /><attr name="arcWIDth" format="integer" /><attr name="startAngle" format="integer" /><attr name="sweepAngle" format="integer" /><attr name="scale" format="float" /><attr name="hOffset" format="float" /><attr name="vOffset" format="float" /><attr name="drawStyle" format="enum"><enum name="left_top" value="" /><enum name="left_BottOM" value="" /><enum name="RIGHT_top" value="" /><enum name="RIGHT_BottOM" value="" /><enum name="CENTER" value="" /></attr><attr name="arccolor" format="color" /><attr name="textcolor" format="color" /></declare-styleable></resources>

3.在MainActivity调用ArcImageVIEw，实现代码如下：

package com.chunk.customvIEwsdemo;import androID.os.Bundle;import androID.support.v.app.AppCompatActivity;import androID.vIEw.VIEw;import androID.Widget.button;import com.chunk.customvIEwsdemo.vIEws.ArcImageVIEw.ArcImageVIEw;public class MainActivity extends AppCompatActivity implements VIEw.OnClickListener {private ArcImageVIEw aiv_one;private ArcImageVIEw aiv_two;private ArcImageVIEw aiv_three;private ArcImageVIEw aiv_four;private button btn_another_one;private int mGroup = ;@OverrIDeprotected voID onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentVIEw(R.layout.activity_main);aiv_one = (ArcImageVIEw) findVIEwByID(R.ID.aiv_one);aiv_one.setArcAlpha();aiv_two = (ArcImageVIEw) findVIEwByID(R.ID.aiv_two);aiv_two.setArcAlpha();aiv_three = (ArcImageVIEw) findVIEwByID(R.ID.aiv_three);aiv_three.setArcAlpha();aiv_four = (ArcImageVIEw) findVIEwByID(R.ID.aiv_four);aiv_four.setArcAlpha();btn_another_one = (button) findVIEwByID(R.ID.btn_another_one);btn_another_one.setonClickListener(this);}@OverrIDepublic voID onClick(VIEw v) {switch (v.getID()) {case R.ID.btn_another_one:if (mGroup == ) {aiv_one.setDrawStr("苹果");aiv_one.setBackgroundResource(R.drawable.apple);aiv_two.setDrawStr("柚子");aiv_two.setBackgroundResource(R.drawable.pineapple);aiv_three.setDrawStr("香蕉");aiv_three.setBackgroundResource(R.drawable.banana);aiv_four.setDrawStr("菠萝");aiv_four.setBackgroundResource(R.drawable.pineapple);mGroup = ;} else {aiv_one.setDrawStr("牛排");aiv_one.setBackgroundResource(R.drawable.steak);aiv_two.setDrawStr("海鲜");aiv_two.setBackgroundResource(R.drawable.seafood);aiv_three.setDrawStr("奶酪");aiv_three.setBackgroundResource(R.drawable.cheese);aiv_four.setDrawStr("烧烤");aiv_four.setBackgroundResource(R.drawable.barbecue);mGroup = ;}break;}}}

4.MainActivity的布局文件如下：

<linearLayoutxmlns:androID="http://schemas.androID.com/apk/res/androID"xmlns:custom="http://schemas.androID.com/apk/res-auto"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:layout_margintop="dp"androID:layout_marginBottom="dp"androID:orIEntation="vertical" ><buttonandroID:ID="@+ID/btn_another_one"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:text="换一组" /><linearLayoutandroID:layout_wIDth="match_parent"androID:layout_height="dp"androID:layout_weight=""androID:orIEntation="horizontal" ><relativeLayoutandroID:layout_wIDth="dp"androID:layout_weight=""androID:layout_height="match_parent" ><com.chunk.customvIEwsdemo.vIEws.ArcImageVIEw.ArcImageVIEwandroID:ID="@+ID/aiv_one"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:background="@drawable/steak"custom:drawStyle="RIGHT_BottOM"custom:drawStr="牛排"custom:arcAlpha=""custom:arccolor="@color/gray"custom:textcolor="@color/black"custom:textSize="sp" /></relativeLayout><relativeLayoutandroID:layout_wIDth="dp"androID:layout_weight=""androID:layout_height="match_parent" ><com.chunk.customvIEwsdemo.vIEws.ArcImageVIEw.ArcImageVIEwandroID:ID="@+ID/aiv_two"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:background="@drawable/seafood"custom:drawStyle="left_BottOM"custom:drawStr="海鲜"custom:arcAlpha=""custom:arccolor="@color/gray"custom:textcolor="@color/black"custom:textSize="sp" /></relativeLayout></linearLayout><linearLayoutandroID:layout_wIDth="match_parent"androID:layout_height="dp"androID:layout_weight=""androID:orIEntation="horizontal" ><relativeLayoutandroID:layout_wIDth="dp"androID:layout_weight=""androID:layout_height="match_parent" ><com.chunk.customvIEwsdemo.vIEws.ArcImageVIEw.ArcImageVIEwandroID:ID="@+ID/aiv_three"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:background="@drawable/cheese"custom:drawStyle="RIGHT_top"custom:drawStr="奶酪"custom:arcAlpha=""custom:arccolor="@color/gray"custom:textcolor="@color/black"custom:textSize="sp" /></relativeLayout><relativeLayoutandroID:layout_wIDth="dp"androID:layout_weight=""androID:layout_height="match_parent" ><com.chunk.customvIEwsdemo.vIEws.ArcImageVIEw.ArcImageVIEwandroID:ID="@+ID/aiv_four"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:background="@drawable/barbecue"custom:drawStyle="left_top"custom:drawStr="烧烤"custom:arcAlpha=""custom:arccolor="@color/gray"custom:textcolor="@color/black"custom:textSize="sp" /></relativeLayout></linearLayout></linearLayout>

注意，在布局文件中引入自定义属性时需要加入一行代码：xmlns:custom="http://schemas.androID.com/apk/res-auto"。

好了，需求搞定，剩下的就是搬到实际的项目当中去了。实现效果如下：

总结一下，自定义view一般就是通过重写onDraw、onMeasure()、onLayout()等方法来进行测量、绘制，绘制的时候一般会用到Canvas、Paint、Bitmap等类，测量和绘制的过程其实就是对现实生活中绘图工作的抽象和实现，我们利用面向对象的思想将画板、画纸、画笔等工具以及绘画的动作用一行行代码加以描述就OK啦！

由于实现过程比较简单，我就不贴源码了，大家如果对2D绘图还不是很了解，可以去搜一下相关资料或查阅相关书籍！

总结

以上是内存溢出为你收集整理的Android使用ImageView 制作透明圆弧实例代码全部内容，希望文章能够帮你解决Android使用ImageView 制作透明圆弧实例代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。