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

简介: 最近看到很多国内和国外的APP很多表示数据的方式都是通过一个圆环和数字动态展现,很是生动啊,由此也想做个简单的模型试一试效果! 在Android中实现一种效果的方式有很多种,本人使用继承View类,通过Paint和Canvas绘图叠加的方式实现。

最近看到很多国内和国外的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);
		
	}
这样基本就完成了最开始的设想,具体效果如下图所示:










目录
相关文章
|
4月前
|
存储 Shell Android开发
基于Android P,自定义Android开机动画的方法
本文详细介绍了基于Android P系统自定义开机动画的步骤,包括动画文件结构、脚本编写、ZIP打包方法以及如何将自定义动画集成到AOSP源码中。
87 2
基于Android P,自定义Android开机动画的方法
|
2月前
|
Android开发 UED
Android 中加载 Gif 动画
【10月更文挑战第20天】加载 Gif 动画是 Android 开发中的一项重要技能。通过使用第三方库或自定义实现,可以方便地在应用中展示生动的 Gif 动画。在实际应用中,需要根据具体情况进行合理选择和优化,以确保用户体验和性能的平衡。可以通过不断的实践和探索,进一步掌握在 Android 中加载 Gif 动画的技巧和方法,为开发高质量的 Android 应用提供支持。
|
3月前
|
Android开发
Android中SurfaceView的双缓冲机制和普通View叠加问题解决办法
本文介绍了 Android 平台上的 SurfaceView,这是一种高效的图形渲染控件,尤其适用于视频播放、游戏和图形动画等场景。文章详细解释了其双缓冲机制,该机制通过前后缓冲区交换来减少图像闪烁,提升视觉体验。然而,SurfaceView 与普通 View 叠加时可能存在 Z-Order 不一致、同步问题及混合渲染难题。文中提供了使用 TextureView、调整 Z-Order 和创建自定义组合控件等多种解决方案。
160 9
|
7月前
|
Java Android开发 开发者
Android10 修改开发者选项中动画缩放默认值
Android10 修改开发者选项中动画缩放默认值
210 0
|
7月前
|
XML Java Android开发
android的三种动画
android的三种动画
39 0
|
3月前
|
Android开发
Android经典实战之Textview文字设置不同颜色、下划线、加粗、超链接等效果
本文介绍了 `SpannableString` 在 Android 开发中的强大功能,包括如何在单个字符串中应用多种样式,如颜色、字体大小、风格等,并提供了详细代码示例,展示如何设置文本颜色、添加点击事件等,助你实现丰富文本效果。
289 3
|
5月前
|
XML Android开发 数据格式
Android 中如何设置activity的启动动画,让它像dialog一样从底部往上出来
在 Android 中实现 Activity 的对话框式过渡动画:从底部滑入与从顶部滑出。需定义两个 XML 动画文件 `activity_slide_in.xml` 和 `activity_slide_out.xml`,分别控制 Activity 的进入与退出动画。使用 `overridePendingTransition` 方法在启动 (`startActivity`) 或结束 (`finish`) Activity 时应用这些动画。为了使前 Activity 保持静止,可定义 `no_animation.xml` 并在启动新 Activity 时仅设置新 Activity 的进入动画。
142 12
|
5月前
|
前端开发 API Android开发
Android自定义View之Canvas一文搞定
这篇文章介绍了Android自定义View中如何使用Canvas和Paint来绘制图形。Canvas可理解为画布,用于绘制各种形状如文字、点、线、矩形、圆角矩形、圆和弧。常见API包括`drawText()`、`drawPoint()`、`drawLine()`、`drawRect()`等。文章还提到了Canvas的保存、恢复、平移和旋转方法,通过绘制钟表盘的例子展示了如何实际应用。总结关键点:Canvas与Paint结合用于图像绘制,掌握Canvas的基本绘图函数及坐标变换操作是自定义View的关键。
83 0
Android自定义View之Canvas一文搞定
|
6月前
|
Android开发 开发者
Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。
【6月更文挑战第26天】Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。要更改主题,首先在该文件中创建新主题,如`MyAppTheme`,覆盖所需属性。然后,在`AndroidManifest.xml`中应用主题至应用或特定Activity。运行时切换主题可通过重新设置并重启Activity实现,或使用`setTheme`和`recreate()`方法。这允许开发者定制界面并与品牌指南匹配,或提供多主题选项。
92 6