在写这个之前我很犹豫啊，到底要不要写，因为网上的资料一查一大堆，我也是查阅后才做出来的
but.......还是写下来记录一下吧.....
先上个图：
无标题.png
PS: 中间的文字是由两个TextView和一个view组成，这是我另加的，并没有做成一体，所以以下程序只是画出外面的环
其实关键就在以下几步：
1 自定义一个类继承自view
2 在onMeasure中获取控件的宽度和高度
-
3 在onDraw中使用画笔（Paint）绘制相应的图形（共包含3个）
- 最底层：蓝色扇形
- 次底层：黄色扇形
- 顶层：中间的白色圆
- 直接上代码：代码是根据网上版本改编
MyCircleView
public class MyCircleView extends View{
private int ScrWidth,ScrHeight;
private float Percentage = 0.2f;
public float getArcWidth() {
return arcWidth;
}
public void setArcWidth(float arcWidth) {
this.arcWidth = arcWidth;
}
private float arcWidth = 30.0f;
//在measure中测量出自定义view的宽和高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
ScrHeight = this.getMeasuredHeight();
ScrWidth = this.getMeasuredWidth();
}
public MyCircleView(Context context) {
super(context);
Log.v("onConstructer1","------------------->>>>");
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
Log.v("onFinishInflate","------------------->>>>");
}
public MyCircleView(Context context, AttributeSet attrs) {
super(context, attrs);
Log.v("onConstructer2","------------------->>>>");
}
public MyCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
Log.v("onConstructer3","------------------->>>>");
}
public void onDraw(Canvas canvas){
//画布背景
Log.v("ondraw","------------------->>>>>");
//画布颜色
//canvas.drawColor(Color.WHITE);
//圆的圆心计算
float cirX = ScrWidth / 2;
float cirY = ScrHeight / 2 ;
//圆的半径计算
float radius = ScrHeight / 2.5f ;//150;
//圆和view四周的距离，这个距离的测量主要是为了创建下面的arcRF0和arcRF1
float arcLeft = cirX - radius; //圆弧距离view四周的距离
float arcTop = cirY - radius ;
float arcRight = cirX + radius ;
float arcBottom = cirY + radius ;
//通过四个点，创建出一个正方形 arcRF0为最底层
RectF arcRF0 = new RectF(arcLeft ,arcTop,arcRight,arcBottom);
//创建出arcRF1，为了覆盖在arcRF0上面-2和+2为了更好的覆盖底层
RectF arcRF1 = new RectF(arcLeft-2,arcTop-2,arcRight+2,arcBottom+2);
//画笔初始化
Paint PaintArc = new Paint();
PaintArc.setAntiAlias(true);//使平滑
//初始化画笔颜色
PaintArc.setColor(getResources().getColor(R.color.mxy_blue));
//PaintArc.setAlpha(1);
//在一个正方形上面绘制起点为135° 圆饼角度为270，使用画笔为PaintArc
canvas.drawArc(arcRF0, 135f, 270f, true, PaintArc);
//画笔颜色调为黄色
PaintArc.setColor(Color.YELLOW);
//在一个正方形上面绘制起点为135° 圆饼角度为Percentage，使用画笔为PaintArc，
canvas.drawArc(arcRF1,135f,Percentage,true,PaintArc);
//以上完成的是饼图的制作，要编程圆环形状，则需要在中间绘制一个白色的圆
//画笔颜色调整为白色
PaintArc.setColor(Color.WHITE);
//圆心x,y,半径，所用画笔
canvas.drawCircle(cirX,cirY,radius-arcWidth,PaintArc);
}
//此函数用于外界调用，传递进入百分比，即0~1的float，通过调用invaliate函数，
// 让view重新调用ondraw(),实现更新
public void refresh(float percent){
if(percent >1.0f){percent = 1.0f;}
Percentage = (float)percent*270;
String str1 = Percentage + "";
Log.v("start refresh","------------------------->>>>>>>"+ str1);
this.invalidate();
}
}
- 在xml中:创建一个MyCircleView
<com.example.myloopprogressview.MyCircleView
android:id="@+id/circle"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
/>
- 最后可在activity中
- 1、使用MyCircleView对象.setArcWidth()设置圆弧宽度
- 2、使用refresh刷新进度条
