SwiftUI: Arayüz Elemanları

SwiftUI ile uygulamaların temelini oluşturan arayüz elemanlarını inceleyelim.

Merhaba sevgili TurkishKit okuyucuları! 👋 Bugün sizlerle Apple’ın yeni arayüz oluşturma kütüphanesi SwiftUI ile bazı temel arayüz elemanlarını nasıl oluşturabileceğinizi ve özelleştirebileceğinizi inceleyeceğiz.

Bu arada, SwiftUI hakkında biraz daha bilgi edinmek isterseniz serimizin bir önceki yazısı SwiftUI Temel Bilgiler’i de okumanızı kesinlikle öneririm. 😉

SwiftUI Temel Bilgiler

Eğer siz de hazırsanız, haydi başlayalım! 🚀

Arayüz Elemanlarını İnceleyelim 🔎

SwiftUI, ekleyebileceğiniz birbirinden farklı onlarca arayüz elemanına sahip olsa da, bu yazımızda şimdilik her uygulamanın temelinde olan Text ve Image elemanlarını inceleyeceğiz. Text elemanı, arayüzümüze yazılar eklememizi sağlıyor. Image ise, adından anlaşılabileceği gibi, uygulamamıza görsel ögeler eklememizi sağlıyor.

Eğer daha önce UIKit ile çalıştıysanız, Text ve Button elemanlarının UILabel ve UIImage elemanlarına olan benzerliğini fark etmiş olabilirsiniz, ancak biraz sonra sizin de göreceğiniz gibi, SwiftUI arayüz elemanlarını kullanmak ve dilediğiniz gibi özelleştirmek çok daha kolay! 🤓

Yeni Bir Proje Oluşturalım 🔨

SwiftUI ile çalışabilmek için önce SwiftUI kütüphanesini kullanan yeni bir Xcode projesi oluşturmalıyız. Welcome to Xcode ekranında Create a new Xcode project seçeneğinden veya File > New > Project… menüsünden yeni bir Single View App projesi oluşturalım. Ancak burada küçük ama önemli bir detayı unutmayalım: User Interface seçeneğini Storyboard yerine SwiftUI olarak işaretlemeliyiz. 😉

Projemizi oluştururken SwiftUI kullanıcı arayüzünü seçiyoruz.

Projemizi oluşturduktan sonra karşımıza SwiftUI ile oluşturduğumuz arayüzün kodları ve yan tarafında da arayüzümüzün bir ön izlemesi çıkacak. Bu kısım önemli, çünkü arayüz elemanlarımızı oluşturmak ve değiştirmek için gereken kodları elle yazmak yerine buradan görsel bir şekilde oluşturabiliriz!

Arayüz Elemanlarımızı Oluşturalım

Arayüz elemanlarımızı canlandırmak için yapmamız gereken şey oldukça basit: arayüz elemanımızın sınıf ismini başa, içeriğini ise iki parantezin arasına yerleştiriyoruz.

Bir SwiftUI arayüz elemanı en az iki ögeden oluşuyor: sınıfın ismi ve elemanın içeriği.

Bunu yapmanın daha da basit bir yolu var: eğer arayüz elemanımızı bulunduran kod satırına veya önizlemedeki görüntüsünün üzerine tıklarsak, sağ taraftaki Attributes Inspector menüsünden kodu düzenlememize gerek kalmadan elemanlarımızın içeriğini değiştirebiliriz. 😉

Sıra bizde!

Projemizde varsayılan olarak gelen Text elemanının görüntülediği “Hello, World!” metnini “Merhaba TurkishKit!” ile değiştirelim. Bunun için Text elemanından sonra gelen parantezin içindeki metni, veya Attributes Inspector üzerinde en baştaki metni değiştirmeniz yeterli. 🙂

Arayüz Elemanlarımızı Özelleştirelim

Uygulamamızı tasarlarken kullandığımız arayüz elemanlarını elbette bir noktada özelleştirmek isteyeceğiz. Bu noktada SwiftUI kütüphanesinin muhteşem bir özelliği var: modifier adı verilen küçük eklentilerle, elemanlarımızın renk, boyut, arka plan, çerçeve gibi yüzlerce farklı özelliğini değiştirebiliyoruz.

Yapabileceğimiz özelleştirmelerin dünyası gerçekten sonsuz! ✨

Arayüz elemanlarını eklerken olduğu gibi, özelleştirmeleri de ister gereken kodu elle yazarak, isterseniz de Attributes Inspector menüsünden görsel bir şekilde ekleyebilirsiniz.

