【SwiftUI】Gaugeを使ってみた

はじめに

GaugeはiOS16から使用できるUIコンポーネントです。
初めて触ったので記録しておきます。

どんなものか

スタイル

accessoryCircular

import SwiftUI

struct ContentView: View {
    @State var value: Double = 0
    var body: some View {
        VStack(spacing: 50) {
            Gauge(value: value, in: 0...100) {
                Text(Int(value), format: .percent)
            }
            .gaugeStyle(.accessoryCircular)
            .tint(.red)

            Slider(value: $value, in: 0...100)
        }
        .padding(.horizontal, 50)
    }
}

accessoryCircularCapacity

import SwiftUI

struct ContentView: View {
    @State var value: Double = 0
    var body: some View {
        VStack(spacing: 50) {
            Gauge(value: value, in: 0...100) {
                Text(Int(value), format: .percent)
            }
            .gaugeStyle(.accessoryCircularCapacity)
            .tint(.pink)

            Slider(value: $value, in: 0...100)
        }
        .padding(.horizontal, 50)
    }
}

accessoryLinear

import SwiftUI

struct ContentView: View {
    @State var value: Double = 0
    var body: some View {
        VStack(spacing: 50) {
            Gauge(value: value, in: 0...100) {
                Text(Int(value), format: .percent)
            }
            .gaugeStyle(.accessoryLinear)
            .tint(.yellow)

            Slider(value: $value, in: 0...100)
        }
        .padding(.horizontal, 50)
    }
}

accessoryLinearCapacity

import SwiftUI

struct ContentView: View {
    @State var value: Double = 0
    var body: some View {
        VStack(spacing: 50) {
            Gauge(value: value, in: 0...100) {
                Text(Int(value), format: .percent)
            }
            .gaugeStyle(.accessoryLinearCapacity)
            .tint(.orange)

            Slider(value: $value, in: 0...100)
        }
        .padding(.horizontal, 50)
    }
}

linearCapacity

import SwiftUI

struct ContentView: View {
    @State var value: Double = 0
    var body: some View {
        VStack(spacing: 50) {
            Gauge(value: value, in: 0...100) {
                Text(Int(value), format: .percent)
            }
            .gaugeStyle(.linearCapacity)
            .tint(.purple)

            Slider(value: $value, in: 0...100)
        }
        .padding(.horizontal, 50)
    }
}

大きさの変更

accessoryCircular もしくは accessoryCircularCapacity

    Gauge(value: value, in: 0...100) {
        Text(Int(value), format: .percent)
    }
    .gaugeStyle(.accessoryCircular)
+   .scaleEffect(3)

    Gauge(value: value, in: 0...100) {
        Text(Int(value), format: .percent)
    }
    .gaugeStyle(.accessoryCircularCapacity)
+   .scaleEffect(3)

それ以外

accessoryCircularとaccessoryCircularCapacity以外はframeが使用できます。

    Gauge(value: value, in: 0...100) {
        Text(Int(value), format: .percent)
    }
    .gaugeStyle(.accessoryLinear)
    .tint(.yellow)
+   .frame(width: 100)

色の変更

    Gauge(value: value, in: 0...100) {
        Text(Int(value), format: .percent)
    }
+   .tint(.purple)

おわり

めっちゃおしゃれなのでこれを使ったらかっこいいアプリ作れそうです笑