SwiftUI: Menu

Uygulamalarınızda menü oluşturmayı keşfedin!

Published in

TurkishKit

4 min readAug 18, 2021

Bu yazımızda SwiftUI ile Menu ve ContextMenu kullanarak uygulamalarımıza iOS ve özellikle iPadOS’te oldukça yaygın olan menüleri nasıl ekleyeceğimizi keşfediyor olacağız. Hadi işe koyulalım.

Giriş

İşe ilk olarak bir butona dokunduktan sonra açılan basit bir menü kodlamayla başlayalım.

struct ContentView: View {
    var body: some View {
        Menu(“Menü”) {
            Button(“Kopyala”) { }
            Button(“Paylaş”) { }
            Button(“Kaydet”) { }
        }
        .font(.largeTitle)
    }
}

Aşırı basit bir menü oluşturduk, ama şüphesiz daha iyisini yapabiliriz. Mesela menüyü açan ve içerisindeki butonları basit bir Text görünümü yerine bir Label görünümüne çevirebiliriz.

struct ContentView: View {
    var body: some View {
        Menu {
            Button(action: { }) {
               Label(“Kaydet”, systemImage: “square.and.arrow.down”)
            }
            Button(action: { }) {
               Label(“Kopyala”, systemImage: “doc.on.doc”)
            }
            Button(action: { }) {
               Label(“Paylaş”, systemImage: “square.and.arrow.up”)
            }
        } label: {
            Label(“Menü”, systemImage: “slider.horizontal.3”)
        }
        .font(.largeTitle)
   }
}

Çok daha iyi. 😄 Eğer daha önce SwiftUI ile List görünümlerini kullandıysanız eminim ki Section ile de karşılaşmışsınızdır. Section eğer isterseniz Menu ile de kullanılabiliyor.

Section

Şimdi bir adım daha ileri gidelim ve menümüzde bir Section oluşturup içine bir silme butonu ekleyelim. Menu görünümlerinde görüntülenmeyeceğinden bir Section başlığı eklememize gerek yok.

struct ContentView: View {
    var body: some View {
        Menu {
            Section {
                Button(role: .destructive, action: { }, label: {       
                    Label("Sil", systemImage: "trash")
                })
            }
            Button(action: { }) {
               Label(“Kaydet”, systemImage: “square.and.arrow.down”)
            }
            Button(action: { }) {
               Label(“Kopyala”, systemImage: “doc.on.doc”)
            }
            Button(action: { }) {
               Label(“Paylaş”, systemImage: “square.and.arrow.up”)
            }
        }label: {
            Label(“Menü”, systemImage: “slider.horizontal.3”)
        }
        .font(.largeTitle)
   }
}

Button görünümünün role parametresine dikkat edin! Girdiğimiz .destructive değeri ile silme butonunun menüdeki renginin kırmızı olmasını sağlıyoruz.

Alt Menüler

Eğer daha kompleks ve daha çok seçenek içeren menüler oluşturmak isterseniz bütün butonları alt alta dizmek pek de iyi bir fikir olmayabilir — bir menünün bütün ekranı kaplaması hem iyi bir tasarım hem de kullanıcı deneyimi olmazdı.

Neyseki bunun için imdadımıza alt menüler yetişiyor. Bir alt menü oluşturmak için yapmanız gereken şey: menünüzün içine başka bir menü eklemek! İçgüdüsel tasarım diye işte ben buna derim. 😄

struct ContentView: View {
    var body: some View {
        Menu {
            Section {
                Button(role: .destructive, action: { }, label: {       
                    Label("Sil", systemImage: "trash")
                })
            }
            Menu {
                Button(action: { }) {
                 Label("Dosya Hakkında", systemImage: "info.circle")                }
                Button(action: { }) {
                 Label("Arşivle", systemImage: "doc.zipper")
                }
            }label: {
                Label("Daha Fazla", systemImage: "ellipsis.circle")
            }
            Button(action: { }) {
               Label(“Kaydet”, systemImage: “square.and.arrow.down”)
            }
            Button(action: { }) {
               Label(“Kopyala”, systemImage: “doc.on.doc”)
            }
            Button(action: { }) {
               Label(“Paylaş”, systemImage: “square.and.arrow.up”)
            }
        }label: {
            Label(“Menü”, systemImage: “slider.horizontal.3”)
        }
        .font(.largeTitle)
   }
}

Primary Action

Şimdiyse de iOS15 ve sonrasında kullanılabilen yeni bir özellikten bahsetmek istiyorum: Primary Action. Menu görünümüne yeni eklenen primaryAction parametresini kullanarak üstüne dokunulduğunda belirli bir işlemi gerçekleştiren ve basılı tutulduğunda bir menü görüntüleyen bir buton oluşturabilirsiniz.

Yapmamız gereken tek şey aynı bir butonun action parametresindeki gibi primaryAction parametresinin için yapmak istediğimiz işlemin kodunu yazmak — basılı tutulduğunda da zaten menü açılıyor.

struct ContentView: View {
    var body: some View {
        Menu {
            Button(action: {
                // Hediye etme kodu…
            }) {
                Label(“Hediye Et”, systemImage: “gift”)
            }
        } label: {
            Label(“Satın Al”, systemImage: “tag”)
        } primaryAction: {
            // Satın alma kodu…
        }
        .font(.largeTitle)
    }
}

ContextMenu

Son olarak da .contextMenu niteleyecisini inceleyelim. Context Menu, kendisine uygulanan görünüme iOS’te üzerine basılığı tuttuğunuza da macOS’te üzerine sağ tıkladığınızda açılan menüler olarak tanımlanabilir. Yazılım ve temel mantığı menü ile aynı, ve Primary Action dışında Menu hakkında konuştuğumuz her şey Context Menu için de geçerli.

Bir çok SwiftUI görünümü .defaultAction niteleyicisini kabul etmekte. Liste elemanları, görseller, metinler, özel görünümler…

Bu örnekte bir kedi fotoğrafına Context Menu ekliyor olacağız. 🐈

struct ContentView: View {
    var body: some View {
        Image("cat")
            .resizable()
            .scaledToFit()
            .frame(width: 400)
            .cornerRadius(15)
            .contextMenu {
                Button(action: { }) {
                 Label("Paylaş", systemImage: "square.and.arrow.up")
                }
                Button(action: { }) {
                 Label("Favorilere Ekle", systemImage: "star")
                }
            }
    }
}