Sıra bizde!

Şimdi, içeriğini değiştirdiğimiz metin elemanını biraz şekillendirerek havalı bir başlığa dönüştürelim!

Öncelikle, metnimizin boyutunu büyütmek için üzerine tıklayalım ve Attributes Inspector menüsünde Font özelliğini Large Title ile değiştirelim. Metnin büyüdüğünü anında görebilirsiniz.

Sonrasında ise, metnimizi kalınlaştırmak için yine aynı menüde Weight özelliğini Bold yapalım, ve en sonunda da arayüzümüzü biraz renklendirmek içinse Color özelliğini istediğimiz herhangi bir renk ile değiştirebiliriz. (Ben mor seçtim. 😀) İşte havalı başlığımız hazır! 🤩

Text("Hello, World!")
    .font(.largeTitle)
    .fontWeight(.bold)
    .foregroundColor(.purple)

Birden Fazla Arayüz Elemanı Ekleme

Yeni bir arayüz elemanı eklemek için ise tek yapmamız gereken, yukarıdaki (+) butonuna tıklayınca karşımıza çıkan menüden istediğimiz bir elemanı ön izleme alanının üzerine sürükleyip bırakmak.

Ancak küçük bir farklılık görmüş olabilirsiniz: yeni arayüz elemanını nereye sürüklediğinize göre Xcode, elemanlarımızı bir VStack veya HStack yapısının içine yerleştiriyor. Bunun nedeni -Storyboard temelli arayüzlerin aksine- SwiftUI kütüphanesinin arayüz elemanlarının konumlarını varsayılan olarak otomatik ayarlaması.

İki arayüz elemanının konumunu otomatik olarak belirleyebilmek için SwiftUI, elemanlardan hangisinin önce, hangisinin sonra geldiğini ve yan yana mı, yoksa alt alta mı dizildiklerini bilmeli. İşte bu bilgileri, VStack ve HStack yapıları belirtiyor. VStack yapısının içerisindeki elemanlar alt alta dizilirken, HStack yapısındakiler yan yana diziliyor. Bu yapıların içindeki elemanların sırasını ise, o elemanların kod üzerindeki sırası belirliyor.

Sıra bizde!

Şimdi ise, oluşturduğumuz başlık metninin üzerine uygulamamızın logosunu ekleyelim. Arayüz elemanı kütüphanesinden (biraz aşağı kaydırdıktan sonra🙂) bir Image ögesini sürükleyip Text elemanımızın üzerine gelecek şekilde bırakalım; bunu yaparken Xcode bize bir VStack oluşturulacağını gösterecektir.

Image elemanımızın göstereceği resmi belirlemek içinse, Assets.xcassets klasörüne bir resim dosyası ekleyip sonra da eklediğimiz resmin ismini Image("resim_ismi") şeklinde, yani parantezlerin arasına tırnak içinde yazmalıyız.

Resmimizi ekledikten sonra gelin biraz özelleştirelim! Boyutunu ayarlayabilmek için .resizable() özelliğini ekleyelim. Sonra, resmimizin çerçevesini 150 x 150 boyutuna getirmek için .frame(width:150.0, height:150.0) olacak şekilde bir modifier ekleyelim. En sonunda da, eklediğimiz resmi şık bir uygulama ikonu haline getirmek için resmimizin köşelerini .cornerRadius() özelliği ile 20px yuvarlatalım.

struct ContentView: View {
    var body: some View {
        VStack {
            Image("turkishkit-icon")
                .resizable()
                .frame(width: 150.0, height: 150.0)
                .cornerRadius(34.0)
            Text("Merhaba TurkishKit!")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(.purple)
        }
    }
}

Ve SwiftUI ile oluşturduğumuz açılış ekranımız artık hazır! 🥳

İşte açılış ekranımızın tamamlanmış hali! 🎉

Şimdilik bu kadar! 🤓

Bu küçük proje ile SwiftUI üzerinde bazı temel arayüz elemanlarını nasıl oluşturabileceğimizi ve özelleştirebileceğimizi öğrenmiş olduk. Artık siz de sadece birkaç satır kod ile, birbirinden göz alıcı ve aynı zamanda her cihaza uyum sağlayabilen arayüzler oluşturabilirsiniz! 🤩

Eğer bu yazımızı beğendiyseniz, SwiftUI serimizi takip etmeyi unutmayın. 😉 Hepinize iyi kodlamalar! 🖥

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

Twitter | Instagram | Facebook