Android自定义电池电量显示组件(kotlin，java)

最近产品研发需求需要显示在线设备的电池电量状态，然后UI给出的效果的图是这样的

于是就开始了自定义个，因为是项目特定的UI所以很多属性都没有直接抽取到styles里面了，直接上代码（因为项目是使用kotlin的，所以直接用kotlin进行编程了，当然也附带了Java版本的）

kotlin版本（里面用到的颜色值可自定义，这里是使用项目工具类转过来的）：

package com.viewimport android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.RectF
import android.util.AttributeSet
import android.view.View
import com.blankj.utilcode.util.ColorUtils
import com.blankj.utilcode.util.ImageUtils
import com.view.R/*** @CreateDate: * @Author:lp* @Description:*/
class BatteryView @JvmOverloads constructor(context: Context?, attrs: AttributeSet? = null) :View(context, attrs) {private val batteryBodyPainter: Paint//电池外边框画笔private val batteryHeadPainter: Paint//电池盖画笔private val mPowerPaint: Paint//电量画笔private val outlineRect: RectF//电池矩形private val mCapRect: RectF//电池盖矩形private val batteryRect: RectF//电量矩形private var fullPowerWidth = 0f //满电量时电池体的宽度。private var battery = 20private var leftPoint = 0fprivate var topPoint = 0ffun setBattery(battery: Int) {this.battery = batteryinvalidate()}fun getBattery(): Int {return battery}override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {super.onMeasure(widthMeasureSpec, heightMeasureSpec)val specWidthSize = MeasureSpec.getSize(widthMeasureSpec) //宽val specHeightSize = MeasureSpec.getSize(heightMeasureSpec) //高//设置电池外框outlineRect.right = specWidthSize - OUTLINE_THICKNESS - CAP_WIDTHoutlineRect.bottom = specHeightSize - OUTLINE_THICKNESS//设置电池盖矩形mCapRect.left = outlineRect.rightmCapRect.top = specHeightSize.toFloat() / 2 - CAP_HEIGHT / 2mCapRect.right = specWidthSize.toFloat()mCapRect.bottom = specHeightSize.toFloat() / 2 + CAP_HEIGHT / 2//设置电池体batteryRect.left = outlineRect.left + GAP_OF_SHAPE_BODYbatteryRect.top = outlineRect.top + GAP_OF_SHAPE_BODYbatteryRect.bottom = outlineRect.bottom - GAP_OF_SHAPE_BODY//闪电位置leftPoint = specWidthSize / 2 - OUTLINE_THICKNESS * 2topPoint = specHeightSize / 2 - OUTLINE_THICKNESS * 2fullPowerWidth = outlineRect.right - GAP_OF_SHAPE_BODY - batteryRect.leftsetMeasuredDimension(specWidthSize, specHeightSize)}override fun onDraw(canvas: Canvas) {super.onDraw(canvas)//设置电量矩形var batter = batteryif (batter < 0) {batter = 50}batteryRect.right = batter.toFloat() / 100 * fullPowerWidth + batteryRect.leftwhen {battery < 0 -> {batteryBodyPainter.color = ColorUtils.getColor(R.color.color_818283)batteryHeadPainter.color = ColorUtils.getColor(R.color.color_818283)mPowerPaint.color = ColorUtils.getColor(R.color.color_818283)}battery <= 20 -> {batteryBodyPainter.color = ColorUtils.getColor(R.color.color_818283)batteryHeadPainter.color = ColorUtils.getColor(R.color.color_FF4A37)mPowerPaint.color = ColorUtils.getColor(R.color.color_FF4A37)}battery <= 40 -> {batteryBodyPainter.color = ColorUtils.getColor(R.color.color_41D9B5)batteryHeadPainter.color = ColorUtils.getColor(R.color.color_41D9B5)mPowerPaint.color = ColorUtils.getColor(R.color.color_FF9037)}else -> {batteryBodyPainter.color = ColorUtils.getColor(R.color.color_2CBF6C)batteryHeadPainter.color = ColorUtils.getColor(R.color.color_2CBF6C)mPowerPaint.color = ColorUtils.getColor(R.color.color_2CBF6C)}}canvas.drawRoundRect(outlineRect,ROUND_CORNER_RADIUS,ROUND_CORNER_RADIUS,batteryBodyPainter)canvas.drawRoundRect(mCapRect, 1f, 1f, batteryHeadPainter)canvas.drawRoundRect(batteryRect, ROUND_CORNER_RADIUS, ROUND_CORNER_RADIUS, mPowerPaint)if (battery in 0..20) {val bitmap = ImageUtils.getBitmap(R.mipmap.shandian)canvas.drawBitmap(bitmap, leftPoint, topPoint, null)}}companion object {private const val OUTLINE_THICKNESS = 3.0f //电池框厚度private const val CAP_WIDTH = 2.0f //电池盖宽度private const val CAP_HEIGHT = 8.0f //电池盖高度private const val GAP_OF_SHAPE_BODY = 2.0f //电池体与外框之间的间隙private const val ROUND_CORNER_RADIUS = 2f//电池圆角}init {//电池外框batteryBodyPainter = Paint()batteryBodyPainter.color = ColorUtils.getColor(R.color.color_2CBF6C)batteryBodyPainter.isAntiAlias = truebatteryBodyPainter.style = Paint.Style.STROKEbatteryBodyPainter.strokeWidth = OUTLINE_THICKNESS//电池盖batteryHeadPainter = Paint()batteryHeadPainter.color = ColorUtils.getColor(R.color.color_FF0A0A)batteryHeadPainter.isAntiAlias = truebatteryHeadPainter.style = Paint.Style.FILL//电量mPowerPaint = Paint()mPowerPaint.isAntiAlias = truemPowerPaint.color = ColorUtils.getColor(R.color.color_3C83FA)mPowerPaint.style = Paint.Style.FILLoutlineRect = RectF()outlineRect.left = OUTLINE_THICKNESSoutlineRect.top = OUTLINE_THICKNESSmCapRect = RectF()batteryRect = RectF()}
}

