Visualizzazione indicatore SwiftUI

Velocizza la visualizzazione dei tuoi progressi con la visualizzazione Gauge

Gauge è una nuova vista SwiftUI introdotta da Apple per aiutare gli sviluppatori a mostrare un valore all'interno di un intervallo. Se stai pensando a un widget Apple semicircolare, hai ragione! La vista semicircolare dei tuoi widget o delle tue complicazioni WatchOS può ora essere riprodotta con una vista Gauge . Vediamo come funziona.

Un caso reale di Gauge View

Immagina di aver sviluppato un'app master-detail; hai un elenco di oggetti con una serie di statistiche e nella vista dettagliata vuoi mostrare le statistiche con una vista di avanzamento, forse circolare o lineare (sì, è ancora un'app Pokémon). Non abbiamo un numero percentuale, ma un valore all'interno di un intervallo, che ha un valore minimo (potrebbe essere anche un valore negativo o un valore zero diverso) e un valore massimo. Questa è la differenza principale tra una visualizzazione di avanzamento e una visualizzazione indicatore ; quindi se vogliamo gestire un valore percentuale possiamo usare una Progress View , mentre se abbiamo un valore all'interno di un intervallo o se vogliamo mostrare il valore in un modo particolare possiamo usare una Gauge View . La vista del calibropuò essere personalizzato con uno stile preimpostato, uno stile personalizzato e diverse etichette e colori.

Gauge View in azione

Vediamo la vista Gauge in azione:

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

• etichetta : la vista utilizzata per descrivere lo scopo dell'indicatore. È disegnato sulla parte superiore dell'indicatore.
• currentValueLabel : la vista utilizzata per mostrare il valore corrente. È disegnato nella parte inferiore dell'indicatore.
• minimumValueLabel : la visualizzazione utilizzata per mostrare il valore minimo. È disegnato a sinistra dell'indicatore.
• maximumValueLabel : la visualizzazione utilizzata per mostrare il valore massimo. È disegnato a destra dell'indicatore.

Una delle differenze tra una visualizzazione avanzamento e una visualizzazione indicatore è lo stile. La Gauge View ha un modificatore, gaugeStyle(_ style: S) , che cambia lo stile della vista passando un enum in questo modo:

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

• linearCapacity : questo è lo stile predefinito. È una semplice barra che si riempie da sinistra a destra, esattamente come una Progress View . Il valore corrente è in basso, il minimo a sinistra, il massimo a destra e il titolo in alto.

• accessoriesLinear : Questa è una versione super compatta. In questo stile, l'etichetta del titolo e il valore corrente non vengono visualizzati. Il valore corrente è indicato con un indicatore.

• accessorioCircolare : Questa è la versione circolare compatta. È una vista che gli utenti iOS conoscono bene perché è la vista utilizzata per il widget meteo nella schermata di blocco di iOS o per le complicazioni di WatchOS. Ci sono due varianti di questo punto di vista; se esistono viste minima e massima, queste verranno mostrate sui lati sinistro e destro dell'anello di apertura. In caso contrario, verrà mostrata la vista del titolo


• accessoriesCircularCapacity : questa è la versione ad anello della vista Gauge . In questa versione viene visualizzato solo il valore corrente

Stile visualizzazione indicatore personalizzato

Questo è il momento clou della nuova Vista indicatore : puoi creare uno Stile indicatore personalizzato e applicarlo alla tua vista. Nell'esempio seguente, possiamo vedere un'implementazione di esempio in cui il nostro GaugeStyle è inizializzato con il contenuto @ViewBuilder . Vediamo il codice:

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

L'unica cosa da fare ora è impostare lo stile personalizzato con il corretto modificatore, in questo modo:

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

Prossimi passi

Ora hai una nuova vista per progettare le tue app quando queste devono mostrare un valore all'interno di un intervallo. Progetta e divertiti con Gauge View su iOS.