iOS自定义电池电量显示控件 BatteryView 实现

iOS自定义电池视图：BatteryView

传送门：Android自定义电池电量显示控件 BatteryView 实现

在iOS开发中，自定义视图是提升用户体验的重要手段之一。本文将介绍如何通过Swift语言实现一个自定义的电池视图（BatteryView），并展示其功能和使用方法。

---

1. 功能概述

BatteryView 是一个用于显示设备电量状态的自定义视图，支持以下功能：

• 电量颜色动态变化：根据电量百分比自动调整颜色。
• 充电状态显示：当设备正在充电时，显示闪电图标。
• 电量百分比显示：可选择是否显示电量百分比。
• 动画效果：支持电量变化的平滑动画。

---

2. 核心属性

以下是 BatteryView 的核心属性及其作用：

属性名	类型	描述
borderColor	UIColor	电池边框的颜色，默认为黑色。
powerColor	UIColor	正常电量的颜色，默认为绿色。
lowPowerColor	UIColor	低电量（<20%）的颜色，默认为红色。
mediumPowerColor	UIColor	中等电量（20%-50%）的颜色，默认为黄色。
chargingColor	UIColor	充电状态下的电量颜色，默认为绿色。
lightningColor	UIColor	充电闪电图标的颜色，默认为白色。
textColor	UIColor	百分比文字的颜色，默认为黑色。
borderWidth	CGFloat	电池边框的宽度，默认为4.0。
headWidth	CGFloat	电池正极的宽度，默认为4.0。
power	Int	当前电量百分比，范围为0-100。
isCharging	Bool	是否处于充电状态。
showPercentage	Bool	是否显示电量百分比。

---

3. 实现细节

3.1 绘制电池主体

电池主体是一个圆角矩形，通过 UIBezierPath 实现：

let batteryBodyRect = CGRect(x: borderWidth / 2,y: borderWidth / 2,width: width - borderWidth * 1.5 - headWidth, // 留出正极位置height: height - borderWidth
)
let batteryBodyPath = UIBezierPath(roundedRect: batteryBodyRect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
batteryBodyPath.lineWidth = borderWidth
batteryBodyPath.stroke()

3.2 绘制电池正极

电池正极位于右侧外部，通过简单的矩形绘制实现：

let batteryHeadRect = CGRect(x: width - borderWidth - headWidth,y: height / 2 - headHeight / 2,width: headWidth,height: headHeight
)let batteryHeadPath = UIBezierPath(rect: batteryHeadRect)
batteryHeadPath.fill()

3.3 绘制电量部分

电量部分根据当前电量百分比动态调整宽度，并使用不同的颜色填充：

let powerPadding = borderWidth * 1.5
let powerWidth = (batteryBodyRect.width - powerPadding * 2) * CGFloat(power) / 100let powerRect = CGRect(x: batteryBodyRect.minX + powerPadding,y: batteryBodyRect.minY + powerPadding,width: powerWidth,height: batteryBodyRect.height - powerPadding * 2
)
let powerPath = UIBezierPath(roundedRect: powerRect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius / 2, height: cornerRadius / 2))
powerPath.fill()

3.4 充电状态与百分比显示

• 充电状态：当 isCharging 为 true 时，绘制闪电图标。
• 百分比显示：当 showPercentage 为 true 时，显示电量百分比。

if isCharging {drawLightning(in: batteryBodyRect)
} else if showPercentage {drawPercentage(in: batteryBodyRect)