iOS 14'de WidgetKit Kullanımı

iOS 13 ve önceki sürümlerde TodayView'da gördüğümüz "Widget" bileşeni, iOS 14 ile birlikte anasayfa ekranında da gösteriliyor. Artık widget bileşenini 3 farklı boyutta ve istediğiniz sayfada görüntüleyebilirsiniz. Konuyla ilgili resmi anlatımı WWDC 2020 - Widget sayfasında bulabilirsiniz.



Apple'a göre widget bir mini-uygulama değildir. Basılacak bir buton ile değişiklik yapmak veya karmaşık bir arayüz olmamalıdır, önemli olan içeriktir. Basit bir gösterimle kullanıcıya ihtiyacını vermelisiniz.


iOS 14 için widget geliştirirken bilmeniz gereken bazı kısıtlamalar var. Öncelikle geliştirme yapmak için Xcode 11 ve SwiftUI kullanmanız gerekiyor. İçerik olarak video veya animasyonlu resim kullanılmıyor ve scroll özelliği widget için desteklenmiyor. Dolayısıyla içeriğinizi belirlenen alan kadar bir yer kullanarak kullanıcıya aktarmanız gerekiyor.


Kısıtlamalardan sonra bilinmesi gereken başka bir konu ise tip, view ve protocol yenilikleri.

Sabit ve değişken olarak 2 tip widget türü mevcut. Birinde kullanıcı bazlı değişiklikler yaparken diğerinde yapılmıyor, fark bu. Widget içeriğinde PlaceholderView ve EntryView olmak üzere 2 tane view mevcut. Protocol olarak da TimelineProvider, TimelineEntry ve Widget var. Aşağıda örnek üzerinde anlatımlarını bulabilirsiniz.


Örneğe başlamadan önce bilgisayarınızda Xcode 11 kurulu olduğunu, SwiftUI hakkında bilgi sahibi olduğunuzu varsayarak devam ediyoruz.


Xcode 11'de oluşturulmuş, SwiftUI destekli projemize File>New>Target seçerek yeni bir Widget Extension ekliyoruz.


Widget oluştururkenTimeline" önemli bir terim. Ne kadar sürede verilerin güncelleneceğini belirleyerek widget üzerinden veri göstereceğiz. Bu örnekte saati gösteren bir widget yapacağız. Her saniye güncelleme yaparak saatin çalışmasını sağlayacağız.



Sol tarafta, widget'a verdiğiniz isimle bir klasör oluşur. Buradaki swift dosyasını açın. İçinde otomatik oluşturulan kodu silin çünkü sıfırdan kendimiz yazacağız.


Bu örnek için WidgetKit ve SwiftUI kütüphaneleri yeterli, sadece bunları import edin. Daha sonra modelimizi oluşturabiliriz. TimelineEntry tipinde basit bir nesne oluşturacağız. Varsayılan olarak, içinde Date tipinde bir date elemanı olmak zorunda. İçinde sadece bir text elemanı bizim için yeterli çünkü sadece saati göstereceğiz.


struct WidgetModel: TimelineEntry {
   var date: Date
   var text: String
}

Bu modeli kullanarak göstereceğimiz view modelimizi oluşturalım. Farklı düzende ve farklı şekillerde UI tasarımları yapabilirsiniz, bu örnekte basitçe bir başlık ve zaman gösterimi yapacağız.


struct WidgetView: View {
   var model: WidgetModel
 
   var body: some View {
     VStack() {
       HStack {
         Spacer()
         Text("Time Widget")
         .fontWeight(.bold)
         .foregroundColor(.gray)
         Spacer()
       }.background(Color.yellow)
 
       Spacer()
 
       HStack {
         Spacer()
         Text(model.text)
         .fontWeight(.bold)
         .multilineTextAlignment(.center)
         .font(.system(size: 26)).foregroundColor(.yellow)
         Spacer()
       }
 
       Spacer()
     }.background(Color.gray)
   }
}

Yukarıdaki kod ile VStack kullanarak dikey yerleştirme, HStack ile yatay yerleştirme ve Spacer nesnesi ile ortalama kısımlarını yaptık. Ayrıca yazı görünümü değiştirdik.

Önceden de bahsettiğimiz gibi bir de PlaceholderView ihtiyacımız var. Bu view, verileriniz yüklenirken gösterilir. Basitçe onu da aşağıdaki gibi yapabiliriz.


struct PlaceholderView: View {
  var body: some View {
    VStack {
     Text("Loading")
    }
  }
}

Sırada TimelineProvider var. Widget, burada yazdığımız koda göre kendini güncelleyecek. func snapshot kullanarak bir kez veya func timeline kullanarak belirli periyotlarla widget üzerinde veri güncellemesi yapabiliriz. Basit bir dateFormatter ile alt alta gösterilen saat formatı oluşturup, her saniye 1 arttırarak gösterim yapacağız. Her saniye güncellenmesini istediğimiz için bunu func timeline kullanarak yapalım.


struct DataProvider: TimelineProvider {
  func timeline(with context: Context, 
     completion: @escaping (Timeline<WidgetModel>) -> ()) {
    
     let date = Date()
     let formatter = DateFormatter()
     formatter.dateFormat = "HH\nmm\nss"
 
     let time = formatter.string(from: date)
 
     let second = Calendar.current.date(byAdding: .second, 
         value: 1, to: date)
     let entry = WidgetModel(date: date, color: .black, 
         text: time)
     let timeline = Timeline(entries: [entry], 
         policy: .after(second!))
     completion(timeline)
  }
 
  func snapshot(with context: Context, 
     completion: @escaping (WidgetModel) -> ()) {}
}

Yukarıdaki kodda WidgetModel nesnesi oluşturarak view üzerinde gösterim sağlıyoruz. Güncelleme zamanını .after kullanarak belirtiyoruz ki bu örnek için 1 saniye olarak belirledik. Sırada ana protokolü oluşturmak ve içinde configuration tipini belirtmek var.


@main
struct SimpleWidget: Widget {
   var body: some WidgetConfiguration {
      StaticConfiguration(kind: "SimpleWidget", 
         provider:DataProvider(), placeholder:PlaceholderView()){ 
         model in
      
         WidgetView(model: model)
      }.supportedFamilies([.systemSmall])
   }
}

Kullanıcı tarafında düzenlenebilen bir widget olmadığı için IntentConfiguration yerine StaticConfiguration kullandık ve desteklenen boyut için içine array alan supportedFamilies fonksiyonuna .systemSmall değişkenini verdik. Buraya .systemMedium ve .systemLarge değişkenleri de eklenebilir. Widget arayüzü preview alanında gösterilmediği için uygulamayı çalıştırarak test ediyoruz. Unutmayın, iOS 14 ve üzeri işletim sistemli telefonlarda veya simülatörlerde test edebilirsiniz. Uygulamayı çalıştırdığınızda aşağıdaki gibi, her saniye değişen bir widget elde edeceksiniz.



Öncelikle işlevselliğe yoğunlaştığımız için görselimiz pek iç açıcı olmadı. Sadece widget geliştirirken değil, iOS uygulamanızın her köşesinde Apple tarafından yayınlanan Apple Kullanıcı Deneyimi Kılavuzu'na uygun geliştirmeler yaparak hem kullanıcı deneyimini arttırabilirsiniz hem de uygulamanızı AppStore'da yayınlarken sorun yaşama riskinizi azaltırsınız.


#ios14 #widgetkit


Github: https://github.com/kkartal/ios_14_widget_tutorial






Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
JetBrains Hakkında Detaylı Bilgi Alın

© 2020 by mobiler.dev

mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın