Merhaba, yaklaşık 16 senelik bir IT geçmişinden sonra, toplamda 5.5 senedir, Appcent’te ise 2019 Aralık ayından itibaren IOS developer olarak görev almaktayım.
Sizlere bu yazıda IOS 14 ile birlikte gelen Widget’ı anlatacağım.
Widget’ın kullanım amacı, kullanıcınızın uygulamanızı açmadan görebileceği içeriği, hızlı ve kolay bir şekilde göstermek. Bunu, üç farklı boyut ile yapabiliyoruz;
- .small (ekranda 4 adet uygulama ikonu kadar yer kaplar)
- .medium(ekranda yatay olarak 8 adet uygulama ikonu kadar yer kaplar)
- .large(ekranda 16 adet uygulama ikonu kadar yer kaplar.)
Kullanıcıya dilediğiniz boyutta veya tüm boyutlarda seçim yaptırabilirsiniz.
Haydi başlayalım!
Öncelikle File>New>Target altında iOS tabının seçili olduğundan emin olun. ardından gelen ekranda, kolaylık olması açısından filter alanına “widget” yazarsanız karşınıza extension karşımıza gelecektir. (Yukarıdaki tabda iOS seçili olduğundan emin olun.)
Next dedikten sonra gelen ekranda widget’ın ismini girin. “Include Configuration Intent” checkbox’ı seçilmemiş olsun.
Widget’ın Static ve Intent iki adet configuration’ı mevcut. IntentConfiguration Siri intents kullanır ve kullanıcının widget’ı düzenleyebilmesine olanak sağlar (Buna daha sonra değineceğiz). Bizim eklediğimiz widget StaticConfiguration olacağı için checkbox’taki tiki kaldırdık.
Finish dedikten sonra “Activate”e tıklayarak widget’ımızı projemize eklemiş olduk.
Ben ismine WidgetTest dedim ve gördüğünüz gibi proje dosyamıza aynı isimli bir klasör oluştu.
Widget için ana class’ımız benim örneğimde “WidgetTest.swift”. Bu class’a girerseniz önceden hazırlanmış taslak kodları göreceksiniz. Hep beraber bunları inceleyelim.
Bu arada widget’lar ile birlikte SwiftUI programlama dili artık hayatımıza girmiş oluyor. Widget’ın dizaynı için SwiftUI öğrenmelisiniz. Elbette internette ücretli veya ücretsiz çok fazla kaynak mevcut. Ya da Appcent Akademi’den bu kursa katılabilirsiniz.
Widget class’ımızda hazır gelen kodları biraz inceleyelim.
Widget — Öncelikle en altta bulunan widget ile aynı isimli bir struct göreceksiniz. Bunun başlangıcında “@main” wrapper’ı class’ın başlangıç noktasını belirliyor. Aynı Appdelegate gibi düşünebilirsiniz.
Entry View — Widget’ın görsel içeriğidir. Burada taslak olarak gelen kodlarda “WidgetTestEntryView” bunun örneğidir. EntryView’ın WidgetTest ile başlamasının sebebi, tahmin edebileceğiniz gibi aslında widget’a verdiğimiz isimdir.
Entry — Entry View’da kullanılacak olan modelimiz. Burada taslak olarak gelen kodlarda “SimpleEntry” bunun örneğidir. Burada istediğiniz şekilde düzenleyebilirsiniz. En önemli uyarı “TimeLineEntry” protokolunden inherit etmemiz gerekiyor.
Provider — TimelineProvider protokolünde inherit edilir. Burada basitçe, widget’ınızda göstermek istediğiniz bilgileri hangi zaman aralıklarında göstermek istediğinizi ayarlayabilirsiniz. Daha detaylı bir yazı ile daha fazla bilgi vermeye çalışacağım.
Projenizde scheme seçtiğimiz yerde widget’ınızın ismini görmeniz gerekiyor. burada direk cmd+r komutuyla projeyi çalıştırırsanız cihazınıza veya simulatore widget’ınız yüklenecektir. Ekranın boş bir alanına basılı tuttuğunuzda sol üst köşede “+” butonunu göreceksiniz. bu butonla birlikte widget listesinde kendi yarattığınız widget’ı görebilirsiniz.
Eğer widget’ınızı göremezseniz lütfen ana target’ınızın “Build phases” kısmında “Embed App Extensions” başlığı altında “Copy only when installing” seçeneğinin tikini kaldırın.
Ardından tekrar projeyi çalıştırdığınızda artık widget’ınızı görebileceksiniz.
Zaman ayırdığınız için teşekkür ederim.
Herkese sağlıklı günler dilerim.
