SwiftUI ゲージビュー

ゲージ ビューで進行状況ビューをスピードアップ

ゲージは、開発者が範囲内の値を表示できるようにするために Apple によって導入された新しい SwiftUI ビューです。半円形の Apple ウィジェットを考えているなら、その通りです! ウィジェットまたは WatchOS コンプリケーションの半円形のビューをGauge Viewで再現できるようになりました。どのように機能するか見てみましょう。

ゲージビューの実際のケース

マスター/ディテール アプリを開発したとします。統計シリーズを含むオブジェクトのリストがあり、詳細ビューでは、円形または線形の進行状況ビューで統計を表示したいとします (はい、まだポケモン アプリです)。パーセント数ではなく、範囲内の値であり、最小値 (負の値または別のゼロ値の場合もあります) と最大値があります。これがProgress ViewとGauge Viewの主な違いです。したがって、パーセント値を管理したい場合はProgress Viewを使用できますが、値が範囲内にある場合、または特定の方法で値を表示したい場合はGauge Viewを使用できます。ゲージビュープリセット スタイル、カスタム スタイル、およびさまざまなラベルと色でカスタマイズできます。

ゲージ ビューの動作

ゲージ ビューの動作を見てみましょう。

Gauge(value: progress, in: mininumGaugeValue...maximumGaugeValue, label: {
        Text("Title")
      }, currentValueLabel: {
        Text("Current value: \(progress.formatted())")
      }, minimumValueLabel: {
        Text(mininumGaugeValue.formatted())
      }, maximumValueLabel: {
        Text(maximumGaugeValue.formatted())
      })

• label : ゲージの目的を説明するために使用されるビュー。ゲージの上部に描画されます。
• currentValueLabel : 現在の値を表示するために使用されるビュー。ゲージの下部に描画されます。
• minimumValueLabel : 最小値を表示するために使用されるビュー。ゲージの左側に描画されます。
• maximumValueLabel : 最大値を表示するために使用されるビュー。ゲージの右側に描画されます。

Progress View とGauge Viewの違いの 1 つはスタイルです。ゲージ ビューには、次のように列挙型を渡すビュー スタイルを変更する修飾子、gaugeStyle(_ style: S)があります。

Gauge(value: progress, in: minimumGaugeValue...maximumGaugeValue) {}
        .gaugeStyle(.linearCapacity)

• linearCapacity : これはデフォルトのスタイルです。Progress Viewとまったく同じように、左から右に塗りつぶされるシンプルなバーです。下が現在の値、左が最小値、右が最大値、上がタイトルです。

• accessoriesLinear : これは超コンパクト バージョンです。このスタイルでは、タイトル ラベルと現在の値は表示されません。現在値はマーカーで表示されます。

• accessoriesCircular : これはコンパクトな円形バージョンです。これは、iOS ロック画面の天気ウィジェットまたは WatchOS コンプリケーションに使用されるビューであるため、iOS ユーザーが正しく知っているビューです。このビューには 2 つのバリエーションがあります。最小ビューと最大ビューが存在する場合、これらはオープニング リングの左側と右側に表示されます。それ以外の場合は、タイトル ビューが表示されます


• accessoriesCircularCapacity : これはGauge Viewのリング バージョンです。 このバージョンでは、現在の値のみが表示されます

カスタム GaugeViewStyle

これは、新しいGauge Viewのハイライトです。カスタムGaugeStyleを作成して、ビューに適用できます。以下の例では、 GaugeStyle が@ViewBuilderコンテンツで初期化されている実装例を見ることができます。コードを見てみましょう：

/// The `GaugeStyle` of the `OverallView`.
struct OverallGaugeStyle<Content: View>: GaugeStyle {
  // MARK: - Properties
  
  /// The `View` contained by the gauge.
  var content: Content
  
  /// The `LinearGradient` used to style the gauge.
  private var gradient = LinearGradient(
    colors:
      [
        Color(uiColor: AppAsset.background.color.withAlphaComponent(0.5)),
        Color(uiColor: AppAsset.primary.color)
      ],
    startPoint: .trailing,
    endPoint: .leading
  )
  
  // MARK: - Init
  
  /// The `init` of the `OverallGaugeStyle`.
  /// - Parameter content: The `View` contained by the gauge.
  init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }
  
  func makeBody(configuration: Configuration) -> some View {
    VStack {
      ZStack {
        content
        
        Circle()
          .trim(from: 0, to: configuration.value * 0.75)
          .stroke(gradient, style: StrokeStyle(lineWidth: 20, lineCap: .round))
          .rotationEffect(.degrees(135))
          .frame(width: 250, height: 250)
      }
      
      configuration.currentValueLabel
        .fontWeight(.bold)
        .font(.title2)
        .foregroundColor(Color(uiColor: AppAsset.background.color))
    }
  }
}

configuration.currentValueLabel

ここで行うべき唯一のことは、次のように、正しい修飾子を使用してカスタム スタイルを設定することです。

Gauge(value: progress, in: minimumGaugeValue...maximumGaugeValue) {} currentValueLabel: {
      VStack {
        Text("\(model.title): \((model.value).formatted(.number))")
      }
    }
    .gaugeStyle(OverallGaugeStyle {
      ...
    })

次のステップ

これで、範囲内の値を表示する必要がある場合にアプリを設計するための新しいビューができました。iOSのGauge View でデザインして楽しみましょう。