最近看到很多国内和国外的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) {
-
-
-
- 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);
- }
![](https://img-blog.csdn.net/20150112141612484?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvS2V6aG9uZ2tl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
接下来需要在其上边叠加一个画弧的Canvas,颜色设置为红色:
- @Override
- public void draw(Canvas canvas) {
-
-
- ..
- 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) {
-
-
- ...
- 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() {
-
- while(!Thread.currentThread().isInterrupted()){
- try {
- Thread.sleep(100);
-
-
-
-
-
- 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) {
-
- 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) {
-
-
- ...
-
- paint.setColor(Color.BLACK);
-
- float lenTxt = paint.measureText(String.valueOf(i));
- canvas.drawText(String.valueOf(i), pointWidth - lenTxt / 2, pointHeight, paint);
-
- }
这样基本就完成了最开始的设想,具体效果如下图所示:
![](https://img-blog.csdn.net/20150112150541546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvS2V6aG9uZ2tl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
文章出处:http://blog.csdn.net/kezhongke/article/details/42642673