SwiftUI: Gauge

Gauge elemanı ile kullanıcılara sayısal ve belirli aralıklarda olan bir veri gösterin!

Herkese merhaba! Bu yazımızda SwiftUI’ın sadece watchOS’te çalışan özelliklerinden biri olan Gauge’dan bahsedeceğim.

Gauge’u arabalardaki benzin göstergesi gibi düşünebilirsiniz. Bu arayüz elemanı, bir değişkeni alır ve minimum-maksimum değerler arasındaki bir çizgi üzerinde gösterir.

Gauge’u denemek için öncelikle bir watchOS uygulaması oluşturalım. Özellik sadece watchOS’de çalıştığı için “Watch App” “template”ini seçebiliriz.

Şimdi, ContentView‘un içine body‘den önce bir değişken oluşturalım. Bu değişken, oluşturacağımız göstergenin değerini barındıracak.

@State private var gaugeValue = 0.0

Sırada ise göstergenin kendisini eklemek var. Bunun için body‘nin içine aşağıdaki kodu kopyalamanız yeterli. (Bütün parametreleri birazdan göstereceğim.)

Gauge(value: gaugeValue, label: { Text("Value") })

Şimdi uygulamayı çalıştıralım.

Gösterge, olması gerektiği gibi gözüküyor ve değeri sıfır. Şimdi bu “modifier”ın alabileceği parametrelere bakalım.

• value: Gösterilecek değer
• bounds: value değişkeninin minimum ve maksimum değerleri
• label: Göstergenin amacını açıklayan bir View
• currentValueLabel: Şu anki değeri gösteren bir View
• minimumValueLabel: En küçük değeri gösteren bir View
• maximumValueLabel: En büyük değeri gösteren bir View

Not: Gauge‘un bazı gösterimleri, alınan bütün parametrelerdeki View‘ları göstermeyebilir. Ancak erişilebilirlik özellikleri de bu parametreleri kullandığı için bütün parametreleri doldurmak daha doğru olacaktır.

Şimdi, göstergeyi aşağıdaki şekilde eklemeyi deneyelim:

Gauge(value: gaugeValue, in: 0...200) {
   Text("Speed")
} currentValueLabel: {
   Text("\(Int(gaugeValue))")
} minimumValueLabel: {
   Text("0")
} maximumValueLabel: {
   Text("200")
}

Bu örnekte de bazı View‘lar gösterilmedi.

watchOS’teki tek gösterge stili bu değil. Diğer bir seçenek olan dairesel göstergeyi denemek için Gauge elemanının altına aşağıdaki “modifier”ı ekleyelim.

.gaugeStyle(CircularGaugeStyle())

Bu tasarımı watchOS kadranlarındaki göstergelerden hatırlayabilirsiniz.

Şimdi tasarıma biraz renk katalım. Bunun için gaugeStyle() “modifier”ını başka bir şekilde kullanacağız. Aşağıdaki kodu bir önce eklediğimizin yerine koyalım:

.gaugeStyle(CircularGaugeStyle(tint: gradient))

İsterseniz; minimum, maksimum ve şu anki değerlerin rengini değiştirerek görsel bir etki de yaratabilirsiniz. Ben, sadece arkaplana bir gradyan ekleyeceğim.

Gradyanı az önce eklediğimiz “modifier”da kullandığımız gradient değişkenine koyacağım. Aşağıdaki kodu body‘nin önüne ekleyelim:

let gradient = Gradient(colors: [.green, .blue, .red])

Uygulamayı tekrardan çalıştıralım.

Böylece göstergeye daha güzel bir efekt vermiş olduk.

Gauge‘u uygulamanızda kullanmanız için bilmeniz gereken en önemli şeyler bunlardı. Bir sonraki makalede görüşmek üzere. 👋

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook