SwiftUI: ScaledMetric

ScaledMetric ile bütün arayüz elemanlarınızın büyüklüklerini ayarlayın!

👋 Hepinize tekrardan merhaba sevgili TurkishKit okurları. Bu yazımızda SwiftUI’da ScaledMetric property wrapper kullanımı keşfediyoruz. Hadi başlayalım. 🙌

Eminim birçoğunuz erişilebilirlik ayarlarında metin boyutu menüsüne denk gelmişsinizdir. Bu ayar, kullanıcılara sistem bütünündeki metin boyutlarını özelleştirme seçeneği sunmakta. Buna tabii ki SwiftUI’da kulanmaya alışık olduğumuz dinamik fontlar (.subheadline vs.) da dahil. Peki ya bu davranışı başka bir görünüm üzernde elde etmek isteseydik?

iPadOS Ayarlar Menüsünden Bir Ekran Fotoğrafı

iOS 14 ve sonrasında kullanılabilen @ScaledMetric tam da bunun için var. Aşağıdaki örnekte bir görselin erişilebilirlik ayarlarına göre yeniden boyutlandırılmasını sağlıyoruz.

struct ContentView: View {
    // MARK: - Properties
    @ScaledMetric private var imageSize: CGFloat = 100
    // MARK: - Methods
    var body: some View {
        Image(systemName: “face.smiling”)
            .resizable()
            .frame(width: imageSize, height: imageSize)
            .foregroundColor(.yellow)
    }
}

Öncelikle @ScaledMetric kullanarak görselimizin boyutunu saklayan bir değişken tanımlıyoruz. Yukarıda atadığımız 100 değeri varsayılan ayarlarda kullanılıyor ve kullanıcı punto ayarını değiştirdiğinde SwiftUI tarafından otomatik olarak artırılıyor ya da azaltılıyor. Ardından frame niteleyecisi ile değişkenimizi görselimizin boyutu olarak kulanıyoruz.

Eğer değişkeninizin değerinin arayüzünüzdeki bir metin ile eşleşmesini istiyorsanız aşağıdaki gibi istediğiniz dinamik font değerini kullanarak da tanımayabilirsiniz.

@ScaledMetric(relativeTo: .title) private var size: CGFloat = 100

Son adım da tabii ki yaptıklarımız test etmek! Bunun için yukarıda bahsettiğim gibi erişilebilirlik ayarlarından metin boyutunu değiştirmemiz gerek.

Ayarlar’a girin ve Erişilebilirlik -> Ekran ve Metin Puntosu -> Büyük Metin menüsünü açın. Karşınıza çıkan ekrandan metin boyutunu istediğiniz gibi ayarlayabilir, eğer dilerseniz Büyük Erişilebilirlik Puntoları seçeneğini etkinleştirerek daha da büyük boyutlara erişebilirsiniz.

Dinamik font desteği kulanmak, belki de uygulamalarınızı daha erişilebilir hale getirmek için yapabileceğiniz en önemli şey. Buna az önce yaptığımız gibi görsel ve diğer arayüz elemanlarını eklemek de erişilebilirlik özelliklerini kullanan kullanıcılarınızın için hayatı oldukça kolaylaştıracaktır.

Umarım öğrendikleriniz uzun süre işinize yarar. Bir sonraki yazımızda 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