SwiftUI: CommandMenu

CommandMenu ile macOS ve iPadOS’de Menu Bar ve klavye kısayolları oluşturun!

Baran Önen
TurkishKit
4 min readJun 25, 2021

--

Herkese merhaba! 👋 Bu yazıda macOS ve iPadOS’de kullanılabilen ve kullanıcılara kısayollar sunan CommandMenu özelliğinden bahsedeceğim.

Mac’te ekranın en üstündeki Menu Bar’da, iPad’de ise command tuşuna basılı tutulduğunda gelen pencerede gözüken komut menüleri, kullanıcıların belirli hareketleri klavye kısayolları veya imleç aracılığıyla gerçekleştirmesini sağlar.

Bunlara aşağıdaki kısayol gibi bir çok örnek verilebilir.

Bu özelliği denemek için yeni bir iOS uygulaması oluşturalım.

Aynı özelliği macOS’de de deneyebilmek için uygulamayı Catalyst’e hazır hale getirelim. Bunun için Mac “checkbox”unu işaretlememiz yeterli olacaktır.

Eğer Apple Silicon işlemcili bir Mac’iniz varsa, karışıklık yaratmaması için “Designed for iPad” olarak “build” etme özelliğini kapatabilirsiniz.

Şimdi uygulamamızın ana dosyasına (eğer uygulamanızı benim gibi adlandırdıysanız CommandMenuApp.swift) giderek WindowGroup’a bir commands “modifier”ı ekleyelim:

WindowGroup {
ContentView()
}
.commands(content: {
})

Daha sonra, content argümanının içine bir CommandMenu ekleyelim:

CommandMenu(“Çok gizli menü”) {}

Son olarak ise bu menünün içinde gösterilecek bir tuşa ihtiyacımız var. Bunun için CommandMenu’nun içine aşağıdaki gibi bir buton ekleyelim.

Button("Çok gizli özellik") {
print("Çok gizli mesaj")
}

Şimdi uygulamamızı çalıştıralım.

Çok gizli özelliğimizi Menu Bar’da göstermeyi başardık.

Menu Bar’daki tuşların çoğunda aynı zamanda klavye kısayolları da bulunur. Böylece işlemler daha da az adımla tamamlanabilir. Bir kısayolun iPad’de gözükmesi ve kullanılabilmesi için ise klavye kısayolu olması zorunludur.

Şimdi tuşumuza bir klavye kısayolu ekleyelim. Bunun için “Çok gizli özellik” butonuna keyboardShortcut “modifier”ını ekleyebiliriz:

.keyboardShortcut(“g”)

Artık Command+G kısayolu ile de tuşa basabiliyoruz. Bunun yanında, kısayol iPad’de de kullanılabilir hale geldi.

keyboardShortcut hakkında daha fazla bilgi için Apple’ın sitesini ziyaret edebilirsiniz:

Şimdi CommandMenu ile yapabileceğimiz diğer şeylere bakalım. Buna elementlerin arasında bulunan ve farklı konudaki elementleri birbirinden ayıran Divider ile başlayabiliriz.

Bunun için CommandMenu ‘nun içindeki kodu aşağıdaki ile değiştirelim:

Button(“Çok gizli özellik”) {
print(“Çok gizli mesaj”)
}
.keyboardShortcut(“g”)
Divider()Button(“Daha da gizli özellik”) {
print(“Daha da gizli mesaj”)
}
.keyboardShortcut(“f”)

Şimdi ise Picker elementini kullanarak kullanıcıların Menu Bar’da seçim yapmasını sağlayalım. Bunun için öncelikle body‘den önce bir değişken oluşturmamız gerekiyor.

@State private var gizlilik = 0

Sonra ise her zamanki gibi bir Picker elementi oluşturmalıyız.

Picker("Gizlilik derecesi", selection: $gizlilik) {
Text("Gizli").tag(0)
Text("Çok gizli").tag(1)
Text("Daha da gizli").tag(2)
}

Sistem tarafından gösterilen menülere müdahale etmek için ise CommandGroup‘u kullanabiliriz. Örneğin aşağıdaki kod ile uygulamanın hakkında bölümüne yeni bir tuş eklememiz mümkün.

CommandGroup(after: CommandGroupPlacement.appInfo) {
Button(“Çok gizli uygulama hakkında”) {
print(“Bu uygulamanın ilk kuralı, kimseye bu uygulamadan bahsetmemektir.”)
}
}

CommandGroupPlacement ile tuş yerleştirebileceğimiz yerlerin tümünü görmek için Xcode’daki otomatik tamamlama özelliğini kullanabilirsiniz.

Ayrıca after yerine before kullanarak verdiğimiz elemanların sistemin verdiği tuştan önce çıkmasını, replacing kullanarak ise sistemin verdiği tuşun yerine çıkmasını sağlayabiliriz.

Bu şekilde Menu Bar’a kısayollar veya iPad’e klavye kısayolları ekleyebilir, kullanıcıların daha “native” bir deneyim yaşamasını sağlayabilirsiniz.

Ancak unutmayın ki Mac’te gösterilen her kısayol iPad’de gösterilmeyebilir. Bunun sebebi, iPad’deki CommandMenu‘nun amacının sadece klavye kısayolları olmasıyken Mac’te daha geniş bir kullanım alanı olmasıdır.

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

Twitter | Instagram | Facebook

--

--