SwiftUI-Gauge-Ansicht

Beschleunigen Sie Ihre Fortschrittsansicht mit der Messgerätansicht

Gauge ist eine neue SwiftUI-Ansicht, die von Apple eingeführt wurde, um Entwicklern zu helfen, einen Wert innerhalb eines Bereichs anzuzeigen. Wenn Sie an ein halbkreisförmiges Apple-Widget denken, liegen Sie richtig! Die halbkreisförmige Ansicht Ihrer Widgets oder Ihrer WatchOS-Komplikationen können Sie jetzt mit einer Gauge View nachbilden . Mal sehen, wie funktioniert.

Ein echter Fall von Gauge View

Stellen Sie sich vor, Sie haben eine Master-Detail-App entwickelt. Sie haben eine Liste von Objekten mit einer Statistikserie, und in der Detailansicht möchten Sie die Statistik mit einer Fortschrittsansicht anzeigen, vielleicht kreisförmig oder linear (ja, es ist noch eine Pokémon-App). Wir haben keine Prozentzahl, sondern einen Wert innerhalb eines Bereichs, der einen Minimalwert (könnte auch ein negativer Wert oder ein anderer Nullwert sein) und einen Maximalwert hat. Dies ist der Hauptunterschied zwischen einer Fortschrittsansicht und einer Gauge-Ansicht ; Wenn wir also einen Prozentwert verwalten möchten, können wir eine Fortschrittsansicht verwenden , während wir, wenn wir einen Wert innerhalb eines Bereichs haben oder den Wert auf eine bestimmte Weise anzeigen möchten, eine Gauge-Ansicht verwenden können . Die Gauge-Ansichtkann mit einem voreingestellten Stil, einem benutzerdefinierten Stil und verschiedenen Beschriftungen und Farben angepasst werden.

Gauge View in Aktion

Sehen wir uns die Gauge-Ansicht in Aktion an:

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

• label : Die Ansicht, die verwendet wird, um den Zweck des Messgeräts zu beschreiben. Wird oben auf dem Messgerät gezeichnet.
• currentValueLabel : Die Ansicht, die verwendet wird, um den aktuellen Wert anzuzeigen. Wird auf der Unterseite des Messgeräts gezeichnet.
• minimumValueLabel : Die Ansicht, die verwendet wird, um den Mindestwert anzuzeigen. Wird links vom Messgerät gezeichnet.
• maximumValueLabel : Die Ansicht, die verwendet wird, um den Maximalwert anzuzeigen. Wird rechts vom Messgerät gezeichnet.

Einer der Unterschiede zwischen einer Fortschrittsansicht und einer Gauge-Ansicht ist das Styling. Die Gauge-Ansicht hat einen Modifikator, gaugeStyle(_ style: S) , der den Ansichtsstil ändert, indem er eine Aufzählung auf diese Weise übergibt:

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

• linearCapacity : Dies ist der Standardstil. Es ist eine einfache Leiste, die sich von links nach rechts füllt, genau wie eine Fortschrittsansicht . Der aktuelle Wert steht unten, das Minimum links, das Maximum rechts und der Titel oben.

• accessoryLinear : Dies ist eine superkompakte Version. In diesem Stil werden die Titelbeschriftung und der aktuelle Wert nicht angezeigt. Der aktuelle Wert wird mit einem Marker angezeigt.

• accessoryCircular : Dies ist die kompakte runde Version. Es ist eine Ansicht, die iOS-Benutzer richtig kennen, da sie für das Wetter-Widget im iOS-Sperrbildschirm oder die WatchOS-Komplikationen verwendet wird. Es gibt zwei Varianten dieser Ansicht; Wenn minimale und maximale Ansichten vorhanden sind, werden diese auf der linken und rechten Seite des Öffnungsrings angezeigt. Andernfalls wird die Titelansicht angezeigt


• accessoryCircularCapacity : Dies ist die Ringversion der Gauge-Ansicht . In dieser Version wird nur der aktuelle Wert angezeigt

Benutzerdefinierter GaugeViewStyle

Dies ist das Highlight der neuen Gauge-Ansicht : Sie können einen benutzerdefinierten GaugeStyle erstellen und auf Ihre Ansicht anwenden. Im folgenden Beispiel sehen wir eine Beispielimplementierung, bei der unser GaugeStyle mit @ViewBuilder- Inhalt initialisiert wird. Sehen wir uns den Code an:

/// 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

Jetzt müssen Sie nur noch den benutzerdefinierten Stil mit dem richtigen Modifikator festlegen, und zwar auf diese Weise:

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

Nächste Schritte

Jetzt haben Sie eine neue Ansicht, um Ihre Apps zu entwerfen, wenn diese einen Wert innerhalb eines Bereichs anzeigen müssen. Entwerfen und genießen Sie mit Gauge View auf iOS.