SwiftUI: macOS Temelleri

Tüm Apple platformlarına arayüzler oluşturabileceğiniz SwiftUI ile harika macOS uygulamaları geliştirmeyi öğrenin!

Herkese selamlar! Bu makalede, SwiftUI ile macOS uygulamaları geliştirmek için gereken en temel ve önemli bilgileri göstereceğim. Bu bilgilerden bazıları iPadOS için de geçerli olsa da bazıları sadece macOS’de kullanılabiliyor.

Bir uygulamanın en temel parçalarından biri olan NavigationView ile başlayalım.

NavigationView

iOS’deki NavigationView, yeni sayfaların sağdan sola kayarak açılmasını, geri tuşu ile de soldan sağa doğru kayarak kaybolmasını sağlıyor. Ancak macOS ve iPadOS’de bu durum biraz farklı.

Bu işletim sistemlerinde, “sidebar” adı verilen bir element bulunuyor ve ana sayfalar arasındaki navigasyon, genellikle “sidebar”ın içindeki tuşlar ile sağlanıyor.

Öncelikle, aşağıdaki pencereye göz atalım.

Solda bulunan “sidebar”da iki tane seçenek bulunuyor ve sağda gösterilen sayfa, buradan seçilebiliyor.

Bu pencereyi göstermek için kullanılan kod ise bu şekilde:

struct ContentView: View {
   var body: some View {
      NavigationView {
         List {
            NavigationLink("FirstView", destination: FirstView())
            NavigationLink("SecondView", destination: SecondView())
         }
         FirstView()
      }
   }
}

Fark ettiyseniz, NavigationView’un içinde iki tane View bulunuyor. Soldaki List elemanı “sidebar”da sayfaları listelerken başka bir yerde deklare edilen FirstView elemanı ise sağ tarafta bulunuyor.

Kullanıcı, bir NavigationLink‘e birine bastığında ise ikinci eleman, gidilecek olan ekran ile değiştiriliyor.

Yani iOS’in aksine, NavigationLink ile gidilen ekran, bir öncekinin üstünü kaplamak yerine sağ tarafta önceki ekranın yerinde çıkıyor.

Şimdi, NavigationView‘un içine bir eleman daha ekleyelim.

struct ContentView: View {
   var body: some View {
      NavigationView {
         List {
            NavigationLink("FirstView", destination: FirstView())
            NavigationLink("SecondView", destination: SecondView())
         }
         List {
            NavigationLink("FirstView", destination: FirstView())
            NavigationLink("SecondView", destination: SecondView())
         }
         FirstView()
      }
   }
}

Bu şekilde, en dıştaki “sidebar”da bulunan tuşlar, sağlarındaki bütün elemanları değiştirebiliyor. Örnek olarak, FirstView‘a yönlendiren tuşa bastığımızda sağdaki iki View da FirstView ile değiştiriliyor.

Ortadaki List elementindeki tuşlar ise kendi sağlarındaki elemanları değiştirebiliyor.

Artık eklediğimiz ikinci List elemanını kaldırabiliriz.

Şimdi, FirstView‘ün deklare edildiği yere .toolbar “modifier”ı ile bir tuş ekleyelim:

struct FirstView: View {
   var body: some View {
      Text("First View")
         .padding()
         .toolbar(content: {
            Button("Buton") {
               print("Merhaba")
            }
         })
   }
}

Pencerenin üstüne bu şekilde bir buton eklendi ve başlık büyüdü. Hazır başlığa gelmişken başlıktaki yazının nasıl değiştirilebileceğinden de bahsedeyim.

“First View” yazısını içeren Text elemanına aşağıdaki “modifier”ı ekleyelim.

.navigationTitle(“First View”)

Başlığa “First View” yazısını eklemek oldukça kolay. Ancak iOS’deki .navigationBarTitle ve .navigationBarTitleDisplayMode modifier’ları macOS’de kullanılamıyor.

NavigationView hakkında bilmeniz gereken en temel şeyler bunlardı.

Touch Bar

Kullanıcılarınızın belirli aksiyonları daha kolayca yapabilmesini isterseniz, bu aksiyonların tuşlarını klavyelerinin üstünde bulunan Touch Bar’da göstermek güzel bir seçim olacaktır.

Aşağıdaki kodu projeye ekleyelim ve “sidebar” aracılığıyla “SecondView” sayfasına gelelim:

struct SecondView: View {
   @State private var text = ""
      var body: some View {
      TextField("Buraya tıklayın", text: $text)
   }
}

Şimdi Touch Bar’da bir buton gösterelim. Bunun için .touchBar “modifier”ını kullanabiliriz.

TextField("Buraya tıklayın", text: $text)
   .touchBar(content: {
      Button("Buton") {
         print("Merhaba")
      }
   })

Buton ve diğer arayüz elemanları bu şekilde eklendiğinde renkleri mavi veya başka bir renge yakın görülebilir. Bunu düzeltmek için .accentColor “modifier”ını kullanmamız gerekiyor:

Button("Buton") {
   print("Merhaba")
}
.accentColor(nil)

Renk sorununu çözdük. SwiftUI’da Touch Bar desteği AppKit kadar iyi olmasa da gördüğünüz gibi kullanılabiliyor. Konu hakkında daha fazla bilgi almak için ilgili makalemizi okuyabilirsiniz:

SwiftUI: Touch Bar

CommandMenu

Ekranın üstündeki Menu Bar’da tuşlar gösterebilmek için CommandMenu API’ını kullanabilirsiniz. Aynı API iPadOS’de de kullanılabilir olsa da biraz daha sınırlı.

Bu API’ı denemek için uygulamanın “lifecycle”ının olduğu ana dosyaya gidelim.

WindowGroup elemanına aşağıdaki “modifier”ı ekleyelim:

WindowGroup {
   ContentView()
}
.commands(content: {
   CommandMenu("Menü") {
      Button("Buton") {
         print("Merhaba")
      }
   }
})

Butonumuz Menu Bar’da gözüküyor. Bunun dışında, bir WindowGroup’a birden fazla CommandMenu ekleyebilir, bir menünün içindeki elementleri de Divider() ile ayırabiliriz.

Ayrıca .keyboardShortcut “modifier”ı ile tuşa klavye kısayolu eklemeniz de mümkün.

CommandGroup ile ilgili daha çok bilgi için bu makalemizi okuyabilirsiniz:

SwiftUI: CommandMenu

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

Twitter | Instagram | Facebook