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