SwiftUI Giriş

SwiftUI ile oldukça az kod satırı yazarak dinamik bir şekilde uygulamalar geliştirebiliriz. Bu yazıda SwiftUI ile birlikte iOS dünyasında neler değişti bunları inceliyor olacağız. Haydi başlayalım!

SwiftUI Apple’ın WWDC 19 etkinliğinde tanıtmış olduğu daha çok yeni ama bir o kadar da çok özel bir Swift kütüphanesidir. Bu kütüphaneyi bu kadar özel kılan en belirgin yanı UIKit kütüphanesiyle yazdığımız kod satırlarının neredeyse yarısını hatta belki de daha da azını yazarak aynı uygulamayı geliştirmeyi mümkün kılmasıdır.

SwiftUI ile yazdığımız uygulamaları geliştirirken uzun uzun kodu derleyip simülatörün çalışmasını beklemek yerine canlı önizleme modu ile aynı anda kodun görsel çıktısını takip edebiliriz. Gelin, bir proje oluşturup SwiftUI dünyasına bir giriş yapalım!

SwiftUI ile Yeni Proje Oluşturma

SwiftUI ile proje geliştirebilmek için öncelikle Xcode uygulamasını Mac’imize yüklememiz gerekiyor.

SwiftUI ile uygulama geliştirmek için uygulamanın minimum versiyonu işletim sistemlerine göre sırayla iOS 13, macOS 10.15, tvOS 13, watchOS 6 olmalıdır. Eğer cihazı bu versiyonlardan düşük versiyonlardaki kullanıcılara da yönelik bir uygulama geliştirmek istiyorsanız SwiftUI kullanamazsınız.

Xcode’u açıyoruz ve “Create a new Xcode project” seçeneğine tıkladıktan sonra karşımıza çıkan menüde “App” seçeneğine tıklayarak ilerliyoruz.

Sonrasında çıkan ikinci ekranda bizden istenen “Product Name”, “Team”, “Organization Identifier” bilgilerini dolduruyoruz. Burada önemli olan “Interface” → ”SwiftUI”, “Life Cycle” → “SwiftUI App” seçeneklerinin seçilmiş olması. Bu alanları doldurduktan sonra devam ediyoruz ve son çıkan ekranda bizden istenen proje path’ini belirleyerek projemizi oluşturuyoruz.

“Include Tests” seçimi zorunlu değildir, ihtiyaca göre seçebilirsiniz.

SwiftUI Arayüz Deneyimi

Proje oluştuktan sonra karşımıza çıkan ekranı inceleyelim.

Ekranın sağ tarafındaki ön izleme alanı SwiftUI ile hayatımıza giren en önemli yeniliklerden biri. Üst tarafındaki butonlarla ihtiyaca göre kodumuzu ön izleyebilir veya gerçek bir aygıttaki ön izlemesini yapabiliriz.

SwiftUI ile BluTV Uygulamasına Giriş

Haydi gelin, gerçek bir deneyim yaşamak adına BluTV uygulamasına SwiftUI ile giriş yapalım.

Uygulamamızı login durumda açtığımızda bizi ana sayfada 5 indeksli bir UITabBarController karşılıyor. Sadece 5 indeksli yapıyı elde edebilmek için yazılan custom TabBarController düşünelim ve içerisindeki logicleri hesaba katmadan yaklaşık 150-200 kod satırından oluştuğunu rahatlıkla söyleyebilirim. Bakalım SwiftUI ile bunu ne kadar sürede ve kod satırında yapacağız!

Proje oluşturulduktan sonra (ProjeAdı)App.swift isimli bir dosya oluşur. İşte bu SwiftUI Life Cycle’ının en temel yapı taşıdır. AppDelegate.swift yerine hayatımıza yeni giren bir dosyadır. Tabii siz yine de AppDelegate oluşturmadan proje yazmak istemiyorum derseniz bunun için de çözümler mevcut(Apple bizlere SwiftUI projelerimize de AppDelegate class’ı yaratmamıza imkan tanıyor. Bunu bir sonraki yazıda kaleme alacağız)

Bir düzen kurmak adına View klasörü yaratarak içerisine DiscoverView(1.sekme), MyListView(2.sekme), SearchView(3.sekme), LiveTVView(4.sekme), MoreView(5.sekme) classlarını File → New File → SwiftUI View seçerek sırayla oluşturuyoruz.

TabBar itemlerı için assetlerimizi unutmayalım! Hemen TabBar Item için kullanacağımız görselleri de Assets klasörü içerisine ekleyerek devam ediyoruz.

SwiftUI her view elemanı için class değil struct kullanır. Bunun tek bir sebebi olmamakla birlikte en önemli sebeplerinden biri performanstır. Struct class’a göre daha basit ve hızlıdır. Ancak bu çok klasik bir açıklama değil mi?

