Android仿苹果电量显示

自定义View

自定义电池电量的

View

如下：

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.RectF
import android.util.AttributeSet
import android.view.View

class BatteryView : View {privatevar mMaxLevel =100privatevar mLinePaint: Paint?=nullprivatevar mBatteryPaint: Paint?=nullprivatevar mRectPaint: Paint?=nullprivatevar mTextPaint: Paint?=nullprivatevar mRectF: RectF?=nullprivatevar mWidth =0privatevar mHeight =0privatevar mPerPartWidth =0privatevar mBatteryLevel =0privatevar mHeaderHeight =0//电池头部高度constructor(context: Context?, attrs: AttributeSet?):super(context, attrs){init()}constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int):super(context, attrs, defStyleAttr){init()}overridefunonMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int){super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        mWidth = MeasureSpec.getSize(widthMeasureSpec)
        mHeight = MeasureSpec.getSize(heightMeasureSpec)if(MeasureSpec.getMode(widthMeasureSpec)== MeasureSpec.UNSPECIFIED
            || MeasureSpec.getMode(widthMeasureSpec)== MeasureSpec.AT_MOST
        ){
            mWidth =150}if(MeasureSpec.getMode(heightMeasureSpec)== MeasureSpec.UNSPECIFIED
            || MeasureSpec.getMode(heightMeasureSpec)== MeasureSpec.AT_MOST
        ){
            mHeight =80}
        mPerPartWidth =(mWidth - BATTERY_HEADER_WIDTH)/ PART_COUNT
        mHeaderHeight = mHeight /3setMeasuredDimension(mWidth, mHeight)}privatefuninit(){
        mLinePaint =Paint()
        mLinePaint!!.isAntiAlias =true
        mLinePaint!!.color = Color.WHITE
        mBatteryPaint =Paint()
        mBatteryPaint!!.isAntiAlias =true
        mBatteryPaint!!.color = Color.WHITE
        mRectPaint =Paint()
        mRectPaint!!.isAntiAlias =true
        mRectPaint!!.color = Color.GRAY
        mRectPaint!!.style = Paint.Style.FILL
        mTextPaint =Paint()
        mTextPaint!!.color = Color.BLACK
        mTextPaint!!.textSize =50f
        mTextPaint!!.style = Paint.Style.FILL
        mTextPaint!!.textAlign = Paint.Align.CENTER
        mRectF =RectF()}overridefunonDraw(canvas: Canvas){super.onDraw(canvas)val batteryWidth = mWidth - BATTERY_HEADER_WIDTH

        //绘制电池背景
        mRectF!!.right = batteryWidth.toFloat()
        mRectF!!.bottom = mHeight.toFloat()
        canvas.drawRoundRect(mRectF!!,20f,20f, mRectPaint!!)//绘制当前电量
        canvas.save()
        canvas.clipRect(0,0, batteryWidth * mBatteryLevel / mMaxLevel, mHeight)//裁剪矩形
        canvas.drawRoundRect(mRectF!!,20f,20f, mBatteryPaint!!)
        canvas.restore()if(DRAW_PART_LINE){//绘制电池分格线for(i in1 until PART_COUNT){
                canvas.drawLine((mPerPartWidth * i).toFloat(),0f,(mPerPartWidth * i).toFloat(),
                    mHeight.toFloat(),
                    mLinePaint!!)}}//绘制电量文字val fontMetrics = mTextPaint!!.fontMetrics
        val top = fontMetrics.top //基线到字体上边框的距离val bottom = fontMetrics.bottom //基线到字体下边框的距离val baseLineY =(mRectF!!.centerY()- top /2- bottom /2).toInt()//基线中间点的y轴
        canvas.drawText(
            mBatteryLevel.toString(),
            mRectF!!.centerX(),
            baseLineY.toFloat(),
            mTextPaint!!)//绘制右边电池头部
        mRectF!!.left = batteryWidth.toFloat()
        mRectF!!.top =(mHeight /2- mHeaderHeight /2).toFloat()
        mRectF!!.right =(mRectF!!.left + BATTERY_HEADER_WIDTH).toFloat()
        mRectF!!.bottom =(mHeight /2+ mHeaderHeight /2).toFloat()
        mRectPaint!!.style = Paint.Style.FILL
        canvas.drawRect(mRectF!!, mRectPaint!!)}funsetBatteryLevel(level: Int){
        mBatteryLevel = level
        if(level <=10){
            mBatteryPaint!!.color = Color.RED
        }else{
            mBatteryPaint!!.color = Color.WHITE
        }postInvalidate()}funsetMaxLevel(maxLevel: Int){
        mMaxLevel = maxLevel
        postInvalidate()}companionobject{privateconstval DRAW_PART_LINE =false//是否绘制分格线privateconstval PART_COUNT =4//分格总数privateconstval BATTERY_HEADER_WIDTH =8//右边电池头宽度}}

自定义中通过

Canvas.clipRect()

函数裁剪圆角矩形，实现类似苹果电量的半圆角半直角的效果。

电量监听

主界面代码监听电量变化的广播：

class MainActivity :AppCompatActivity(){privatevar mBatteryView: BatteryView?=nullprotectedfunonCreate(savedInstanceState: Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_fullscreen)
        mBatteryView =findViewById(R.id.battery_view)val filter =IntentFilter()
        filter.addAction(Intent.ACTION_BATTERY_CHANGED)registerReceiver(receiver, filter)}privateval receiver: BroadcastReceiver =object:BroadcastReceiver(){overridefunonReceive(context: Context, intent: Intent){if(intent.action!!== Intent.ACTION_BATTERY_CHANGED){//当前电量val level: Int = intent.getIntExtra(BatteryManager.EXTRA_LEVEL,0)//最大电池电量val scale: Int = intent.getIntExtra(BatteryManager.EXTRA_SCALE,100)//电池状态val status: Int = intent.getIntExtra(BatteryManager.EXTRA_STATUS,100)
                mBatteryView!!.setBatteryLevel(level)}}}}protectedfunonDestroy(){unregisterReceiver(receiver)super.onDestroy()}}

其中

BatteryManager.EXTRA_LEVEL

为当前电量；

BatteryManager.EXTRA_SCALE

为电池容量即最大电量（基本都为100）；

BatteryManager.EXTRA_STATUS

为电池状态，以此判断是否在充电状态。

效果

电量100%时显示如下：

小于等于10%为低电量，显示预警色（可根据需要调节低电量阈值）：

电量20%：

可通过 DRAW_PART_LINE 的布尔常量设置是否要分格并显示分格线：

上述内容默认最大电量为100，可通过

setMaxLevel()

方法设置最大电池容量。