SwiftUI için bir başlangıç ​​noktası arıyorsanız doğru yerdesiniz!

Ortak Görünüm Bileşenleri ve Özellikleri

Similar to UIKit, some of the most used UI components exist in SwiftUI. UIKit’e benzer şekilde en çok kullanılan UI bileşenlerinin bir kısmı SwiftUI’da da bulunmaktadır.

Text

Text is equivalent to UILabel.Text(“Hello World!”)
.font(.title.bold())
.foregroundStyle(.blue)

Button

As you guessed, Button is equivalent to UIButton.Button {
print(“Button Action”)
} label: {
Text(“Hello World!”)
.font(.title.bold())
.foregroundStyle(.white)
.padding()
.background(.blue)
.clipShape(RoundedRectangle(cornerRadius: 16))
}

Image

As you might expect, Image is equivalent to UIImageView.Image(systemName: “house.fill”)
.resizable()
.scaledToFit()
.foregroundStyle(.blue)

TextField

TextField equals to UITextField.TextField(“placeholder”, text: .constant(“”))
.textFieldStyle(.roundedBorder)

HStack & VStack

Uygulamanızın kullanıcı arayüzünü yapılandırmaya gelince, görünümleri birbirleriyle hizalamak önemlidir.

SwiftUI’de bu amaç için iki temel düzen oluşturucu vardır: HStack ve VStack.

Bu düzen oluşturucular, görünümleri sırasıyla yatay ve dikey olarak düzenlemenize olanak tanır.

Ayrıca daha karmaşık düzenler elde etmek için bunları birleştirebilirsiniz.

HStack

HStack aligns views horizontally.HStack {
Text(“Leading Text”)
.font(.body.bold())
.foregroundStyle(.blue)

Text(“Trailing Text”)
.font(.caption.bold())
.foregroundStyle(.orange)
}

VStack

It aligns views vertically.VStack {
Text(“Top Text”)
.font(.body.bold())
.foregroundStyle(.blue)

Text(“Bottom Text”)
.font(.caption.bold())
.foregroundStyle(.orange)
}

Görünümler Arası İlişki: Spacer ile Esnek Kullanıcı Arayüzü

Spacer, SwiftUI’nin esnek kullanıcı arayüzleri oluşturmak için kullandığı hafif ama güçlü bir bileşendir.

Bildiğiniz gibi, sabit kenar boşlukları (önde, üstte, arkada, altta) kullanarak bir görünümü diğerine hizalamak aşırı derecede zahmetli olabilir.HStack {
Text(“Leading Text”)
.font(.body.bold())
.foregroundStyle(.blue)

Spacer()

Text(“Trailing Text”)
.font(.caption.bold())
.foregroundStyle(.orange)
}

Bir HStack’te iki Metin arasına bir Spacer yerleştirildiğinde, tasarlandığı gibi Metinleri doğal olarak kenarlara doğru iter.HStack {
Spacer()

Text(“Leading Text”)
.font(.body.bold())
.foregroundStyle(.blue)

Spacer()

Text(“Trailing Text”)
.font(.caption.bold())
.foregroundStyle(.orange)

Spacer()
Spacer()
}

I Öncü Metinden önce bir tane daha Boşluk İşareti ve Soncu Metinden sonra iki tane daha Boşluk İşareti ekleyin.

Ara Parçalar eklerken, Öncü Metin ön kenarından bir Ara Parça ile, Soncu Metin ise arka kenarından iki Ara Parça ile uzaklaştırılır.

Sonuç olarak, Soncu Metin, Öncü Metne kıyasla cihaz kenarından daha uzakta kalır.

Veri Listesiyle Çalışma

Veri listesi konusunda SwiftUI’da List ve Foreach olmak üzere iki seçenek bulunmaktadır.

List

List equals to UITableView in UIKit.var numbers = [1, 2, 3, 4, 5]

List(numbers, id: .self) { number in
Text(“(number)”)
}

This is pure simple!

List also has some prepared UI such as divider, card-looking, etc.

Foreach

var numbers = [1, 2, 3, 4, 5]

VStack {
ForEach(numbers, id: .self) { number in
Text(“(number)”)
}
}

