Wheel ProgressBar 实现之三——模拟进度过程

1. 效果展示：

知道如何画圆弧，如何精确画出进度文本之后，我们将进入 Wheel ProgressBar 实现的最后一个过程：模拟其动态呈现过程。如下图所示，初始时显示进度为 0 （上图），点击进度条后，将自动减速加载（下图），每次点击之后都将重新从 0 加载到 100。 

2. 实现原理：

通过以下几个步骤来实现进度的动态加载：

1、画一个灰色圆环；

2、通过当前的进度（百分数）计算得到当前应该画的弧度（蓝色）；

3、画出当前进度弧；

4、画出进度文本。

3. 具体实现：

如何画弧和进度文本不再赘述：

1、画一个灰色圆环，可以通过两种方法实现：

第一种是直接画出一个圆环，采用 Canvas.drawCircle() 接口，设置圆心、半径和画笔：

canvas.drawCircle(this.getWidth() / 2,
                this.getHeight() / 2,
                (mRectBounds.width() - mArcWidth)/2,
                mRimPaint);

第二种是画一个 360 度的圆弧：

canvas.drawArc(mArcBounds, 360, 360, false, mRimPaint);

以上两种方法都在 View 重写的 onAttachedToWindow() 方法中实现。

2、通过当前的进度（百分数）计算得到当前应该画的弧度（蓝色）：

mDegree = Math.round( ((float)mProgress / 100) * 360 );

mProgress 为当前的进度，mDegree 为计算得到的当前弧度

3、画出当前弧度：

通过在主线程中调用 View.invalidate() 方法触发 View 的重绘操作，具体是调用 onDraw()， 所以当前弧度在 onDraw() 中绘制：

canvas.drawArc(mArcBounds, -90, mDegree, false, mArcPaint);

mDegree 即为上一步计算得到的弧度。

4、Activity 中的实现：

这里我们开启了一个工作线程，减速实现进度的刷新，并实现进度点击后的重新加载。注意 mProgress.setProgress() 方法，在这个方法中我们实现的就是通过进度计算弧度的操作，并通过 invalidate 重绘。

protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);

          mProgress = (CustomArc) findViewById(R.id.progress);

          final Runnable r = new Runnable() {
               public void run() {
                    running = true;
                    while(progress<101) {
                         mProgress.setProgress(progress);
                         progress++;
                         try {
                              Thread.sleep(10 + progress);
                         } catch (InterruptedException e) {
                              // TODO Auto-generated catch block
                              e.printStackTrace();
                         }
                    }
                    running = false;
               }
        };

        mProgress.setOnClickListener(new View.OnClickListener() {

               @Override
               public void onClick(View v) {
                    // TODO Auto-generated method stub
                    if(!running) {
                         progress = 0;
                         mProgress.resetCount();
                         mThread = new Thread(r);
                         mThread.start();
                    }
               }
          });
     }

5、完整的工程请下载：CustomArc