Android 自定义电量百分比

效果图：

BatteryLevelView 类：

/**
 * 自定义电池电量
 */
class BatteryLevelView @JvmOverloads constructor
    (context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    View(context, attrs, defStyleAttr) {

    //默认满电
    private var mPower = 100

    //充电状态 true：充电 false：未充电
    private var mIsCharging = false

    //上下文
    private val mContext = context

    //电池颜色
    private var mPowerColor = Color.YELLOW

    //防止电量从100闪到实际电量
    private var mPowerStr = ""

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //电池宽度
        val width = getDp2px(40f)
        //电池高度
        val height = getDp2px(20f)
        //电池头宽度
        val headWidth = getDp2px(5f)
        //电池头高度
        val headHeight = getDp2px(10f)
        //圆角
        val roundX = getDp2px(1f)
        val roundY = getDp2px(1f)
        //内边距
        val margin = getDp2px(1f)

        //外框
        val paintBorder = Paint()
        //外框颜色
        paintBorder.color = Color.BLACK
        //抗锯齿
        paintBorder.isAntiAlias = true
        //边框
        paintBorder.strokeWidth = 3f
        paintBorder.style = Paint.Style.STROKE
        val rectF = RectF(0f, 0f, width, height)
        canvas.drawRoundRect(rectF, roundX, roundY, paintBorder)

        //文字画笔
        val textPaint = Paint()
        textPaint.color = Color.BLACK
        textPaint.isAntiAlias = true
        textPaint.textSize = 35f

        //电池电量
        val powerValues = mPower / 100.0f
        val paintPower = Paint(paintBorder)
        paintPower.style = Paint.Style.FILL

        //低电量
        val lowerPaint = Paint(paintBorder)
        lowerPaint.style = Paint.Style.FILL
        lowerPaint.color = mPowerColor
        if (mPower < 30) {
            lowerPaint.color = Color.RED
        } else {
            lowerPaint.color = mPowerColor
        }
        
        //画电量
        if (powerValues != 0f && !mIsCharging) {
            val right = margin - margin + ((width - margin) * powerValues).toInt()
            val bottom = margin + height - margin * 2
            val rect = RectF(margin, margin, right, bottom)
            //画矩形
            canvas.drawRoundRect(rect, roundX, roundY, lowerPaint)
            //画数字
            canvas.drawText(mPowerStr, roundX + (width / 4), (roundY + (height / 1.5)).toFloat(), textPaint)
        }

        //画电池头
        val top = height / 2 - headHeight / 2
        val right = width + headWidth
        val bottom = top + headHeight
        val rect = Rect(width.toInt(), top.toInt(), right.toInt(), bottom.toInt())
        canvas.drawRect(rect, paintPower)

        //在充电中
        if (mIsCharging) {
            val rectF = RectF(roundX, roundX, width - roundX, height - roundX)
            //充电图标【过时写法】建议200x100图片
            //val drawable = resources.getDrawable(R.drawable.ic_launcher_background)
            val drawable = ContextCompat.getDrawable(mContext, R.mipmap.batt_img)
            val bitmapDrawable = drawable as BitmapDrawable
            val bitmap = bitmapDrawable.bitmap
            canvas.drawBitmap(bitmap, null, rectF, paintBorder)
        }
    }

    /**
     * 设置当前电量
     */
    fun setPower(power: Int) {
        this.mPower = power
        this.mPowerStr = power.toString()
        invalidate()
    }

    /**
     * 是否充电中
     */
    fun setCharging(charging: Boolean) {
        this.mIsCharging = charging
        invalidate()
    }

    /**
     * 电池电量颜色
     */
    fun setPowerColor(color: Int) {
        this.mPowerColor = color
        invalidate()
    }

    /**
     * dp2px
     */
    private fun getDp2px(dpValue: Float): Float {
        val scale = mContext.resources.displayMetrics.density
        return dpValue * scale + 0.5f
    }
}

使用方法：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //随机电量
        batterText.setOnClickListener {
            batterView.setCharging(false)
            //随机生成0-100电量
            batterView.setPower((Math.random() * 100).toInt())
        }
        //充电中
        charingText.setOnClickListener {
            batterView.setCharging(true)
        }
        //电池颜色
        //batterView.setPowerColor(Color.GREEN)
    }
}

对应布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <com.example.csdn.BatteryLevelView
        android:layout_marginTop="20dp"
        android:id="@+id/batterView"
        android:layout_width="100dp"
        android:layout_height="50dp" />

    <Button
        android:id="@+id/batterText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="随机电量" />

    <Button
        android:id="@+id/charingText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="充电中" />

</LinearLayout>