SwiftUI Ölçer Görünümü

Gösterge görünümü ile ilerleme görünümünüzü hızlandırın

Gauge , geliştiricilerin bir aralık içinde bir değer göstermesine yardımcı olmak için Apple tarafından sunulan yeni bir SwiftUI Görünümüdür. Yarım daire biçimli bir Apple widget'ı düşünüyorsanız, haklısınız! Widget'larınızın veya WatchOS komplikasyonlarınızın yarı dairesel görünümü artık bir Gösterge Görünümü ile yeniden üretilebilir . Nasıl çalıştığını görelim.

Bir Gösterge Görünümü gerçek durum

Bir ana detay uygulaması geliştirdiğinizi hayal edin; istatistik serisine sahip bir nesne listeniz var ve ayrıntılı görünümde, istatistikleri bir ilerleme görünümüyle, belki dairesel veya doğrusal olarak göstermek istiyorsunuz (evet, henüz bir Pokémon Uygulaması). Bir yüzde sayımız yok, ancak bir minimum (negatif bir değer veya farklı bir sıfır değeri de olabilir) ve bir maksimum değeri olan bir aralık içinde bir değerimiz var. İlerleme Görünümü ile Gösterge Görünümü arasındaki temel fark budur ; yani bir yüzde değerini yönetmek istiyorsak İlerleme Görünümü kullanabiliriz , bir aralık içinde bir değere sahipsek veya değeri belirli bir şekilde göstermek istiyorsak Gösterge Görünümü kullanabiliriz . Gösterge Görünümüönceden ayarlanmış bir stille, özel bir stille ve farklı etiketler ve renklerle özelleştirilebilir.

Gösterge Görünümü iş başında

Gösterge Görünümünü çalışırken görelim:

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

• etiket : Göstergenin amacını açıklamak için kullanılan görünüm. Göstergenin üstüne çizilir.
• currentValueLabel : Geçerli değeri göstermek için kullanılan görünüm. Göstergenin alt kısmına çizilir.
• minimumValueLabel : Minimum değeri göstermek için kullanılan Görünüm. Göstergenin solunda çizilir.
• maximumValueLabel : Maksimum değeri göstermek için kullanılan Görünüm. Göstergenin sağında çizilir.

İlerleme Görünümü ile Gösterge Görünümü arasındaki farklardan biri stildir. Gösterge Görünümü , bir enumdan geçen görünüm stilini şu şekilde değiştiren gaugeStyle(_ style: S) değiştiricisine sahiptir:

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

• linearCapacity : Bu, varsayılan stildir. Bu, tıpkı bir İlerleme Görünümü gibi soldan sağa doğru doldurulan basit bir çubuktur . Geçerli değer altta, minimum solda, maksimum sağda ve başlık üstte.

• aksesuarLinear : Bu, süper kompakt bir versiyondur. Bu stilde, başlık etiketi ve geçerli değer gösterilmez. Mevcut değer bir işaretleyici ile gösterilir.

• aksesuarDairesel : Bu kompakt dairesel versiyondur. Bu, iOS kilit ekranındaki hava durumu widget'ı veya WatchOS komplikasyonları için kullanılan görünüm olduğu için iOS kullanıcılarının doğru bildiği bir görünümdür. Bu görüşün iki çeşidi vardır; minimum ve maksimum görünümler varsa, bunlar açılış halkasının sol ve sağ taraflarında gösterilecektir. Aksi takdirde, başlık görünümü gösterilecektir.


• aksesuarDairesel Kapasite : Bu, Gösterge Görünümünün halka versiyonudur . Bu sürümde, yalnızca geçerli değer gösterilir

Özel GaugeViewStyle

Bu, yeni Gösterge Görünümünün öne çıkan özelliğidir : özel bir GaugeStyle oluşturabilir ve bunu görünümünüze uygulayabilirsiniz. Aşağıdaki örnekte, GaugeStyle'ımızın @ViewBuilder içeriğiyle başlatıldığı örnek bir uygulama görebiliriz . Kodu görelim:

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

Şimdi yapılacak tek şey, özel stili doğru değiştiriciyle şu şekilde ayarlamaktır:

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

Sonraki adımlar

Artık uygulamalarınızı bir aralık içinde bir değer göstermesi gerektiğinde tasarlamak için yeni bir Görünüme sahipsiniz. iOS'ta Gauge View ile tasarlayın ve keyfini çıkarın .