Wheel ProgressBar 实现之一——画一条弧

http://blog.csdn.net/ixiaobu/article/details/9282129

http://blog.csdn.net/ixiaobu/article/details/9383423

http://blog.csdn.net/ixiaobu/article/details/9469263

1. 实现原理：

Wheel ProgressBar（滚动式进度条），在原生的 android 进度条中只有 indeterminate 式的滚动进度条，现在我们来实现一个 determinate 式进度条，就是可以显示具体进度的滚动式进度条，实现的效果形如下图所示：

我们分三个步骤来讲解：

1、如何准确画一条弧；

2、如何准确画出进度文本；

3、如何动态模拟进度过程。

这三个步骤基本已经说明了确定型滚动进度条的实现原理：根据进度动态地画出圆弧并显示进度文本。

2. 画弧原理：

在 android 中画出一条弧，需要先给出一个矩形区域，然后在限定的矩形区域内按照设定的画笔参数、起点度数、弧的跨度就可以画出一条需要的弧来。具体的接口是 android.graphics.Canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) （http://developer.android.com/reference/android/graphics/Canvas.html#drawArc(android.graphics.RectF, float, float, boolean, android.graphics.Paint)）

这里着重需要讲解的是如何准确画出一条限定区域内的弧。为了描述方便，我们以一个360度的弧（即一个圆）为例，先看一个示意图：

如图所示，假设我们要画一个宽度为 w1 那么粗的圆弧 Arc，那么我们知道要先设定一个正方形的区域 R_XX，如图中有两个区域：R_out 和 R_in，R_out 和 R_in 之间的间隔为 w2 = w1/2。相信不少人一开始就会选择 R_out，而事实上，在 android 中画圆弧时，R_in 才是正确的选择，即，我们要画一个直径为 d，粗度为 w 的圆弧，与必须设定的绘画正方形区域的大小 size 的关系为：

size = d - w

即在上图中有如下关系：

R_in_size = R_out_size - w1

3. 具体实现：

1、自定义一个类 CustomArc，继承自 View；

2、重写 onAttachedToWindow() 方法，设置圆弧正方形区域（RectF  mArcBounds;）和画笔参数（Paint  mArcPaint;）：

     @Override
      public void onAttachedToWindow() {
            super.onAttachedToWindow();

    
            mArcBounds = new RectF((mArcWidth+1)/2, (mArcWidth+1)/2, 

                           getLayoutParams().width - (mArcWidth+1)/2, 

                           getLayoutParams().height - (mArcWidth+1)/2);

            mArcPaint.setColor(mArcColor);

            mArcPaint.setAntiAlias(true);

            mArcPaint.setStyle(Style.STROKE);

            mArcPaint.setStrokeWidth(mArcWidth);

            invalidate();

     }

特别注意其中的粗体代码部分：mArcWidth+1，由于像素值是整数，当画笔的粗度（即圆弧的粗度 mArcWidth）为奇数时，设定的正方形区域与实际理想的区域的宽高值会有一个像素的误差，这时我们应当取偏小的区域，以保证画出的圆弧四周不会向外溢出一个像素。

3、重写 onDraw() 方法，画出圆弧：

     @Override
      protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);

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

     }

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

----------------------------------------------------------------------------------------------------------------------------------------------------------

4. 参考：

ProgressWheel:  https://github.com/Todd-Davies/ProgressWheel

1. 效果展示：

我们在 “ Wheel ProgressBar 实现之一——画一条弧” 中阐述了如何在一个矩形区域内精确画弧。本节我们实现以圆环中心（即矩形区域中心）为对称点画进度文本，如下图的效果所示：

2. 实现原理：

在 android 中画字符是通过 Canvas.drawText(String text, float x, float y, Paint paint); 这个接口来实现的，除了设定画笔参数以外，我们最重要的是确定 x 和 y 的值。默认情况下，(x, y) 指的是该字符相对于其所在区域内的左下坐标点，其中，x 为字符左边缘与所在区域左边缘的距离，y 为字符基线与所在区域底部之间的距离，网上很多说法转载同一篇博文说 x 是字符左边在屏幕的位置，这个解释很模糊，经验证在 View 内部绘图时是错误的。

具体到本文的展示效果，我们通过如下的示意图来解释一下具体的实现原理：

