通过Canvas的叠加实现Android中环形View的颜色填充动画效果

最近看到很多国内和国外的APP很多表示数据的方式都是通过一个圆环和数字动态展现，很是生动啊，由此也想做个简单的模型试一试效果！

在Android中实现一种效果的方式有很多种，本人使用继承View类，通过Paint和Canvas绘图叠加的方式实现。

首先新建一个RingView继承View类，实现构造器函数如下：（同时获取屏幕的宽和高）

[java]  view plain copy print ?

1.      public RingView(Context context, AttributeSet attrs) {  
2.     super(context, attrs);  
3.     //获取屏幕的宽，高  
4.     WindowManager wm = (WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE);  
5.                       
6.     width = wm.getDefaultDisplay().getWidth();  
7.     height = wm.getDefaultDisplay().getHeight();  
8. }  

接下来实现draw方法：

首先要绘制一个放在最底部的一个圆形，颜色设置为灰色：

[java]  view plain copy print ?

1. @Override  
2.     public void draw(Canvas canvas) {  
3.         // TODO Auto-generated method stub  
4.           
5.          //将圆心设置在屏幕中心  
6.         int pointWidth = width / 2;  
7.          int pointHeight = height / 2;  
8.           
9.         Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);  
10.          paint.setColor(Color.rgb(220, 220, 220));  
11.         canvas.drawCircle(pointWidth, pointHeight, 100, paint);  
12.     }  

接下来需要在其上边叠加一个画弧的Canvas，颜色设置为红色：

[java]  view plain copy print ?

1.      @Override  
2.   public void draw(Canvas canvas) {  
3. // TODO Auto-generated method stub  
4.   
5. ..        
6. paint.setColor(Color.RED);  
7. RectF f = new RectF(pointWidth - 100, pointHeight - 100, pointWidth + 100, pointHeight + 100);  
8. canvas.drawArc(f, -90f, i, true, paint);  
9.  }  

想要变成圆环状，需要在其上边再次绘制一个圆形，以遮挡住弧形，实现圆环状的：颜色设置为白色

[java]  view plain copy print ?

1. @Override  
2.     public void draw(Canvas canvas) {  
3.         // TODO Auto-generated method stub  
4.           
5.         ...       
6.         paint.setColor(Color.WHITE);  
7.         canvas.drawCircle(pointWidth, pointHeight, 80, paint);  
8.     }  

到目前为止，圆环状已经出来了，但是我们的目的不是这样就结束的，还要实现动态显示和数据的关联，所以需要在一个Activity中获取数据并且更改第二层中Canvas绘制扇形的弧度大小，实现动态数据绑定。

在MainActivity中通过Handler方式提交invalidate()重绘界面，实现动态绘制View，首先在MainActivity中建立一个内部类CircleThread:

[java]  view plain copy print ?

1.   private class CircleThread implements Runnable{  
2.   
3. @Override  
4. public void run() {  
5.     // TODO Auto-generated method stub  
6.     while(!Thread.currentThread().isInterrupted()){  
7.         try {  
8.             Thread.sleep(100);  
9.             /** 
10.              * 在新的线程中，发送消息给View，更新界面数据 
11.              * 通过m++实现加速度方式的不断加速绘制弧形 
12.              * i代表要绘制扇形的角度大小，默认下290度 
13.              */  
14.             m++;  
15.             Message msg = new Message();  
16.             msg.what = 1;  
17.             if(i < 290){  
18.                 i += m;  
19.             }else{  
20.                 i = 290;  
21.                 return;  
22.             }  
23.             msg.obj = i;  
24.             circleHandler.sendMessage(msg);  
25.         } catch (InterruptedException e) {  
26.             // TODO Auto-generated catch block  
27.             e.printStackTrace();  
28.         }  
29.     }  
30. }  
31.       
32.   }  

发送消息给Handler，更新View界面

[java]  view plain copy print ?

1.      private Handler circleHandler = new Handler(){  
2.   
3. public void handleMessage(Message msg) {  
4.     super.handleMessage(msg);  
5.     if(msg.what == 1){  
6.         int temp = (Integer)msg.obj;  
7.         ring.setI(temp);  
8.         ring.invalidate();  
9.     }  
10. };  
11. ;  

然后在onCreate方法中开启新的线程，实现动态的效果

[java]  view plain copy print ?

1. new Thread(new CircleThread()).start();  

之后自己还实现了在EditText输入框中输入数据和绘制的弧形绑定，这部分具体代码就舍略了......

实现动态绘制环形之后，我们还需要知道环形所代表的数值大小。而不是一个大概的抽象的数据，所以我们需要在View的onDraw方法中实现显示当前弧度的大小值：

[java]  view plain copy print ?

1. @Override  
2.     public void draw(Canvas canvas) {  
3.         // TODO Auto-generated method stub  
4.           
5.         ...  
6.         //绘制文字  
7.         paint.setColor(Color.BLACK);  
8.         //计算出数字的长度  
9.         float lenTxt = paint.measureText(String.valueOf(i));  
10.         canvas.drawText(String.valueOf(i), pointWidth - lenTxt / 2, pointHeight, paint);  
11.           
12.     }  

这样基本就完成了最开始的设想，具体效果如下图所示：

文章出处：http://blog.csdn.net/kezhongke/article/details/42642673