UIKit ile geliştirdiğimiz her view gerekli gereksiz her defasında UIView class’ını çağırır ve bu class içerisinde oldukça fazla property, method vs. bulunur. Örneğin bir backgroundColor veya belirlenmiş bir constraint gibi. Bu saydıklarım sadece birkaç tanesi. Apple dökümanlarında 200 civarı olduğu yazmaktadır. Kısacası, her UIView’dan türeyen view ve onun subviewları UIView class’ındaki her property, method vs. hepsine sahiptir çünkü inheritance böyle işler.

SwiftUI ile geliştirilen struct viewlar ise oldukça hafif ve neredeyse baştan yaratılmak için özgürlerdir. Inheritance yoktur. Bir struct yaratalım ve sadece içinde bir integer tanımlayalım. Bu struct sadece o integer kadardır. Herhangi bir parent class inheritance yaratmaz, sürpriz bir ekstra value ortaya çıkmaz.

Bu kavramlara ve detaylarına daha sonra mutlaka değineceğiz.

Projemize dönelim ve ilk ciddi adımlarımızı atalım. SwiftUITutorial01App(ProjeAdıApp) dosyasına giderek aşağıdaki kod bloğunu inceleyelim.

import SwiftUI
@main
struct SwiftUITutorial01App: App {
   var body: some Scene {
      WindowGroup {
         ContentView()
      }
   }
}

Burayı SwiftUI kütüphanesinin bize projeyi ilk açtığımızda default olarak sunduğu main file olarak düşünebiliriz. İçerisindeki ContentView da default olarak oluşturularak bize sunulur. Projemizdeki isimlendirmelere göre bu ContentView dosyası silinerek yeni isimlendirmelerle yenilerini oluşturabiliriz.

Uygulamayı run ettiğimizde ilk olarak window bize ContentView’ın bir instance’ını yaratıp gösterecektir. Gelin ContentView içerisinde ne var görelim!

ContentView View protocolünü uygulayan bir struct’tır. Yukarıda gördüğümüz üzere default olarak Text içermektedir. UI ile alakalı her şeyi body içerisinde yapacağız.

ContentView_Previews struct’ı ise sağ tarafta gördüğümüz ön izlemenin gözükmesini sağlayan struct’tır.

Sağ taraftaki ön izlemenin sağ üst tarafında bulunan resume butonu biz kodumuzda her değişiklik yaptığımızda çıkıyor olacak ve bu butona tıkladığımızda bizim için ön izlemeyi yenileyerek son halini görmemizi sağlayacaktır.

ContentView’ı BluTV uygulamasındaki 5 indeksli TabBar yapımızın tabanı olarak kullanacağız. Haydi başlayalım!

Öncelikle TabBar’ı customize edebilmemiz için UIKit kütüphanesini kullanmamız gerekli. Çünkü UITabBar adından da anlaşılacağı üzere UIKit kütüphanesinin bir üyesidir. Daha sonra da kullanmak istediğimiz TabBar’ı customize ederek uygulamamızdaki haline çevireceğiz.

Body içerisinde TabView ile ContentView içerisinde TabBar’lı bir yapı olacağını belirttik. Daha sonra içerisine 5 tane indeksimizi temsil eden custom structlarımızı koyduk. Artık içerisindeki struct viewlarımız birer TabBar item gibi davranabilirler. Her birinin tabItem’ları içerisine bir tane Image ve Text ekledik.

Burada en önemli nokta @State var selectedIndex = 0 olarak tanımladığımız 12. satırdır. State ifadesi eklenen değişkenler değerleri değiştikçe dinlenebilirler ve bu şekilde kodu yönetmemizi kolaylaştırırlar. $selectedIndex: Bind edebilmek için değişkenin başına $ koyuyoruz.

TabView(selection: $selectedIndex) kullanımı bize seçilen tabItem’ın tag’ini kontrol eder ve yapılan her değişiklikte Image set edilirken kullanılan if döngüsü tetiklenir. Bu sayede TabBar indekslerimiz seçili ve seçili olmayan durumlar için aktif pasif ikon görüntülerini elde ederiz.

Bu yazıda SwiftUI nedir, nasıl proje oluşturulur ve arayüzü hakkında temel bilgiler verdik.

Yazının başında belirttiğimiz gibi SwiftUI sayesinde çok daha az kod satırı ile çok daha dinamik yapılar kurabilmenin ne kadar hızlı ve kolay olduğunu inceledik.

Sonraki yazılarımızda SwiftUI ile neler yapabileceğimizi derinlemesine incelemeye devam edeceğiz.

Herkese keyifli araştırmalar ve okumalar...