WWDC20: SwiftUI ile Widget Oluşturma
WWDC 2020 konferansında tanıtılan en büyük yeniliklerden biri olan Widget’ları SwiftUI ile basit bir şekilde oluşturabilirsiniz.
Merhaba Turkishkit okuyucuları!🤘 Tekrardan bir SwiftUI makalesiyle karşınızdayız. (WWDC20'de gerçekten çok fazla SwiftUI session’ı oluyor. 😉) Bu yazımızda SwiftUI ile nasıl Widget elemanları oluşturabileceğimizi öğreneceğiz! Hemen başlayalım.
WWDC 2020 Haftasını Yakından Takip Edin!
TurkishKit Medium sayfamızı takip ederek WWDC 2020 haftası boyunca tanıtılan yeniliklerden anında haberdar olun.
WWDC 2020 serimizi keşfetmek için aşağıdaki linke tıklamanız yeterli:
Widget’larda SwiftUI
- Widget’larda zaman çizelgesi oluşturarak gün içerisinde Widget’ınızın farklı aksiyonlar almasını sağlayabilirsiniz.
- Widget’ları hem iOS hem de macOS işletim sistemlerinde aynı şekilde kullanmak da mümkündür.
- Ayrıca, Widget’lar SwiftUI’ı öğrenmek için harika bir fırsattır.
Örnek olarak aşağıdaki Widget’a bakabiliriz. (Bu Widget, bir kullanıcının günde ne kadar kafein tükettiğini kaydeden bir uygulamaya aittir.)
Widget’ları anladığımıza göre artık demomuza geçebiliriz.
Demo
Fark edeceğiniz üzere, aşağıdaki projede Widget konfigürasyonları tamamlanmıştır. Geriye sadece Widget’ı geliştirmek kalıyor… 😁
İlk olarak Widget’ın içerisinde kullanılacak veri modelini oluşturalım.
Şimdi ise View elemanımızın içerisine az önce oluşturduğumuz veri türünden bir özellik ekleyelim. Tabii ki bu özelliği yaptığımız zaman “Preview” ekranında da bu özelliği bir değere eşitlememiz gerekecek.
Şimdi arayüzümüzü oluşturmaya başlayalım. Temel olarak arayüz elemanlarını arayüzün içerisinde dikey olarak hizalayacağımız için bir VStack objesi kullanalım.
Arayüz elemanlarımızda “Assets” dosyasının içerisindeki renkler kullanılacaktır.
Widget’ın arka plan rengini vermek için bir ZStack objesi oluşturup, içerisine bir Color objesi ekleyelim.
Sonrasında arayüzün içerisine yeni Text elemanları ekleyelim.
Şimdi eğer uygulamanızı “Preview” ekranınızı çalıştırırsanız, Widget’ınızı bir iPhone’un içerisinde görebilirsiniz.
Şimdi ilk Text objemizi bir VStack objesinin içerisine gömelim. Sonrasında alttaki Text objesini de buraya getirelim.
Aynı şekilde alttaki iki Text objesini bir VStack objesinin içerisine alalım.
Bu iki VStack objesinin arasına bir Spacer objesi yerleştirelim.
Sağ barı kullanarak bu VStack objelerini sağ yatırılacak şekilde ayarlayalım.
VStack objenizin üzerine cmd tuşuna basılı tutarak tıklayın. Oluşan bölümden “Extra Subview” butonuna tıklayın. Oluşan yeni elemanınızın ismini “CaffeineAmountView” olarak değiştirin.
Bu oluşturmuş olduğunuz CaffeineAmountView elemanının içerisine “data” adında yeni bir özellik oluşturalım.
Aynı işlemi alttaki VStack objesi için de yapalım. (Bu sefer bu elemanın adını “DrinkView” yapalım.)
Tabii ki bu oluşturduğumuz elemanların “data” parametrelerini doldurmalıyız.
Fark edeceğiniz üzere, bu elemanları ayrıştırmamız aslında işlevsellik açısından bir fark yaratmıyor. Bunu yapmamızın amacı daha iyi bir kod yapısına sahip olmaktır.
Widget elemanımızın içerisindeki objeleri iyi bir şekilde konumlandırmak için bütün her şeyi bir HStack içerisine alalım ve içerisine bir Spacer ekleyelim.
CaffeineWidgetView elemanının içerisindeki VStack elemanına tıklayın ve sağ bardan (Attribute Inspector) elemanın dört bir tarafına padding ekleyin.
Üst taraftaki yazılara bir arka plan rengi vermek için ana HStack objesinin sonunda background metodunu çağıralım. Metodun içine de bir Color objesi ekleyelim.
Sonrasında, HStack objesinin üzerine tıklayalım ve daha önce yaptığımız gibi dört tarafına padding ekleyelim. (padding değerini 8 olarak verelim.)
Arka planımıza köşelerini kıvrıltmak için background fonksiyonunu aşağıdaki gibi değiştirelim.
CaffeineWidgetView elemanının içerisindeki VStack objesinin üzerine tıklayalım ve sağ bardan padding ekleyelim.
CaffeineAmountView elemanın içerisindeki Text elemanlarının arasına bir Spacer elemanı koyalım.
Widget’ın karanlık modda nasıl gözükeceğini görmek için “Preview” bölümüne yeni bir CaffeineWidgetView elemanı ekleyelim.
Aynı zamanda Widget’ın daha büyük yazılara göre nasıl gözükeceğini görmek için de yeni bir CaffeineWidgetView elemanı ekleyelim.
“Preview” ekranında “placeholder”lı bir Widget bile gösterebiliriz.
Bütün elemanın yazılarını bu şekilde göstermeyebilirsiniz. Bazılarını göstermek ve bazılarını da göstermemek içinse asıl elemanlarda isPlaceholder fonksiyonunu kullanabilirsiniz.
Widget’ın orta (medium) boylu halini göstermek için de “Preview” ekranını kullanabiliriz.
Bu orta boylu Widget oldukça fazla gereksiz yer kaplıyor gibi gözüküyor. O yüzden, veri modelimize “photoName” adında bir özellik daha ekleyelim. Ayrıca, “previewData” değerinin içerisinde “photoName” özelliğine bir değer atayalım.
Widget’ımız sadece orta boy olduğu zaman fotoğrafı göstermek için bir widgetFamily özelliğini çağıralım. Sonrasında widgetFamily değerinin systemMedium olup olmadığını kontrol edelim. systemMedium değerine eşit olduğu taktirde de fotoğrafı Widget’ta gösterelim.
Daha öncekine benzer bir şekilde “placeholder”lı bir orta boy Widget’ı “Preview” ekranında gösterirsek böyle bir sonuç ile karşılaşırız.
Bu konu ile alakalı daha fazla bilgi almak için aşağıdaki bağlantıya tıklayabilirsiniz:
Bir yazımızın daha sonuna gelik. Bu yazımızda SwiftUI ile nasıl Widget elemanları yapabileceğimizi öğrendik. Bir sonraki makalemizde görüşmek üzere! 👋🏻
