自定义view之电池充电view动画

最新推荐文章于 2024-04-24 18:45:14 发布

Nick明

最新推荐文章于 2024-04-24 18:45:14 发布

阅读量1k

点赞数 1

分类专栏： Android java编程技术博客

本文链接：https://blog.youkuaiyun.com/u013982769/article/details/50978063

版权

这篇博客介绍了如何在Android中创建一个自定义的电池充电视图动画。作者通过分析布局，详细阐述了实现过程，包括绘制大圆角矩形、小矩形以及根据进度填充绿色矩形的步骤。重点讲解了利用canvas的drawClipRect方法来实现充电进度与字体颜色变化的同步效果，同时提到了边界计算和drawClipRect应用中的常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近研究了下android的绘图，看到论坛有需求要画一个充电的电池，所以就拿来练手，实现的效果就是不停的充电，然后动态改变充电进度的颜色。

实现效果如图：

首先分析一下布局：

1.总体上，先画一个大的圆角矩形，再根据圆角矩形的大小，来画一个三分之一高的小矩形。

2.执行时，根据传来的进度值，来填充一个绿色的矩形在里面。

3.难点在于需要判断当绿色的矩形触碰到字体时，要让字体呈现变色的状态，这就要利用到canvas的drawClipRect来同步绘制字体，当进度更新到字体的bouds边界时，让canvas根据进度跟新来绘制一部分字体，然后根据进度来绘制剩余字体的颜色。

4,其中比较容易出错的就是边界的计算与绘制字体drawClipRect方法的应用。

好吧，分析完了，现在来实现方法：

首先在attrs下新建属性:

<declare-styleable name="BatteryView">
        <attr name="contentTextsize" format="dimension"></attr>
        <attr name="batteryColor" format="color"></attr>
        <attr name="borderWidther" format="dimension"></attr>
    </declare-styleable>

然后就是常规的自定view：

package com.nicming.mvptestdemo.canvas_practice;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint