这是我想出来的:
据我所知,SFSymbols
中的battery
图标只由3个元素组成,a rounded rectangle、a half circle位于电池顶部,另外rounded rectangle表示当前电池电量.
First rounded Rectangle (Battery Case)
struct BatteryView : View {
var body: some View {
GeometryReader { geo in
RoundedRectangle(cornerRadius: 15)
.stroke(lineWidth: 3)
}
}
}
它看起来是这样的(frame
为180,60):
我只是按照你的建议用了一个圆角矩形作为电池盒.
Half circle
为此,我创建了一个名为HalfCircleShape
的简单形状.
struct HalfCircleShape : Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.minX, y: rect.midY))
path.addArc(center: CGPoint(x: rect.minX, y: rect.midY), radius: rect.height , startAngle: .degrees(90), endAngle: .degrees(270), clockwise: true)
return path
}
}
在GeometryReader
帧中,我给出的帧是当前帧的1/7,因为它看起来很优雅.
我把这些和HStack
如下所示:
GeometryReader { geo in
HStack {
RoundedRectangle(cornerRadius: 15)
.stroke(lineWidth: 3)
HalfCircleShape()
.frame(width: geo.size.width / 7, height: geo.size.height / 7)
}
}
Battery Indicator
我在Color
中创建了一个扩展以 Select 当前电池电量的 colored颜色
extension Color {
static var BatteryLevel : Color {
let batteryLevel = 0.6
print(batteryLevel)
switch batteryLevel {
// returns red color for range %0 to %20
case 0...0.2:
return Color.red
// returns yellow color for range %20 to %50
case 0.2...0.5:
return Color.yellow
// returns green color for range %50 to %100
case 0.5...1.0:
return Color.green
default:
return Color.clear
}
}
}
我刚刚创造了另一个RoundedRectangle
,并将这两个RoundedRectangle
结合在一个ZStack
中
Result looks 如下所示:
最终代码:
import SwiftUI
struct ContentView: View {
var body: some View {
BatteryView()
.frame(width: 170, height: 60)
.padding()
}
}
struct HalfCircleShape : Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.minX, y: rect.midY))
path.addArc(center: CGPoint(x: rect.minX, y: rect.midY), radius: rect.height , startAngle: .degrees(90), endAngle: .degrees(270), clockwise: true)
return path
}
}
struct BatteryView : View {
init() {
UIDevice.current.isBatteryMonitoringEnabled = true
}
var body: some View {
// UIDevice.current.batteryLevel always returns -1, and I don't know why. so here's a value for you to preview
let batteryLevel = 0.4
GeometryReader { geo in
HStack(spacing: 5) {
GeometryReader { rectangle in
RoundedRectangle(cornerRadius: 15)
.stroke(lineWidth: 3)
RoundedRectangle(cornerRadius: 15)
.padding(5)
.frame(width: rectangle.size.width - (rectangle.size.width * (1 - batteryLevel)))
.foregroundColor(Color.BatteryLevel)
}
HalfCircleShape()
.frame(width: geo.size.width / 7, height: geo.size.height / 7)
}
.padding(.leading)
}
}
}
extension Color {
static var BatteryLevel : Color {
let batteryLevel = 0.4
print(batteryLevel)
switch batteryLevel {
// returns red color for range %0 to %20
case 0...0.2:
return Color.red
// returns yellow color for range %20 to %50
case 0.2...0.5:
return Color.yellow
// returns green color for range %50 to %100
case 0.5...1.0:
return Color.green
default:
return Color.clear
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
此外,在UIDevice
中,有一个名为batteryLevel
的属性可以告诉您当前的电池电量,但在本例中,它只返回-1,注意:as discussed here,这看起来像是SWIFT中的错误.