通过Canvas的叠加实现Android中环形View的颜色填充动画效果
来源:互联网 发布:cdr软件 编辑:程序博客网 时间:2024/06/05 06:30
最近看到很多国内和国外的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方法:
首先要绘制一个放在最底部的一个圆形,颜色设置为灰色:
@Overridepublic 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); }
想要变成圆环状,需要在其上边再次绘制一个圆形,以遮挡住弧形,实现圆环状的:颜色设置为白色
@Overridepublic 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{@Overridepublic void run() {// TODO Auto-generated method stubwhile(!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 blocke.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方法中实现显示当前弧度的大小值:
@Overridepublic 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);}这样基本就完成了最开始的设想,具体效果如下图所示:
0 0
- 通过Canvas的叠加实现Android中环形View的颜色填充动画效果
- 通过Canvas的叠加实现Android中环形View的颜色填充动画效果
- RelativeLayout实现叠加View的动画效果
- Android应用通过AnimationDrawable实现View的动画效果
- Android 中通过Canvas 与线程结合实现动画效果
- Android中View的动画效果
- android RelativeLayout属性和使用, 实现上面view叠加在下面view之上的效果
- android RelativeLayout属性和使用, 实现上面view叠加在下面view之上的效果
- android RelativeLayout属性和使用, 实现上面view叠加在下面view之上的效果2
- Android中RecyclerView的item运用覆盖view的方法实现item的动画效果
- Android 使用View的旋转实现漂亮的动画效果
- Android 绘制一个Loading动画__向图片中缓慢填充颜色,从而形成动画效果
- Android自定义View: 如何实现类钟摆的动画效果?
- Android实现带动画效果的自定义View
- 【Android入门 九】通过绘画View实现动画效果
- Android中动画效果的实现(转)
- Android中动画效果的实现
- Canvas实现绚丽的倒计时效果(动画效果)
- UML图
- Python3 如何优雅地使用正则表达式(详解七)
- scala入门-04类(class)的使用
- Android中通过typeface设置字体 textAppearance设置文字外观
- 小方法总结
- 通过Canvas的叠加实现Android中环形View的颜色填充动画效果
- linux下对绝对路径和相对路径的理解
- c/c++读写xml 数据
- hdu 5136 Yue Fei's Battle(计数DP)
- TCP连接探测中的Keepalive和心跳包. 关键字: tcp keepalive, 心跳, 保活
- 自定义Dialog
- Vim 打开两三个文件,并且进行对比,或者说同时打开两个界面
- 初窥 quick-cocos2d-x
- 一、布局优化