效果图:
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>