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.