【SwiftUI】Gaugeを使ってみた

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

# どんなものか
![Simulator Screen Recording - iPhone 14 - 2022-11-12 at 18.03.29.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/6d84243e-91ce-d262-a060-3f8a1787ad04.gif)

# スタイル
### accessoryCircular
![Simulator Screen Recording - iPhone 14 - 2022-11-12 at 18.05.16.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/dbdb7d4f-6f93-da62-120e-93de8cf14903.gif)
```swift
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
![Simulator Screen Recording - iPhone 14 - 2022-11-12 at 18.09.46.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/3e53ae12-da2b-741f-53d6-b204477cc079.gif)
```swift
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
![Simulator Screen Recording - iPhone 14 - 2022-11-12 at 18.11.55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/8b442b9c-6dd7-2ff0-4dcf-719d5a9f72ef.gif)
```swift
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
![Simulator Screen Recording - iPhone 14 - 2022-11-12 at 18.14.11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/12b51159-309b-83b7-cd18-9274b15761b7.gif)
```swift
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
![Simulator Screen Recording - iPhone 14 - 2022-11-12 at 18.15.28.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/6d703623-d2ab-01a5-abf9-04b861020e18.gif)
```swift
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
```diff_swift
    Gauge(value: value, in: 0...100) {
        Text(Int(value), format: .percent)
    }
    .gaugeStyle(.accessoryCircular)
+   .scaleEffect(3)
```

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

### それ以外
`accessoryCircular`と`accessoryCircularCapacity`以外はframeが使用できます。
```diff_swift
    Gauge(value: value, in: 0...100) {
        Text(Int(value), format: .percent)
    }
    .gaugeStyle(.accessoryLinear)
    .tint(.yellow)
+   .frame(width: 100)
```

# 色の変更
```diff_swift
    Gauge(value: value, in: 0...100) {
        Text(Int(value), format: .percent)
    }
+   .tint(.purple)
```

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