SwiftUI: İnteraktif Arayüzler

SwiftUI State kavramı ile birkaç satırda verilere göre değişen, interaktif arayüzler oluşturabilirsiniz.

Merhaba sevgili TurkishKit okuyucuları! 👋 SwiftUI serisi tam gaz devam ediyor! 🚀 Serimizin bu yazısında, SwiftUI kütüphanesinin bize sunduğu yöntemler ile oluşturduğumuz arayüz elemanlarını nasıl interaktif hale getirebileceğimizi göreceğiz.

Yazımıza başlamadan önce SwiftUI hakkında daha fazla bilgi edinmek isterseniz, serimizin bir önceki yazıları olan SwiftUI Temel Bilgiler’i ve SwiftUI ile Arayüz Elemanları’nı da incelemenizi öneririm. 😉

SwiftUI ile Arayüz Elemanları

Siz de hazırsanız, vakit kaybetmeden başlayalım! 😁

Bir uygulamayı nasıl interaktif hale getiririz?

SwiftUI ile Arayüz Elemanları yazımızda, resim ve metin arayüz elemanlarını kullanarak, güzel görünen bir açılış ekranını birlikte oluşturmuştuk. 🤩 Bu havalı sonuca vardıktan sonra, aklınıza bir soru gelmiş olabilir: Peki ya sonra? Uygulama açıldıktan sonra içerisindeki -resim veya metin gibi- verileri değiştirmek istersek, ne yapmalıyız?

Elimizdeki verilere göre uygulamanın arayüzünü güncellemenin, yani bir uygulamayı interaktif hale getirmenin en iyi yolu, yıllardır üzerinde çalışılmasına rağmen, iOS geliştirme dünyasında hâlâ bulunabilmiş değil.

iOS uygulamalarında sıkça kullanılan Model-View-Controller veri akışının bir şeması.

Bu durum, aslında çok temel ve tarihi bir ayrımdan kaynaklanıyor: şimdiye kadar arayüzlerimizi oluşturmak için kullandığımız Storyboard dosyalarının temelini oluşturan Interface Builder, ilk yayınlandığında Xcode’dan bağımsız bir uygulamaydı.

Xcode ile Interface Builder, Xcode’un 4. sürümünde birleşti, ancak önceki bu ayrımın izleri, kod üzerinde Storyboard dosyalarına erişmek için kullandığımız identifier’ları elle giriyor olmamız gibi, günümüzde bile karşımıza çıkıyor. 😱

Bu uygulama artık tarihin tozlu sayfalarına karışmış olsa da, sol taraftaki Outlets penceresi tanıdık gelebilir. 😉

Haliyle, arayüzümüzü tasarlamak ve uygulamamızı kodlamak için kullandığımız araçlar birbirlerinden ayrı ve habersiz olunca, işler oldukça karmaşıklaşabiliyor.

İşte SwiftUI, tam da bu noktada devreye giriyor! 😉

SwiftUI, dengeleri nasıl değiştiriyor?

SwiftUI kütüphanesi, uygulamalarımızın arayüz tasarımını ve arkasındaki gücü olan kodları, Swift dilinin çatısı altında birleştirmemizi sağlıyor. Arayüzlerimizi tasarlarken çok az da olsa kod yazıyoruz, ancak yazdığımız kod, arayüzün nasıl görüneceğinden çok, ne yapması gerektiğini ifade ediyor.

Bunun sayesinde, daha önce 50'den fazla satırla oluşturduğumuz bir TableView elemanını sadece üç satırda oluşturabiliyoruz; çünkü bu elemanın SwiftUI üzerindeki dengi List, sizin ona sağladığınız veri ile şekilleniyor! 🤩

let konular = ["Tasarım", "Kodlama", "Swift", "Sketch"]
var body: some View {
    List(konular, id: \.self) { konu in
        Text(konu)
    }
}

Bunlar iyi, güzel de, ancak konumuzla alakası ne? Çünkü SwiftUI, uygulamalarımızı interaktif hale getirirken yepyeni bir kavram ile karşımıza çıkıyor: yeni kahramanımız @State ! 🥳

State Nedir?

Uygulamalarımızda elimizdeki verileri tutmak için değişkenleri kullanırız. Şimdiye kadar, bu değişkenler her değiştiğinde arayüzümüzü de ona göre güncellemek ve veri akışını kontrol etmek bizim sorumluluğumuzdaydı. Bu durum, tahmin edebileceğiniz (hatta deneyimlemiş olabileceğiniz 😁) gibi çözmesi zahmetli hatalara yol açabiliyor.

Ancak SwiftUI kütüphanesinde bu durum tam tersine dönüyor: veri ile arayüz, birbirine bağlı tek bir parça olarak hareket ediyor. @State anahtar kelimesi ile tanımladığımız değişkenlerin değerlerini, SwiftUI kütüphanesi takip ediyor ve değerler güncellendiğinde, arayüz elemanlarımız da otomatik olarak güncelleniyor. Artık karmaşık veri akışı düzenlerine ihtiyacımız yok! 🤩

SwiftUI ve State sayesinde sürekli güncellenen bir arayüz oluşturmak işte bu kadar kolay!

