android自定义view制作圆形进度条效果

还是我们自定View的那几个步骤：
1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
[ 3、重写onMesure ]
4、重写onDraw

1、自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomTitleView">
 <attr name="mSpeed" format="integer" />
 <attr name="mFirstColor" format="color" />
 <attr name="mSecondColor" format="color" />
 <attr name="mCircleWidth" format="dimension"/>
 <attr name="textSize" format="dimension"/>
</declare-styleable>
</resources>

2、在View的构造方法中获得我们自定义的属性

/**
* 当前进度
*/
private int mProgress;
/**
* 第一圈的颜色
*/
private int mFirstColor;
/**
* 第二圈的颜色
*/
private int mSecondColor;
/**
* 圈的宽度
*/
private int mCircleWidth;
/**
* 速度
*/
private int mSpeed;
/**
* 中间进度百分比的字符串的字体
*/
private float textSize;
private boolean isNext = false;
private Paint mPaint;

public CustomTitleView(Context context, AttributeSet attrs) {
 super(context, attrs);
 TypedArray typearray = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleView);
 int count= typearray.getIndexCount();
 for(int i=0;i<count;i++){
  int attr =typearray.getIndex(i);
  switch(attr){
   case R.styleable.CustomTitleView_mFirstColor:
    mFirstColor=typearray.getColor(attr,Color.BLACK);
    break;
   case R.styleable.CustomTitleView_mSecondColor:
    mSecondColor=typearray.getColor(attr,Color.RED);
    break;
   case R.styleable.CustomTitleView_mCircleWidth:
    mCircleWidth = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension(
      TypedValue.COMPLEX_UNIT_PX,20,getResources().getDisplayMetrics()));
    break;

case R.styleable.CustomTitleView_textSize:
    textSize = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension(
      TypedValue.COMPLEX_UNIT_PX,30,getResources().getDisplayMetrics()));
    break;
   case R.styleable.CustomTitleView_mSpeed:
    mSpeed = typearray.getInt(attr,100);// 默认100
    break;
  }
 }
 Log.v("----",mSpeed+"");
 typearray.recycle();
 mPaint = new Paint();
 new Thread()
 {
  public void run()
  {
   while (true)
   {
    mProgress++;
    if (mProgress == 360)
    {
     mProgress = 0;
     if (!isNext)
      isNext = true;
     else
      isNext = false;
    }
    postInvalidate();
    try
    {
     Thread.sleep(mSpeed);
    } catch (InterruptedException e)
    {
     e.printStackTrace();
    }
   }
  };
 }.start();
}

3、直接重写onDraw，这不需要重写onMeasure

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
protected void onDraw(Canvas canvas)
{
 /**
 * 画进度百分比
 */
 mPaint.setStrokeWidth(0);
 mPaint.setColor(Color.BLACK);
 mPaint.setTextSize(textSize);
 mPaint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体
 int percent = (int)(((float)mProgress / (float)360) * 100);
 int centre = getWidth() / 2; // 获取圆心的x坐标
 int radius = centre - mCircleWidth / 2;// 半径
 float textWidth = mPaint.measureText(percent + "％"); //测量字体宽度，我们需要根据字体的宽度设置在圆环中间
 canvas.drawText(percent + "％",centre-textWidth/ 2,centre+textSize/2, mPaint); //画出进度百分比
 mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
 mPaint.setAntiAlias(true); // 消除锯齿
 mPaint.setStyle(Paint.Style.STROKE); // 设置空心
 RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
 if(isNext){
  mPaint.setColor(mSecondColor); // 设置圆环的颜色
  canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
  mPaint.setColor(mFirstColor); // 设置圆环的颜色
  canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
 }else{
  mPaint.setColor(mFirstColor); // 设置圆环的颜色
  canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
  mPaint.setColor(mSecondColor); // 设置圆环的颜色
  canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
 }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="20dp"
>
<view.CustomTitleView
 android:layout_width="200dp"
 android:layout_height="400dp"
 custom:mSpeed="50"
 custom:mFirstColor="#7300e6"
 custom:mSecondColor="#39ac39"
 custom:mCircleWidth="10px"
 custom:textSize="20px"
 android:id="@+id/one"
/>
<view.CustomTitleView
 android:layout_toEndOf="@id/one"
 android:layout_width="200dp"
 android:layout_height="400dp"
 custom:mSpeed="100"
 custom:mFirstColor="#0040ff"
 custom:mSecondColor="#40ff00"
 custom:mCircleWidth="20px"
 custom:textSize="30px"
 />
</RelativeLayout>

效果预览

源码下载：http://xiazai.jb51.net/201701/yuanma/AndroidProgressbar(jb51.net).rar