最近看到很多国内和国外的APP很多表示数据的方式都是通过一个圆环和数字动态展现，很是生动啊，由此也想做个简单的模型试一试效果！
在Android中实现一种效果的方式有很多种，本人使用继承View类，通过Paint和Canvas绘图叠加的方式实现。
首先新建一个RingView继承View类，实现构造器函数如下：（同时获取屏幕的宽和高）
public RingView(Context context, AttributeSet attrs) {
super(context, attrs);
//获取屏幕的宽，高
WindowManager wm = (WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE);
width = wm.getDefaultDisplay().getWidth();
height = wm.getDefaultDisplay().getHeight();
}
接下来实现draw方法：
首先要绘制一个放在最底部的一个圆形，颜色设置为灰色：
@Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
//将圆心设置在屏幕中心
int pointWidth = width / 2;
int pointHeight = height / 2;
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.rgb(220, 220, 220));
canvas.drawCircle(pointWidth, pointHeight, 100, paint);
}
接下来需要在其上边叠加一个画弧的Canvas，颜色设置为红色：
@Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
...
paint.setColor(Color.RED);
RectF f = new RectF(pointWidth - 100, pointHeight - 100, pointWidth + 100, pointHeight + 100);
canvas.drawArc(f, -90f, i, true, paint);
}
想要变成圆环状，需要在其上边再次绘制一个圆形，以遮挡住弧形，实现圆环状的：颜色设置为白色
@Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
...
paint.setColor(Color.WHITE);
canvas.drawCircle(pointWidth, pointHeight, 80, paint);
}
到目前为止，圆环状已经出来了，但是我们的目的不是这样就结束的，还要实现动态显示和数据的关联，所以需要在一个Activity中获取数据并且更改第二层中Canvas绘制扇形的弧度大小，实现动态数据绑定。
在MainActivity中通过Handler方式提交invalidate()重绘界面，实现动态绘制View，首先在MainActivity中建立一个内部类CircleThread:
private class CircleThread implements Runnable{
@Override
public void run() {
// TODO Auto-generated method stub
while(!Thread.currentThread().isInterrupted()){
try {
Thread.sleep(100);
/**
* 在新的线程中，发送消息给View，更新界面数据
* 通过m++实现加速度方式的不断加速绘制弧形
* i代表要绘制扇形的角度大小，默认下290度
*/
m++;
Message msg = new Message();
msg.what = 1;
if(i < 290){
i += m;
}else{
i = 290;
return;
}
msg.obj = i;
circleHandler.sendMessage(msg);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
发送消息给Handler，更新View界面
private Handler circleHandler = new Handler(){
public void handleMessage(Message msg) {
super.handleMessage(msg);
if(msg.what == 1){
int temp = (Integer)msg.obj;
ring.setI(temp);
ring.invalidate();
}
};
};
然后在onCreate方法中开启新的线程，实现动态的效果
new Thread(new CircleThread()).start();之后自己还实现了在EditText输入框中输入数据和绘制的弧形绑定，这部分具体代码就舍略了......
实现动态绘制环形之后，我们还需要知道环形所代表的数值大小。而不是一个大概的抽象的数据，所以我们需要在View的onDraw方法中实现显示当前弧度的大小值：
@Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
...
//绘制文字
paint.setColor(Color.BLACK);
//计算出数字的长度
float lenTxt = paint.measureText(String.valueOf(i));
canvas.drawText(String.valueOf(i), pointWidth - lenTxt / 2, pointHeight, paint);
}
这样基本就完成了最开始的设想，具体效果如下图所示：
