Merhaba Mobilen okurları, bu yazımda sizlere SF Symbols’ün büyüleyici dünyasına adım atarken nelerin beklediğini elimden geldiğince anlatmaya çalışacağım.

SF Symbols, Apple’ın geliştiricilere sunmuş olduğu güçlü bir sembol kitaplığıdır. Kitaplığın sunmuş olduğu bu semboller, ıOS, maçOS veya ipadOS platformları için geliştirilen uygulamaların kullanıcı arayüzünü zenginleştirmek ve daha etkileyici hale getirmek için harika bir imkan sunmaktadır.

SF Symbols kitaplığının yetkinliklerini uyumluluk, oluşturma modları (rendering modes), değişken renk (multicolor), boyutlar ve ağırlık (weight and scales), tasarım çeşitleri (designt variants) ve animasyonlar (animations) konu başlıkları üzerinde durarak anlatmaya çalışacağım.

SF Symbols, San Francisco sistem yazı tipiyle sorunsuz bir şekilde bütünleşen, tüm ağırlık ve boyutlardaki metinlerle otomatik olarak hizalanan binlerce tutarlı ve yüksek düzeyde yapılandırılabilir sembol sağlar.

SF Symbols 3 ve sonrası, sembollerin görünüm yönetimi için oluşturma modları Rendering Modes adı verilen bir dizi, tek renkli monochrome, hiyerarşik hierarchical, palet palette ve çok renkli multicolor, seçenek sunar. Bu seçeneklerin bize sağlamış olduğu çeşitliliği aşağıda yazmış olduğum kod bloğu ile örnekleyerek açıklayacağım.

  import SwiftUI

  struct ContentView: View {
      var symbols: [String] =
        [
          "square.and.arrow.up",
          "folder.badge.plus",
          "trash.slash",
          "calendar.day.timeline.right",
          "list.number",
          "textformat.abc.dottedunderline",
          "iphone.gen3.radiowaves.left.and.right",
          "pc",
        ]

      var body: some View {
          HStack {
              ForEach(symbols, id: \.self) { symbol in
                  Image(systemName: symbol)
              }
          }
      }
  }

Yukarıdaki kod bloğunda SF Symbols kütüphanesindeki isimlere göre oluşturulmuş sekiz adet sembol ekrana çizdirilmektedir.

Tek Renkli (Monochrome): Sembolün oluşturulma modunu monochrome (tek renkli) olarak ayarlamamız sonucunda sembolün tüm katmanlarına istediğimiz renk uygulanarak oluşturulmaktadır.

  ForEach(symbols, id: \.self) { symbol in
      Image(systemName: symbol)
        .symbolRenderingMode(.monochrome)
        .foregroundStyle(.blue)
  }

Hiyerarşik (Hierarchical): Semboldeki tüm katmanlara verilen renk uygulanmakta ve katmanlardaki rengin opaklığı katmanların hiyerarşi düzeyine göre otomatik olarak ayarlanarak oluşturulmaktadır.

  ForEach(symbols, id: \.self) { symbol in
      Image(systemName: symbol)
        .symbolRenderingMode(.hierarchical)
        .foregroundStyle(.blue)
  }

Palet (Palette): Hiyerarşideki her katman icin bir belirtilen renk kullanılarak sembolün iki veya daha fazla renkten oluşmasını sağlamaktadır.

  ForEach(symbols, id: \.self) { symbol in
      Image(systemName: symbol)
        .symbolRenderingMode(.palette)
        .foregroundStyle(.blue, .gray)
  }

Çok Renkli (Multicolor): Sembolun taban (base) katmanındaki rengi belirtilir ve diger katmanlarindaki renkler sistem tarafindan konfigüre edilir.

  ForEach(symbols, id: \.self) { symbol in
      Image(systemName: symbol)
        .symbolRenderingMode(.multicolor)
        .foregroundStyle(.blue)
  }

BONUS:

  // Yukarıda açıkladığım oluşturma modlarında belirttiğimiz renkler yerine
  // linear gradient kullanılarak semboller kullanıcılar için
  // daha ilgi çekici bir hale getirilebilmektedir.

  Image(systemName: "person.3.sequence.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(
      .linearGradient(colors: [.red, .black], startPoint: .top, endPoint: .bottomTrailing),
      .linearGradient(colors: [.green, .black], startPoint: .top, endPoint: .bottomTrailing),
      .linearGradient(colors: [.blue, .black], startPoint: .top, endPoint: .bottomTrailing)
    )

