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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。