Java版本：

package com.view;import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;import com.blankj.utilcode.util.ColorUtils;
import com.blankj.utilcode.util.ImageUtils;
import com.blankj.utilcode.util.ResourceUtils;
import com.view.R;/*** @CreateDate: * @Author:lp* @Description:*/
public class BatteryView extends View {private static final float OUTLINE_THICKNESS = 3.0f;//电池框厚度private static final float CAP_WIDTH = 2.0f;//电池盖宽度private static final float CAP_HEIGHT = 8.0f;//电池盖高度private static final float GAP_OF_SHAPE_BODY = 2.0f;//电池体与外框之间的间隙private static final float ROUND_CORNER_RADIUS = 2;private float fullPowerWidth; //满电量时电池体的宽度。private int battery = 20;private Paint batteryBodyPainter;private Paint batteryHeadPainter;private Paint mPowerPaint;//电量画笔private RectF outlineRect;//电池矩形private RectF mCapRect;//电池盖矩形private RectF batteryRect;//电量矩形private int left;private int top;public BatteryView(Context context) {this(context, null);}public BatteryView(Context context, AttributeSet attrs) {super(context, attrs);//电池外框batteryBodyPainter = new Paint();batteryBodyPainter.setColor(ColorUtils.getColor(R.color.color_2CBF6C));batteryBodyPainter.setAntiAlias(true);batteryBodyPainter.setStyle(Paint.Style.STROKE);batteryBodyPainter.setStrokeWidth(OUTLINE_THICKNESS);//电池盖batteryHeadPainter = new Paint();batteryHeadPainter.setColor(ColorUtils.getColor(R.color.color_FF0A0A));batteryHeadPainter.setAntiAlias(true);batteryHeadPainter.setStyle(Paint.Style.FILL);//电量mPowerPaint = new Paint();mPowerPaint.setAntiAlias(true);mPowerPaint.setColor(ColorUtils.getColor(R.color.color_3C83FA));mPowerPaint.setStyle(Paint.Style.FILL);outlineRect = new RectF();outlineRect.left = OUTLINE_THICKNESS;outlineRect.top = OUTLINE_THICKNESS;mCapRect = new RectF();batteryRect = new RectF();}public void setBattery(int battery) {
//        this.battery = battery > 100 ? 100 : battery < 1 ? 1 : battery;this.battery = battery;invalidate();}public int getBattery() {return battery;}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int specWidthSize = MeasureSpec.getSize(widthMeasureSpec);//宽int specHeightSize = MeasureSpec.getSize(heightMeasureSpec);//高//设置电池外框outlineRect.right = specWidthSize - OUTLINE_THICKNESS - CAP_WIDTH;outlineRect.bottom = specHeightSize - OUTLINE_THICKNESS;//设置电池盖矩形mCapRect.left = outlineRect.right;mCapRect.top = (float) specHeightSize / 2 - CAP_HEIGHT / 2;mCapRect.right = specWidthSize;mCapRect.bottom = (float) specHeightSize / 2 + CAP_HEIGHT / 2;//设置电池体batteryRect.left = outlineRect.left + GAP_OF_SHAPE_BODY;batteryRect.top = outlineRect.top + GAP_OF_SHAPE_BODY;batteryRect.bottom = outlineRect.bottom - GAP_OF_SHAPE_BODY;//闪电位置left = (int) (specWidthSize / 2 - OUTLINE_THICKNESS * 2);top = (int) (specHeightSize / 2 - OUTLINE_THICKNESS * 2);fullPowerWidth = outlineRect.right - GAP_OF_SHAPE_BODY - batteryRect.left;setMeasuredDimension(specWidthSize, specHeightSize);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//设置电量矩形int batter = battery;if (batter < 0) {batter = 50;}batteryRect.right = (float) batter / 100 * fullPowerWidth + batteryRect.left;if (battery < 0) {batteryBodyPainter.setColor(ColorUtils.getColor(R.color.color_818283));batteryHeadPainter.setColor(ColorUtils.getColor(R.color.color_818283));mPowerPaint.setColor(ColorUtils.getColor(R.color.color_818283));} else if (battery <= 20) {batteryBodyPainter.setColor(ColorUtils.getColor(R.color.color_818283));batteryHeadPainter.setColor(ColorUtils.getColor(R.color.color_FF4A37));mPowerPaint.setColor(ColorUtils.getColor(R.color.color_FF4A37));} else if (battery < 40) {batteryBodyPainter.setColor(ColorUtils.getColor(R.color.color_41D9B5));batteryHeadPainter.setColor(ColorUtils.getColor(R.color.color_41D9B5));mPowerPaint.setColor(ColorUtils.getColor(R.color.color_FF9037));} else {batteryBodyPainter.setColor(ColorUtils.getColor(R.color.color_2CBF6C));batteryHeadPainter.setColor(ColorUtils.getColor(R.color.color_2CBF6C));mPowerPaint.setColor(ColorUtils.getColor(R.color.color_2CBF6C));}canvas.drawRoundRect(outlineRect, ROUND_CORNER_RADIUS, ROUND_CORNER_RADIUS, batteryBodyPainter);canvas.drawRoundRect(mCapRect, 1, 1, batteryHeadPainter);canvas.drawRoundRect(batteryRect, ROUND_CORNER_RADIUS, ROUND_CORNER_RADIUS, mPowerPaint);if (battery >= 0 && battery <= 20) {Bitmap bitmap = ImageUtils.getBitmap(R.mipmap.shandian);canvas.drawBitmap(bitmap, left, top, null);}}
}