Foreach yapısı, List bileşenine daha yalın bir alternatif sunar. Foreach ile liste kullanıcı arayüzünüzü oluşturma konusunda tam kontrole sahip olursunuz ve bu da daha basit ve daha özelleştirilebilir bir yaklaşımla sonuçlanır.

Gözlemlenebilir Özellik ile Arayüz Güncelleme

SwiftUI, Bildirimsel Programlama yaklaşımını benimsemesiyle UIKit’ten farklıdır.

Bildirimsel Programlamada, kullanıcı arayüzü gözlemlenebilir bir değer veya özellikteki değişiklikleri gözlemler.

Değer değiştiğinde, kullanıcı arayüzü değişikliği yansıtacak şekilde dinamik olarak ayarlanır.

SwiftUI’nin temel özellik sarmalayıcıları olan Durum ve Binding, gözlemlenebilirliği mümkün kılar:

Durum: Tek yönlü bağlantıyı kolaylaştırır ve öncelikli olarak ilişkili görünüm içinde kullanılır.

Bağlayıcı: İki yönlü bir bağlantı kurar ve Durum özelliklerini başka bir görünüme iletmek için kullanılır.

Şimdilik sadece Durum’a odaklanalım

@State var text: String = “Initial Text”

VStack(spacing: 32) {
Button {
text = “Edited Change”
} label: {
Text(“Change Text”)
.font(.title.bold())
.foregroundStyle(.white)
.padding()
.background(.blue)
.clipShape(RoundedRectangle(cornerRadius: 16))
}

Text(text)
.font(.body.bold())
.foregroundStyle(.blue)
}

Metni Değiştir düğmesi eylemi gözlemlenebilir metin özelliğini değiştirir. Kullanıcı arayüzü metin özelliğindeki değişiklikleri dinlemek üzere tasarlandığından, otomatik olarak kendini günceller. Bu işlevsellik, Durum özelliği sarmalayıcısı tarafından mümkün kılınır.

Görünüm

Her SwiftUI görünümü, Görünüm(view) protokolüne uyan bir yapıdır.

Yapılar sınıf kalıtımına izin vermediğinden, SwiftUI görünümleri yalnızca protokollere uyabilir.

Bu özellikler, SwiftUI’deki görünümlerin bağımsız ve benzersiz olduğu bir yaklaşımın benimsenmesini gerektirir.

UIKit’te, UIViewController ve UITableViewController gibi belirli görünümler için temel sınıflar oluşturmak yaygın bir uygulamadır. Bu alışkanlıktan kurtulmak zor olsa da, zihniyette bir değişiklikle mümkündür!

Yararlı Bileşenler

SwiftUI’nin temel ilkelerinden biri daha az kod, daha çok iş.

Geliştirmeyi kolaylaştırmak için kullanıma hazır bazı görünüm bileşenleri var.

Etiket (Label)

HStack.Label’da Görüntü ve Metnin bir karışımıdır. (“I am a Label”, systemImage: “house.fill”)

Toplayıcı (Picker)

UISegmentedControl ve UIPickerView’ın birleşik versiyonudur.

Wheel, inline, segmented ve palette gibi çeşitli stilleri vardır.let numbers = [1, 2, 3, 4, 5]
@State var selection: Int = 0

Picker(“Select”, selection: $selection) {
ForEach(numbers, id: .self) { number in
Text(“(number)”)
}
}
.pickerStyle(.inline)

Görüntü Ölçeği

SwiftUI’nin başlangıcından bu yana Apple, SF Symbols adlı görüntü kütüphanesini sağladı. Görüntü görünümünü kullanarak bu görüntülere kütüphaneden zahmetsizce erişebilirsiniz.

Ayrıca, bir Metin görünümü için yazı tipini ayarlamaya benzer şekilde, yazı tipi işlevini kullanarak görüntüyü ölçekleme esnekliğine sahipsiniz.Image(systemName: “house.fill”)
.font(.largeTitle)

SwiftUI, Apple ortamında projeler geliştirmenin yeni bir yoludur.

Düşüncenizi bir şekilde SwiftUI’nin yoluna uyarlarsınız.

Bunu başardığınızda, SwiftUI’nin kapıları sizin için tamamen açık olacaktır!

Yazar: Yusuf Demirci

Tags