Android使用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();
}
}

<?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>

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 = ;
@override
protected 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);
}
@override
public 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;
}
}
}

<linearlayout
xmlns: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" >
<button
android:id="@+id/btn_another_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="换一组" />
<linearlayout
android:layout_width="match_parent"
android:layout_height="dp"
android:layout_weight=""
android:orientation="horizontal" >
<relativelayout
android:layout_width="dp"
android:layout_weight=""
android:layout_height="match_parent" >
<com.chunk.customviewsdemo.views.arcimageview.arcimageview
android: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>
<relativelayout
android:layout_width="dp"
android:layout_weight=""
android:layout_height="match_parent" >
<com.chunk.customviewsdemo.views.arcimageview.arcimageview
android: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>
<linearlayout
android:layout_width="match_parent"
android:layout_height="dp"
android:layout_weight=""
android:orientation="horizontal" >
<relativelayout
android:layout_width="dp"
android:layout_weight=""
android:layout_height="match_parent" >
<com.chunk.customviewsdemo.views.arcimageview.arcimageview
android: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>
<relativelayout
android:layout_width="dp"
android:layout_weight=""
android:layout_height="match_parent" >
<com.chunk.customviewsdemo.views.arcimageview.arcimageview
android: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>