完全自定义控件-简单环形进度条制作

昨天简单熟悉了下canvas的API，今天来做个小demo巩固下
回顾完全自定义控件-Canvas之绘制基本形状

简单环形进度条制作

本文实现一个自定义的加载进度条，效果如下图所示：

效果

实现步骤：

---

1. 新建CircleProgressView类继承View
2. 在构造函数中初始化画笔

private void init() {
       mPaint = new Paint();
       mPaint.setColor(Color.BLACK);
       mPaint.setStyle(Paint.Style.STROKE);//绘图为描边模式
       mPaint.setStrokeWidth(20);//画笔宽度
       mPaint.setAntiAlias(true);//抗锯齿
   }

2. 重写onDraw
   主要逻辑为先绘制一个圆环，然后在它上面根据进度来绘制圆弧

//进度
private int mProgress;
//是否到下一圈
private boolean mChanged;
protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       //得到画布一半的宽度
       int center = getWidth() / 2;
       //定义圆的半径
       int radius = 100;
       //定义一个圆
       mRectF = new RectF(center - radius, center - radius, center + radius, center + radius);
       if (!mChanged) {
           //设置画笔的颜色
           mPaint.setColor(Color.BLUE);
           //画一个圆，由于画笔是描边模式，所以展现的是个圆环
           canvas.drawCircle(center, center, radius, mPaint);
           //设置画笔的颜色
           mPaint.setColor(Color.RED);
           //绘制圆弧，从12点方向（-90度）开始绘制，偏移角度为进度
           canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
       } else {
           mPaint.setColor(Color.RED);
           canvas.drawCircle(center, center, radius, mPaint);
           mPaint.setColor(Color.BLUE);
           canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
       }
       //进度更新方法
       startProgress();
   }

进度更新方法

private void startProgress() {
       //当view控件可见时，每50毫秒更新一次视图
       if (isShown()) {
           postDelayed(new Runnable() {
               @Override
               public void run() {
                   mProgress += 10;
                   //如果偏移角度超过360，则至为0，并且跟换绘制颜色
                   if (mProgress >= 360) {
                       mProgress = 0;
                       mChanged = !mChanged;
                   }

                  //请求重绘View树，调用draw()方法
                   invalidate();
               }
           }, 50);
       }
   }

自定义属性

---

• 很明显，我们不可能在代码中写死控件的参数，我们需要提供一些可定制属性，方便在XML布局文件中对控件进行设置。

为控件添加自定义属性的几个步骤。

1. 在values目录下新建一个attrs.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="CircleProgressView">
       <attr name="firstColor" format="color"/> <!--圆环颜色-->
       <attr name="secondColor" format="color"/> <!--圆环颜色-->
       <attr name="circleWidth" format="dimension"/><!--色带宽度-->
   </declare-styleable>
</resources>

不同的属性对应不同的format，属性对应的format可以参考
http://blog.csdn.net/pgalxx/article/details/6766677

3. 获取属性
   在CircleProgressView的构造方法中获取布局文件中的属性

//获取TypedArray
context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar)

然后从TypedArray获取我们定义的属性

public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
       TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyleAttr, 0);

       //获取自定义属性和默认值
       //getColor方法的第一个参数是我们在XML文件中定义的颜色，如果我们没有给我们自定义的View定义颜色，他就会使用第二个参数中的默认值
       mFirstColor = ta.getColor(R.styleable.CircleProgressView_firstColor, Color.RED);
       mSecondColor = ta.getColor(R.styleable.CircleProgressView_secondColor, Color.BLUE);
       mCircleWidth = ta.getDimensionPixelSize(R.styleable.CircleProgressView_circleWidth,
               (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics()));
       
       //释放该实例，从而使其可被其他模块复用
       ta.recycle();
       init();
   }

3. 在onDraw()中使用

protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       //得到画布一半的宽度
       int center = getWidth() / 4;
       //定义圆的半径
       int radius = 100;
       //定义一个圆
       mRectF = new RectF(center - radius, center - radius, center + radius, center + radius);
       if (!mChanged) {
           //设置画笔的颜色
           mPaint.setColor(mFirstColor);
           //画一个圆，由于画笔是描边模式，所以展现的是个圆环
           canvas.drawCircle(center, center, radius, mPaint);
           //设置画笔的颜色
           mPaint.setColor(mSecondColor);
           //绘制圆弧，从12点方向（-90度）开始绘制，偏移角度为进度
           canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
       } else {
           mPaint.setColor(mSecondColor);
           canvas.drawCircle(center, center, radius, mPaint);
           mPaint.setColor(mFirstColor);
           canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
       }
       //进度更新方法
       startProgress();
   }

2. 在布局中使用
   第二个控件使用了自定义属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context="zhj.progressbardemo.MainActivity">

   <zhj.progressbardemo.CircleProgressView
       android:layout_width="match_parent"
       android:layout_height="259dp"
       />

   <zhj.progressbardemo.CircleProgressView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginTop="50dp"
       app:circleWidth="30dp"
       app:firstColor="#f58a47"
       app:secondColor="#5be9d8"
       />
</LinearLayout>

效果展示

效果

这里是项目地址

参考
https://segmentfault.com/a/1190000004624339
http://blog.csdn.net/lmj623565791/article/details/24500107