Android自定義電池組件實例代碼(BatteryView)

更新時間：2025年09月23日 10:33:00 作者：消失的舊時光-1943

在許多應用中,顯示設備的電池電量是一個常見的需求,下面這篇文章主要介紹了Android自定義電池組件(BatteryView)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

支持：

XML 與代碼動態(tài)設置電量（0–100）
充電 charging 與快充 fastCharging 區(qū)分（閃電樣式 + 動畫）
電量閾值自動配色：<20% 紅、<50% 橙、≥50% 綠
可配置邊框/軌道/電量/閃電顏色；可顯示百分比文本
支持無障礙（contentDescription、AccessibilityLiveRegion）
支持狀態(tài)保存（旋轉(zhuǎn)/進程重建）
平滑動畫過渡（setLevelAnimated）

1、自定義屬性res/values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="BatteryView">
<attr name="bv_level" format="integer"/>
<attr name="bv_showPercentage" format="boolean"/>
<attr name="bv_charging" format="boolean"/>
<attr name="bv_fastCharging" format="boolean"/>

<attr name="bv_borderColor" format="color"/>
<attr name="bv_trackColor" format="color"/>
<attr name="bv_fillColor" format="color"/>
<attr name="bv_lowColor" format="color"/>
<attr name="bv_mediumColor" format="color"/>
<attr name="bv_highColor" format="color"/>
<attr name="bv_boltColor" format="color"/>

<attr name="bv_borderWidth" format="dimension"/>
<attr name="bv_cornerRadius" format="dimension"/>
<attr name="bv_capWidth" format="dimension"/>
<attr name="bv_capGap" format="dimension"/>
<attr name="bv_textSize" format="dimension"/>
</declare-styleable>
</resources>

術(shù)語說明：

borderColor：電池外框線條顏色。
trackColor：電池內(nèi)部“軌道/背景”顏色（未被電量填充區(qū)域）。
fillColor：電量填充的基礎顏色（當未啟用分段閾值或外部強制指定時）。

2、組件代碼BatteryView.kt

package com.yourpkg.widget
val y6 = t + h * 0.35f

boltPath.reset()
boltPath.moveTo(x1, y1)
boltPath.lineTo(x2, y2)
boltPath.lineTo(x3, y3)
boltPath.lineTo(x4, y4)
boltPath.lineTo(x5, y5)
boltPath.lineTo(x6, y6)
boltPath.close()
}
// endregion

// region — Accessibility
private fun updateContentDesc() {
val charge = when {
fastCharging -> "（快充中）"
charging -> "（充電中）"
else -> ""
}
contentDescription = "電量 $level%$charge"
}
// endregion

// region — State
override fun onSaveInstanceState(): Parcelable? {
val superState = super.onSaveInstanceState()
return SavedState(superState).also {
it.level = level
it.charging = charging
it.fastCharging = fastCharging
it.showPercentage = showPercentage
it.chargePulse = chargePulse
}
}

override fun onRestoreInstanceState(state: Parcelable?) {
val ss = state as? SavedState
super.onRestoreInstanceState(ss?.superState ?: state)
ss?.let {
level = it.level
charging = it.charging
fastCharging = it.fastCharging
showPercentage = it.showPercentage
chargePulse = it.chargePulse
toggleChargeAnim(charging)
}
}

private class SavedState : BaseSavedState {
var level: Int = 0
var charging: Boolean = false
var fastCharging: Boolean = false
var showPercentage: Boolean = false
var chargePulse: Float = 0f

constructor(superState: Parcelable?) : super(superState)
private constructor(inParcel: Parcel) : super(inParcel) {
level = inParcel.readInt()
charging = inParcel.readInt() == 1
fastCharging = inParcel.readInt() == 1
showPercentage = inParcel.readInt() == 1
chargePulse = inParcel.readFloat()
}
override fun writeToParcel(out: Parcel, flags: Int) {
super.writeToParcel(out, flags)
out.writeInt(level)
out.writeInt(if (charging) 1 else 0)
out.writeInt(if (fastCharging) 1 else 0)
out.writeInt(if (showPercentage) 1 else 0)
out.writeFloat(chargePulse)
}
companion object {
@JvmField val CREATOR: Parcelable.Creator<SavedState> = object : Parcelable.Creator<SavedState> {
override fun createFromParcel(source: Parcel): SavedState = SavedState(source)
override fun newArray(size: Int): Array<SavedState?> = arrayOfNulls(size)
}
}
}
// endregion

// region — Utils
private fun dp(v: Float) = v * resources.displayMetrics.density
private fun sp(v: Float) = v * resources.displayMetrics.scaledDensity
// endregion
}

3、XML 用法示例

<com.yourpkg.widget.BatteryView
android:id="@+id/battery"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_margin="16dp"
app:bv_level="45"
app:bv_showPercentage="true"
app:bv_charging="true"
app:bv_fastCharging="false"

app:bv_borderColor="#222222"
app:bv_trackColor="#F2F2F2"
app:bv_lowColor="#E53935"
app:bv_mediumColor="#FB8C00"
app:bv_highColor="#43A047"
app:bv_boltColor="#FFFFFF"

app:bv_borderWidth="2dp"
app:bv_cornerRadius="8dp"
app:bv_capWidth="7dp"
app:bv_capGap="2dp"
app:bv_textSize="12sp"/>

4、代碼控制示例

val bv = findViewById<BatteryView>(R.id.battery)

// 動態(tài)設置電量
bv.level = 18 // 立即刷新
bv.setLevelAnimated(76) // 平滑動畫到 76%

// 充電狀態(tài)
bv.charging = true // 顯示閃電 + 呼吸動畫
bv.fastCharging = true // 閃電更大、視覺更強

// 開關百分比
bv.showPercentage = false

// 結(jié)合業(yè)務：閾值配色自動處理（<20 紅、<50 橙、≥50 綠），無需額外代碼

5、常見問題（結(jié)合你之前的疑問）

Q: borderColor 和 trackColor 是什么？
A: borderColor 是外框線條；trackColor 是內(nèi)部未充滿的背景。
Q: 無障礙報錯 isImportantForAccessibility？
A: 組件內(nèi)已設置：

importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_YES

accessibilityLiveRegion = View.ACCESSIBILITY_LIVE_REGION_POLITE

同時動態(tài)更新 contentDescription，讀屏會播報“電量 76%，快充中”。
Q: 如何自定義顏色？
在 XML 傳入 bv_lowColor/bv_mediumColor/bv_highColor，或在代碼里直接修改。
Q: 性能如何？
組件繪制簡單，動畫為輕量級呼吸，postOnAnimation 驅(qū)動，開銷極低。

6、小擴展（可選）

電量漸變色：將 fillPaint 設置為 LinearGradient，根據(jù) level 動態(tài)改變 endX。
低電量閃爍：level<10 且非充電時，使用 alpha 在 120–255 之間脈動。
RTL 適配：當 layoutDirection == LAYOUT_DIRECTION_RTL 時從右向左填充（可根據(jù)需要調(diào)整 fillRect 計算）。

到此這篇關于Android自定義電池組件(BatteryView)的文章就介紹到這了,更多相關Android自定義電池組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: