Widok miernika SwiftUI

Przyspiesz widok postępu dzięki widokowi miernika

Gauge to nowy widok SwiftUI wprowadzony przez firmę Apple, aby pomóc programistom wyświetlać wartość w określonym zakresie. Jeśli myślisz o półokrągłym widżecie Apple, masz rację! Półokrągły widok twoich widżetów lub komplikacji systemu WatchOS można teraz odtworzyć za pomocą widoku miernika . Zobaczmy, jak działa.

Prawdziwy przypadek Gauge View

Wyobraź sobie, że stworzyłeś aplikację master-detail; masz listę obiektów z serią statystyk, aw widoku szczegółowym chcesz pokazać statystyki z widokiem postępu, może okrągłym lub liniowym (tak, to jeszcze aplikacja Pokémon). Nie mamy liczby procentowej, ale wartość z przedziału, która ma wartość minimalną (może to być również wartość ujemna lub inna wartość zerowa) i maksymalną. To jest główna różnica między Widokiem Postępu a Widokiem Wskaźnika ; więc jeśli chcemy zarządzać wartością procentową, możemy użyć widoku postępu , a jeśli mamy wartość w zakresie lub jeśli chcemy pokazać wartość w określony sposób, możemy użyć widoku miernika . Widok miernikamożna dostosować za pomocą gotowego stylu, stylu niestandardowego oraz różnych etykiet i kolorów.

Widok miernika w akcji

Zobaczmy widok miernika w akcji:

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

• etykieta : widok używany do opisania przeznaczenia miernika. Jest narysowany na górze miernika.
• currentValueLabel : widok używany do wyświetlania bieżącej wartości. Jest narysowany na dole miernika.
• minimumValueLabel : Widok używany do wyświetlania wartości minimalnej. Jest rysowany po lewej stronie miernika.
• MaximumValueLabel : Widok używany do pokazania maksymalnej wartości. Jest rysowany po prawej stronie miernika.

Jedną z różnic między widokiem postępu a widokiem miernika jest styl. Widok miernika ma modyfikator, gaugeStyle(_ style: S) , który zmienia styl widoku przekazując wyliczenie w następujący sposób:

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

• linearCapacity : To jest styl domyślny. To prosty pasek, który wypełnia się od lewej do prawej, dokładnie tak, jak widok postępu . Bieżąca wartość znajduje się na dole, minimalna po lewej, maksymalna po prawej, a tytuł na górze.

• akcesoriaLinear : To jest super kompaktowa wersja. W tym stylu etykieta tytułu i bieżąca wartość nie są wyświetlane. Bieżąca wartość jest oznaczona znacznikiem.

• AccessoriesCircular : Jest to kompaktowa, okrągła wersja. Jest to widok, który użytkownicy iOS dobrze znają, ponieważ jest to widok używany dla widżetu pogodowego na ekranie blokady iOS lub komplikacjach WatchOS. Istnieją dwa warianty tego widoku; jeśli istnieją minimalne i maksymalne widoki, zostaną one pokazane po lewej i prawej stronie pierścienia otwierającego. W przeciwnym razie zostanie wyświetlony widok tytułowy


• akcesoriumCircularCapacity : To jest pierścieniowa wersja widoku miernika . W tej wersji wyświetlana jest tylko aktualna wartość

Niestandardowy styl GaugeView

To najważniejsza cecha nowego widoku miernika : możesz zbudować niestandardowy styl GaugeStyle i zastosować go do swojego widoku. W poniższym przykładzie możemy zobaczyć przykładową implementację, w której nasz GaugeStyle jest inicjowany treścią @ViewBuilder . Zobaczmy kod:

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

Jedyne, co można teraz zrobić, to ustawić styl niestandardowy z odpowiednim modyfikatorem, w ten sposób:

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

Następne kroki

Teraz masz nowy widok do projektowania aplikacji, gdy muszą one pokazywać wartość z zakresu. Projektuj i baw się dobrze dzięki Gauge View na iOS.