如图所示，我们要先明确四个区域：字符 ‘90’，字符 ‘%’，两个字符之间的间隔，所在的正方形区域。

各个区域的 size 在图中已经描述出来，我们的任务是要计算出两个字符的左下坐标点，即 (Xn, Yn) 和 (Xp, Yp)。

根据图中的描述，我们可以很轻易的通过如下公式计算出这两个坐标：

字符及其间隔的宽度的一半：offset = (Wn + Wp + Dh) / 2

Xn = W/2 - offset

Yn = W/2 + Hn/2

Xp = W/2 + offset - Wp

Yp = W/2 - Hn/2 + Hp

其中，Wn, Hn, Wp, Hp 都可通过相关接口提供，Dh 可由用户指定

3. 具体实现：

我们继续在  “Wheel ProgressBar 实现之一——画一条弧” 中定义的 CustomArc 类中叠加实现此功能：

1、在 onAttachedToWindow() 方法中设置绘字符的画笔参数：

     @Override
      public void onAttachedToWindow() {
           super.onAttachedToWindow();

    

           ... ...

              mProgressPaint.setColor(Color.BLACK);

           mProgressPaint.setStyle(Style.FILL);

           mProgressPaint.setAntiAlias(true);

           mProgressPaint.setTextSize(180);
           mProgressPaint.setTypeface(Typeface.DEFAULT_BOLD);
           
           mPercentPaint.setColor(Color.BLACK);
           mPercentPaint.setStyle(Style.FILL);
           mPercentPaint.setAntiAlias(true);
           mPercentPaint.setTextSize((int)(180 * 0.7));
           mPercentPaint.setTypeface(Typeface.DEFAULT_BOLD);

           invalidate();

     }

2、在  onDraw() 方法中画字符：

     @Override
      protected void onDraw(Canvas canvas) {
           super.onDraw(canvas);

           ... ...

           mProgressPaint.getTextBounds("90", 0, "90".length(), mProgBounds);

           mPercentPaint.getTextBounds("%", 0, 1, mPercentBounds);

           float offset =
                (mProgBounds.width() + mPercentBounds.width() + mPercentBounds.width() / 2) / 2;

           

           canvas.drawText("90",
                this.getWidth() / 2 - offset,
                this.getHeight() / 2 + mProgBounds.height() / 2,
                mProgressPaint);
       
           canvas.drawText("%", 

                this.getWidth() / 2 + offset - mPercentBounds.width(),
                this.getHeight() / 2 - mProgBounds.height() / 2 + mPercentBounds.height(),
                mPercentPaint);
           

     }

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

1. 效果展示：

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

2. 实现原理：

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

1、画一个灰色圆环；

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

3、画出当前进度弧；

4、画出进度文本。

3. 具体实现：

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

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

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

[java] view plain copy

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

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

[java] view plain copy

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

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

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

[java] view plain copy

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

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

3、画出当前弧度：

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

[java] view plain copy

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

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

4、Activity 中的实现：

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

[java] view plain copy

1. protected void onCreate(Bundle savedInstanceState) {  
2.           super.onCreate(savedInstanceState);  
3.           setContentView(R.layout.activity_main);  
4.            
5.           mProgress = (CustomArc) findViewById(R.id.progress);  
6.            
7.           final Runnable r = new Runnable() {  
8.                public void run() {  
9.                     running = true;  
10.                     while(progress<101) {  
11.                          mProgress.setProgress(progress);  
12.                          progress++;  
13.                          try {  
14.                               Thread.sleep(10 + progress);  
15.                          } catch (InterruptedException e) {  
16.                               // TODO Auto-generated catch block  
17.                               e.printStackTrace();  
18.                          }  
19.                     }  
20.                     running = false;  
21.                }  
22.         };  
23.          
24.         mProgress.setOnClickListener(new View.OnClickListener() {  
25.                 
26.                @Override  
27.                public void onClick(View v) {  
28.                     // TODO Auto-generated method stub  
29.                     if(!running) {  
30.                          progress = 0;  
31.                          mProgress.resetCount();  
32.                          mThread = new Thread(r);  
33.                          mThread.start();  
34.                     }  
35.                }  
36.           });  
37.      }  

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