SF Symbols 4 ile birlikte gelen değişken renk özelliği sayesinde uygulama içerisindeki sembollerin oluşturma modundan bağımsız olarak kapasite veya güç gibi zaman içerisinde değişkenlik gösterebilen özellikleri temsil edilebilir oldu. Sembole verilen yüzde değer ile sembolün katmanlarının opaklığı ayarlanarak kullanıcıya sunulmaktadır.

  import SwiftUI

  struct ContentView: View {
      @State var progress: Double = 0

      var formattedProgress : String {
          String(format: "%.0f", progress/0.33)
      }

      var symbols: [String] =
        [
          "speaker.wave.3.fill",
          "wifi",
          "chart.bar.fill",
          "touchid",
        ]

      var body: some View {
          VStack {
              HStack {
                  ForEach(symbols, id: \.self) { symbol in
                      Image(systemName: symbol, variableValue: progress)
                        .imageScale(.large)
                        .foregroundStyle(.red)
                  }
              }
                .padding()

              Text("Current Progress: \(formattedProgress)")
                .font(.system(size: 25, weight: .bold, design: .rounded))

              Slider(value: $progress, in: 0...1, step: 0.33){
              } minimumValueLabel: {
                  Text("0").font(.title).fontWeight(.bold)
              } maximumValueLabel: {
                  Text("3").font(.title).fontWeight(.bold)
              }
                .padding()

          }
            .foregroundStyle(.blue)
            .font(.system(size: 100))
      }
  }

SF Symbols, barındırdığı semboller için sağladığı üç adet boyut (small, medium (the default), large) ve dokuz adet ağırlık (ultralight, thin, light, regular, medium, semibold, bold, heavy, black) çeşitliliği ile uyarlanabilir (adaptable) tasarımlar oluşturmaya yardımcı olmaktadir.

ImageScale ve fontWeight view modifierları aracılığı ile sembolün boyut ve yazı tipi ağırlığı ayarlanabilmektedir.

  import SwiftUI

  struct ContentView: View {

      var body: some View {
          Image(systemName: "folder.badge.plus")
            .foregroundStyle(.blue)
            .imageScale(.large)
            .fontWeight(.bold)

      }
  }

Aşağıda bulunan sınıflandırma görseli Apple’ın resmi sitesinden alıntılanmış olup kullanımların sembole etkisini detaylıca göstermektedir.

Boyutlar San Francisco sistem yazı tipinin başlık yüksekliğine (yazı tipindeki büyük harfin satır taban çizgisi üzerindeki yüksekliği) göre tanımlanmaktadır.

SF Symbols iOS15 ile birlikte gelen symbolVariant view modifierı sayesinde barındırdığı sembollerin anlamını çeşitlendirebimektedir. Bu çeşitler daire (circle), kare (square), dörtgen (rectangle), doldurma (fill) ve çizgidir (slash).

  // Örnekte kullanmış olduğum symbolVariant view modifierları
  // birbiri ardindan kullanılarak cumulatif bir sonuc elde edilebilmektedir.

  import SwiftUI

  struct ContentView: View {

      var body: some View {
          Image(systemName: "heart")
            .imageScale(.large)
            .symbolVariant(.circle)
            .symbolVariant(.slash)

      }
  }

SF Symbols, barındırdığı sembolleri mecazen canlandırmak için kullanılabilecek ve konfigure edilerek kişiselleştirilebilecek animasyon dizisi sunmaktadır. SF Symbols 5 ve sonrasında, başlıca appear (görünme), disappear (kaybolma), bounce (zıplama), scale (büyüyüp küçülme), pulse (nabız), variable color (değiken renk) ve replace (yer değiştirme) animasyonlarını sunmaktadır.

SymbolEffect view modifierı aracılığı animasyon efekti ayarlanabilmektedir.

  import SwiftUI

  struct ContentView: View {

      var body: some View {
          VStack {
              Image(systemName: "folder.badge.plus")
                .symbolEffect(.appear)
                .frame(width:  100, height: 100)
          }
            .padding()
      }
  }

Görünme (Appear): Sembolün yavaş bir şekilde ortaya çıkmasını sağlamaktadır.

Kaybolma (Disappear): Sembolün yavaş bir şekilde görünmez hale gelmesini sağlamaktadır.

Zıplama (Bounce): Sembolün yukarı aşağı hareketi ile elastik bir zıplama efekti meydana getirilmektedir.

Boyut (Scale): Sembolün büyütülüp küçültülerek boyut değişikliğini gerçekleştirmektedir.

Nabız (Pulse): Sembolün belirli katmanlarındaki opaklığı periyodik olarak değiştirerek nabız atımı görünümü sağlar.

Değişken Renk (Variable color): Sembol içerisindeki katmanların opaklığını artımlı olarak değiştirmektedir.

Yer Değiştirme (Replace): Bir sembolün diğeri ile yer değiştirmesinin geçişinin animasyonunu sağlamaktadır.

Artık SF Symbols kitaplığını kullanarak uygulamanızın arayüzünü daha anlaşılır ve tutarlı hale getirebilirsiniz.

Bir sonraki yazıda tekrar buluşmak dileğiyle.

• Animate SF Symbols
• Apple Human Interface Guideline for SF Symbols
• Custom color and Transparency