上面代码中使用到的闪电图片(当然也可以去矢量图库下载一个)：

使用：在布局文件中：

<com.view.BatteryViewandroid:id="@+id/batteryVV"android:layout_width="26dp"android:layout_height="12dp"android:layout_marginTop="5dp" />

在代码中直接通过setBattery来设置电量（比如：batteryView.setBattery(50)，设置电量为50%），因为项目需求，如果设备离线电池电量灰置（这里直接传入-1表示设备离线），如果低于20就需要增减红色闪电显示(这些都可以根据需要修改源代码)，方便简洁，哈哈哈哈哈哈~

Android自定义电池电量显示组件(kotlin，java)相关推荐

Android自定义View之电池电量显示
自定义简单的电池电量显示.话不多说,直接上代码 package com.kimascend.thermometer.customview; import android.content.Context ...
android 自定义控件焦点,Android 自定义Button按钮显示样式（正常、按下、获取焦点）...
现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天学习自定义Button按钮样式.Button样式修改的是Button的背景 ...
Android 绘制电池电量图标（含充电状态）。
Android 绘制电池电量图标在视频播放等全屏情况下有用到. 先在布局文件中写一个ImageView <?xml version="1.0" encoding=" ...
Android自定义导览地图组件(一)
丨版权说明 : <Android自定义导览地图组件(一)>于当前CSDN博客和乘月网属同一原创,转载请说明出处,谢谢. 鉴于Android关于自定义导览地图的相关资料以及 ...
android 电池电量广播,Android查看电池电量的方法(基于BroadcastReceiver)
本文实例讲述了Android查看电池电量的方法.分享给大家供大家参考,具体如下: 程序如下: import android.app.Activity; import android.app.Dialo ...
android自定义dialog不显示,Android 自定义的dialog显示不正常呢，怎么回事？？？
Android 自定义的dialog显示不正常呢,怎么回事??? 用android的自定义布局文件: android:layout_width="match_parent" and ...
Android自定义Textview 蒙语显示（蒙古文字）
Android自定义Textview 蒙语显示(蒙古文字) 竖排Textview 自动换行从左到右蒙语字体包 demo下载地址 https://download.csdn.net/download ...
黑苹果中使用Config Configurator工具修复一些声卡和电池电量显示问题、隐藏多余引导、啰嗦模式
黑苹果中使用Config Configurator工具修复一些声卡和电池电量显示问题.隐藏多余引导.啰嗦模式好多人安装黑苹果之后没有声音.电池显示没有.引导太多.有啰嗦模式我这里出了教程解决这些问 ...
安卓修改电池容量教程_安卓(Android)系统电池电量修改图文教程
安卓( Android )系统电池电量修改图文教程有机友不喜欢新 rom 的电池图标, 想要官方的原版电池图标,也有机友想更换其他电池图标.为了方便想更换电池图标的机友,发一个最简易的教程. 在 ...

Android自定义电池电量显示组件(kotlin，java)

Android自定义电池电量显示组件(kotlin，java)相关推荐

最新文章

热门文章