はじめに
iOSの標準のゲージでもいいですが、もっとカッコイイデザインのゲージを使いたいので自作してみます。
実装
import SwiftUI
struct CustomGaugeView: View {
@Binding var value: CGFloat
private let maxValue: CGFloat
init(_ value: Binding<CGFloat>, maxValue: CGFloat) {
self._value = value
self.maxValue = maxValue
}
var body: some View {
GeometryReader { proxy in
levelGauge(proxy: proxy)
}
}
private func levelGauge(proxy: GeometryProxy) -> some View {
ZStack(alignment: .center) {
Capsule()
.foregroundColor(.secondary)
Capsule()
.fill(LinearGradient(gradient: .init(colors: [.yellow, .orange]), startPoint: .leading, endPoint: .trailing))
.frame(width: proxy.size.width * (CGFloat(value) / CGFloat(maxValue)))
.contentShape(Capsule())
.frame(maxWidth: .infinity, alignment: .leading)
}
}
}
使い方
import SwiftUI
struct ContentView: View {
@State private var value: CGFloat = 0
private var maxValue: CGFloat = 100
var body: some View {
VStack(spacing: 50) {
CustomGaugeView($value, maxValue: maxValue)
.frame(height: 23)
Slider(value: $value, in: 0...maxValue)
}
.padding(.horizontal, 20)
}
}
注意
frame
でheight
を指定してください
動画
おわり
いい感じに作ることができました