Haydi Deneyelim!

Bu muhteşem özelliği denemek için ilk yapmamız gereken, yeni bir Xcode projesi oluşturmak. Xcode’u açtıktan sonra her zamanki gibi File > New > Project… kısmından yeni bir Single View App projesi oluşturalım. Ama unutmayalım: User Interface kısmında SwiftUI seçmeliyiz.

Bir arayüzün içeriğini değiştirmeye başlamadan önce, onu oluşturmalıyız! 😁 Projemizi oluşturduktan sonra, bir resim ve altında bir metin bulunduran basit bir görünüm tasarlayalım. Bunun için, SwiftUI kütüphanesindeki Image ve List elementlerini kullanacağız. Bu elementlerin boyut, renk, arka plan gibi özelliklerini istediğiniz şekilde düzenleyebilirsiniz.

Eğer SwiftUI Arayüz Elementleri yazımızdaki örnek projeyi kodladıysanız, bu arayüze zaten sahipsiniz. 😉

Image ve Text elementleriyle sade bir arayüz oluşturuyoruz.

State Değişkenini Tanımlamak

Arayüzümüzü oluşturduğumuza göre, gelin onu biraz değiştirelim! TurkishKit’in yanında, SwiftUI kütüphanesine de merhaba demeye ne dersiniz? Bunun için, ilk olarak arayüzümüzün SwiftUI’ı mı, TurkishKit’i mi gösterdiğini kontrol edecek State değişkenimizi tanımlayalım.

Bunu yapmak oldukça kolay; struct yapımızın içinde herhangi bir değişkeni tanımladığımız gibi tanımlayıp, sadece başına @State anahtar kelimesini eklememiz yeterli!

@State var helloSwiftUI = false

Arayüz Elemanlarının İçeriğini Ayarlamak

State değişkenimizi tanımladık, ancak yapmamız gereken bir şey daha var: arayüzümüzdeki elemanları onun değerine göre değişecek şekilde kodlamalıyız. Haydi gelin, SwiftUI kütüphanesine de “Merhaba!” diyebilmek için, Image ve Text elemanlarımızı şöyle değiştirelim:

Arayüz elemanlarımızın içeriğini değiştirecek kodları yazıyoruz.

Peki bu elemanların parantezlerinin içerisindeki kodlar ne ifade ediyor? Aslında parantezlerin içinde, biraz kısaltılmış bir koşul ifadesi bulunuyor. 😉Soru işaretinden önce verdiğimiz ifadenin değeri doğru (true) ise iki nokta üst üste işaretinden önceki, yanlış (false) ise sonraki kısımdaki değer kullanılıyor.

Arayüzü Değiştirmek

Arayüzümüzü değiştirmek için uygulamamıza bu State değişkenini güncelleyecek bir şeyler eklememiz gerekiyor. Bunu Image ve Text elementleri ile yapamayacağımıza göre -aslında çoğumuzun uzun süredir aşina olduğu- yeni SwiftUI elementimiz Button ile tanışalım! 🙌

Button(action: {
    self.helloSwiftUI.toggle()
}) {
    Text(helloSwiftUI ? "TurkishKit'e merhaba de!" : "SwiftUI'a merhaba de!")
}

Bir Button elementini oluşturmak da diğer SwiftUI elementleri gibi oldukça kolay! Butona dokunulunca çalışmasını istediğimiz kodu action kısmına yazıyoruz, butonumuzun görünümünü de diğer süslü parantezlerin içinde ifade ediyoruz.

Butonumuz tıklandığında helloSwiftUI değişkeninin değerinin değişmesini istediğimiz için onu değeri ne ise tersiyle değiştiren toggle() metodunu kullanıyoruz. Butonumuzun içinde bir yazı gözükmesi için ben bir Text elementi kullandım, ancak siz başka bir element de — örneğin içinde yazı değil de resim olan bir buton için Image — kullanabilirsiniz. 😉

Yeni Arayüzümüzü Deneyelim! 🥳

Butonumuzu da eklediğimize göre, artık uygulamamızı deneyebilir ve State değişkenimizi iş başında görebiliriz! SwiftUI kütüphanesini kullanıyor bir diğer güzel tarafı da uygulamamızı denemek için iOS Simulator’ı çalıştırmamız gerekmemesi. 😁 Yapmamız gereken tek şey, kodlarımızın sağ tarafında bulunan önizleme kısmında üçgen şeklindeki Oynat tuşuna basmak!

İşte SwiftUI ile kodladığımız interaktif arayüzümüz! 🎉

İşte bu kadar!

SwiftUI kütüphanesinin muazzam gücüyle nasıl arayüzlerimizi kolayca interaktif hale getirebileceğimizi öğrendiğimize göre, bu yazımızın da sonuna geldik! Eğer bu yazımızı beğendiyseniz, bu serinin devamını ve diğer yazılarımızı kaçırmamak için Medium sayfamızı takip etmeyi unutmayın! 😁

Bir öneri: eğer beğendiyseniz, sol taraftaki alkış simgesine tıklayarak da bunu bize gösterebilirsiniz! 😉

Hepinize keyifli, kodlama ve tasarım dolu, mutlu yıllar! 🤗🎄

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook