【SwiftUI】GaugeのStyle比較（iOS16+）



# はじめに
https://qiita.com/advent-calendar/2022/retail-ai-x

20日目の記事になります。
19日目は[@syuri_n](https://qiita.com/syuri_n)さんの「[プロジェクトを円滑に進めるために取り組んだこと](https://zenn.dev/syuri/articles/ebba60669f667c)」でした。


iOS16から使えるGaugeというViewが面白そうだったので、
そのGaugeStyleを比較してみました。


# 環境
- macOS Monterey 12.6.2
- Xcode 14.1 (14B47b)
- Swift 5.7.1

# 比較風景

## portrait
![Simulator Screen Recording - iPhone 14 Pro Max - 2022-12-16 at 11.08.54.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417119/86b8c379-f7b9-66f1-b409-f394c556fc38.gif)

## landscape
![Simulator Screen Recording - iPhone 14 Pro Max - 2022-12-16 at 11.25.55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417119/aabb3b78-67f6-6f20-7323-8c3859bbb808.gif)


<details><summary>コード全体</summary>

```swift: ContentView.swift
struct ContentView: View {
    @State var currentValue: Double = 50
    @State var firstColor: Color = .white
    @State var secondColor: Color = .gray
    @State var thirdColor: Color = .black
    
    let range: ClosedRange<Double> = 0...100
    let gaugeText: String = "°C"
    
    var body: some View {
        VStack {
            List {
                Section {
                    HStack {
                        Text("automatic")
                        
                        Spacer()
                        
                        Gauge(value: currentValue, in: range) {
                            Text(gaugeText)
                        } currentValueLabel: {
                            Text("\(currentValue)")
                        }
                        .gaugeStyle(.automatic)
                        .tint(Gradient(colors: [firstColor, secondColor, thirdColor]))
                    }
                } header: {
                    Text("Automatic")
                }
                
                Section {
                    HStack {
                        Text("accessoryCircular")

                        Spacer()
                        
                        Gauge(value: currentValue, in: range) {
                            Text(gaugeText)
                        } currentValueLabel: {
                            Text("\(currentValue)")
                        }
                        .gaugeStyle(.accessoryCircular)
                        .tint(Gradient(colors: [firstColor, secondColor, thirdColor]))
                    }
                    
                    HStack {
                        Text("accessoryCircularCapacity")

                        Spacer()
                        
                        Gauge(value: currentValue, in: range) {
                            Text(gaugeText)
                        } currentValueLabel: {
                            Text("\(currentValue)")
                        }
                        .gaugeStyle(.accessoryCircularCapacity)
                        .tint(Gradient(colors: [firstColor, secondColor, thirdColor]))
                    }
                } header: {
                    Text("Circular")
                }
                
                Section {
                    VStack{
                        Text("accessoryLinear")
                        
                        Spacer()
                        
                        Gauge(value: currentValue, in: range) {
                            Text(gaugeText)
                        } currentValueLabel: {
                            Text("\(currentValue)")
                        }
                        .gaugeStyle(.accessoryLinear)
                        .tint(Gradient(colors: [firstColor, secondColor, thirdColor]))
                    }
                    
                    VStack {
                        Text("accessoryLinearCapacity")
                        
                        Spacer()
                        
                        Gauge(value: currentValue, in: range) {
                            Text(gaugeText)
                        } currentValueLabel: {
                            Text("\(currentValue)")
                        }
                        .gaugeStyle(.accessoryLinearCapacity)
                        .tint(Gradient(colors: [firstColor, secondColor, thirdColor]))
                    }
                    
                    VStack{
                        Text("linearCapacity")
                        
                        Spacer()
                        
                        Gauge(value: currentValue, in: range) {
                            Text(gaugeText)
                        } currentValueLabel: {
                            Text("\(currentValue)")
                        }
                        .gaugeStyle(.linearCapacity)
                        .tint(Gradient(colors: [firstColor, secondColor, thirdColor]))
                    }
                } header: {
                    Text("Linear")
                }
            }
            
            VStack {
                Slider(value: $currentValue, in: range)
                    .tint(.gray)
                
                HStack{
                    ColorPicker("１色目", selection: $firstColor)
                    
                    ColorPicker("２色目", selection: $secondColor)
                    
                    ColorPicker("３色目", selection: $thirdColor)
                }.padding()
            }.padding()
        }
    }
}

```
</details>


# 比較してみて
- 👍
    - 見た目がおしゃれ
    - 値の設定もシンプル
- 👎
    - circular系Style
        - currentValueLabelが小数点アリだと文字が小さい
            - （小数点表示が必要な場合はlinear系Styleが良い？）
    - accessoryLinearCapacity
        - Tintにグラデーションが上手く反映されなかった🤔

# おわりに
他のViewでも比較してみたいと思います👀

21日目は[@Carol_fan](https://qiita.com/Carol_fan)さんの記事です。

# 参考

https://qiita.com/MaShunzhe/items/0ed36d8a6de7c56b1d34

https://qiita.com/SNQ-2001/items/bed784aeca3e4fe84657

https://developer.apple.com/documentation/swiftui/gauge