SwiftUI: digitalCrownRotation

digitalCrownRotation özelliği ile kullanıcılardan “Digital Crown” aracılığıyla sayısal bir veri alın!

Herkese merhaba! Bu yazımızda, SwiftUI’ın watchOS’e özgü en ilginç özelliklerinden biri olan digitalCrownRotation‘dan bahsedeceğim.

Bu özellik, Apple Watch’ta bulunan “Digital Crown”un dönüşüne bağlı olarak bir değişkenin değerini arttırmamızı veya azaltmamızı sağlıyor. Aynı zamanda, Apple Watch Series 4 ve üzeri modellerde Taptic Engine ile dokunsal geri bildirim de alınabiliyor.

Bu özelliği denemek için öncelikle bir watchOS uygulaması oluşturmamız gerekiyor. iPhone’da yapacak bir şeyimiz olmadığı için Watch App’i seçebiliriz.

Sıradaki iş ise bir arayüz oluşturmak. Bunun için aşağıdaki kodu ContentView’un yerine kopyalayabilirsiniz.

struct ContentView: View {
   // MARK: - Properties
   @State private var currentRotation = 0.0
   // MARK: - View
   var body: some View {
      HStack {
         VStack {
            Text("0")
               .font(.callout)
            Text("MIN")
               .font(.footnote)
               .foregroundColor(.gray.opacity(0.7))
         }
         Text("")
            .font(.system(.largeTitle, design: .rounded))
            .frame(width: 50, height: 50, alignment: .center)
            .background(Color.gray.opacity(0.2))
            .clipShape(Circle())
         VStack {
             Text("10")
                .font(.callout)
             Text("MAX")
                .font(.footnote)
                .foregroundColor(.gray.opacity(0.7))
         }
      }
   }
}

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

Arayüz istediğimiz şekilde gözüküyor. Şimdi, üstte deklare ettiğimiz değişkenin “Digital Crown”a göre değişmesini sağlayalım.

Bunun için öncelikle en dıştaki HStack’e bir .focusable() “modifier”ı ekleyelim. digitalCrownRotation özelliğinin çalışması için buna ihtiyacımız var.

HStack {
   // Daha önce bu HStack'i projeye eklemiştik
}
.focusable()

Sırada ise .digitalCrownRotation() “modifier”ı var. Bunu kullanmadan önce kullanılışına biraz göz atalım.

Bu fonksiyonun aldığı 6 parametre bulunuyor. Bunlar;

• from: değişkenin alabileceği en küçük değer
• by: her dönüşte değişkenin ne kadar arttırılacağı/azaltılacağı
• through: değişkenin alabileceği en büyük değer
• sensitivity: değişkenin arttırılması/azaltılması için gereken minimum dönüş
• isContinuous: değişken maksimum veya minimum değerine ulaştığında “Digital Crown” döndürülmeye devam ederse değişkenin başa dönmesi veya değişimin durması
• isHapticFeedbackEnabled: dönüş ile birlikte Taptic Engine’in çalışarak dokunsal geri bildirim vermesinin gerekip gerekmediği

Biz, bu özelliğincurrentRotation değerini 0'dan 10'a kadar her dönüşte 1 birim arttırmasını, minimum dönüşün (hassasiyetin) orta seviyede olmasını, değişkenin başa dönmemesini ve dönerken dokunsal geri bildirim vermesini istiyoruz. Bu yüzden .digitalCrownRotation() “modifier”ını aşağıdaki gibi kullanacağız.

Bu kodu HStack’in sonundaki .focusable() “modifier”ının altına ekleyebilirsiniz.

.digitalCrownRotation($currentRotation, from: 0, through: 10, by: 1, sensitivity: .medium, isContinuous: false, isHapticFeedbackEnabled: true)

Şimdi, arayüz için kopyaladığımız koda geri dönelim. Ortadaki içi boş olan Text elemanının içini aşağıdaki ile değiştirerek currentRotation değişkenini bir “integer”a dönüştürüp gösterelim.

Text("\(Int(currentValue))")

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

Artık “Digital Crown”u döndürdükçe ortadaki sayıyı minimum ve maksimum değerler arasında değiştirebiliyoruz.

Bu özelliği kullanıcıdan bir sayı verisi almanız gerektiğinde “stepper” gibi çalışan butonların yerine kullanabilirsiniz.

digitalCrownRotation‘u uygulamanızda kullanmak için bilmeniz gerekenler 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