SwiftUI: Popover

Küçük baloncuklar şeklinde gözüken Popover’lar ile kullanıcılara detaylı bilgi aktarın!

Merhaba sevgili geliştiriciler! 🛠 Bu yazımızda, kullanıcıya bir durum hakkında daha detaylı bilgi gösterebilmek veya veri alabilmek için iOS, iPadOS ve macOS’te kullanabileceğiniz Popover elemanından bahsedeceğim.

Öncelikle yeni bir Xcode projesi oluşturalım. Projenin adı için “Popover”ı tercih edebilirsiniz.

Özelliği macOS’de de deneyebilmek için “Deployment Info” bölümünde macOS’i işaretleyerek Catalyst özelliğini aktifleştirebilirsiniz.

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

Bu özellik, Catalyst ile “build” edilmemiş bir iOS uygulamasının Apple Silicon işlemcili Mac’lerde App Store’dan indirilip çalıştırılmasına eşdeğerdir.

Şimdi, ContentView‘un içine body’den önce bir @State değişkeni ekleyelim.

@State private var isPopoverShown = false

Bu değişken, Popover‘ın gösterilmesi gerekip gerekmediğinin bilgisini taşıyacak.

Popover‘lar, iPadOS ve macOS’de bir elemana bağlı olarak gösterilir. Bu yüzden bir Popover oluşturmak için öncelikle bir eleman oluşturmamız lazım. Bunun için bir Button tercih edebiliriz.

Button("Popover") {
   isPopoverShown = true
}

Bu butona basıldığında, isPopoverShown‘un değeri true ile değiştirilecek.

Şimdi ise bu butona .popover() “modifier”ını eklememiz gerekiyor.

.popover(isPresented: $isPopoverShown) {
}

Eklediğimiz “modifier”, az önce oluşturduğumuz buton ile değiştirilen değerin true olduğunda bir Popover gösterilmesini sağlayacak. Şimdi ise bu “modifer”ın içine gösterilecek bir eleman ekleyelim.

Text("Popover içeriği")
.padding()

Uygulamayı macOS için “build” edelim.

Tuşa bastığımızda artık bir Popover gösteriliyor.

iPadOS’de de durum aynı şekilde. Şimdi iOS’e bakalım.

iOS’de gördüğünüz üzere durum oldukça farklı. Diğer cihazlarda küçük bir baloncuk olarak görünen Popover‘lar, iOS’te Sheet‘ler gibi gözüküyor. Bunun sebebi ise ekran boyutlarının küçük olması.

Uygulamalarınızda Popover‘lar göstermek için bilmeniz gereken şeyler bunlardı. Bir sonraki yazıda tekrardan görüşmek üzere! 👋

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

Twitter | Instagram | Facebook