SwiftUI: SF Symbols
SF Symbols, uygulamalarınızda kullanabileceğiniz 2400'den fazla yapılandırılabilir semboller sağlar.
Merhaba TurkishKit okuyucuları. Bu yazımızda, SF Symbols nedir ve ne işe yarar ve SwiftUI’da nasıl kullanılır yakından öğreneceğiz. Eğer sizler de hazırsanız başlayalım! 🤙🏻
SF Symbols Nedir?
Apple’ın San Francisco sistem yazı tipiyle entegre olacak şekilde tasarladığı SF sembolleri sayesinde, tüm boyutlardaki metinlerle hizalama kusursuz oluyor. Uygulamalarınızda kullanabileceğiniz 2400'den fazla SF sembolü iOS 13, macOS 11, watchOS 6 ve tvOS 13 ve üzeri sürümlerde mevcut olarak kullanılabilir.
SF Symbols’u Yakından İnceleyelim
SF Sembolleri, uyarlanabilir tasarımlar oluşturmanıza yardımcı olmak için çok çeşitli ağırlıklarda ve ölçeklerde mevcuttur.
Resimde gördüğünüz sembollerin ölçekleri ve ağırlıkları hassas bir yapıya sahiptir. Bu yapı farklı boyutlar ve içerikleri destekler.
Özel Semboller Oluşturma
SF Symbols tarafından sağlanmayan bir sembole ihtiyaç duyuyorsanız, kendi sembolünüzü oluşturabilirsiniz. SF Symbols uygulaması sayesinde bir sembolü yeniden kullanılabilir hale getirebilirsiniz. SF sembolleri vektör tabanlı bir dosya biçiminde şablon olarak dışa aktarmanıza olanak tanır. Özel bir sembol oluşturmak içinse istediğiniz tasarıma benzer bir sembolü dışa aktarın, ardından Sketch ve Illustrator gibi bir vektör düzenleme aracı kullanarak değişim gerçekleştirebilirsiniz. Sembol oluştururken dikkat etmeniz gerekenler ise şunlardır:
- Basit olması
- Anlaşılabilir olması
- Temsil ettiği içeriğe uyumlu olması
Özel sembolleri oluştururken dikkat etmeniz gereken özelliklerden birisi de alternatif metin etiketleri oluşturmayı unutmamaktır. Alternatif metin etiketleri ekran da görünmez ancak VoiceOver’ın ekranda ne olduğunu sesli olarak tanıtmasına izin vererek görme engelli kişiler için kullanılır. Ayrıca, Apple ürünlerinin kopyalarını kullanmamalısınız. Apple ürünleri telif hakkına sahip olduğu için çoğaltılamaz.
SwiftUI ile SF Symbol Kullanımı
SwiftUI projemizi oluşturmadan önce şu adresten SF Symbols’ü indirelim:
Uygulamamızı indirdikten sonra açalım ve içerisini biraz inceleyelim. Yukarıdaki seçeneklerden istediğinizi seçerek sembollerin geçirdiği değişimleri gözlemeyebilirsiniz. Şimdi uygulamamıza geçelim.
SF Symbols uygulamasını indirdikten ve inceledikten sonra Xcode üzerinden SwiftUI uygulamamızı oluşturalım ve adına isterseniz “SwiftUISFSymbols” diyelim.
SwiftUI’ın bize varsayılan olarak verdiği arayüz elemanlarını silelim ve yukarıdaki “+” sembolü olarak bulunan “Library’’ kısmından TabView araması yapalım. TabView elemanını sürükleyerek body içerisine bırakalım. Ardından bir @State değişkeni atayalım.
@State var index = 0Oluşturduğumuz değişkeni TabView içerisindeki selection parametresine yazalım. Ardından alt satırdaki Text("Tab Content 1") kısmını silelim ve yeni bir Image elemanı ekleyelim. Yüklemiş olduğumuz SF Symbols uygulamamızın içerisinden istediğiniz sembolü ekleyebilirsiniz, ben car.fill sembolünü ekleyeceğim. Sembolümüzü uygulamamıza aşağıdaki gibi ekleyelim. 👇🏻
Image(systemName: "car.fill")
.font(.largeTitle)
.foregroundColor(Color.red)Şimdi Tab Label kısmına geçelim ve o kısımlara da sembol ekleyelim. Text("Tab Label 1") kısmını silelim ve yeni bir Image oluşturalım. Ben bu kez arrowshape.turn.up.left.2.circle.fill sembolünü ekleyeceğim.
TabView(selection: $index) {
Image(systemName: "car.fill")
.font(.largeTitle)
.foregroundColor(Color.red)
.tabItem {
Image(systemName: "arrowshape.turn.up.left.2.circle.fill")
}
.tag(1) Text("Tab Content 2")
.tabItem {
Text("Tab Label 2")
}
.tag(2)
}
Bu yaptığımız işlemlerin aynısını ikinci eleman için de yapalım. Yine istediğiniz sembolleri ekleyebilirsiniz. Benim eklediğim sembollere göre uygulama aşağıdaki gibi olacaktır.
İlk elemanın içerisindeki özellikleri aynı şekilde kullandığımızda hoş bir görüntüyle karşılaştık ama SF Symbols ile yapabileceğimiz daha birçok şey var.
- SF Sembolünün boyutunu değiştirme
- Sembolü kalınlaştırma
- SF Sembolünün boyutunu ve ağırlığını değiştirme
- Bir sembolün ölçeğini değiştirebilme
Gelin bu özellikleri ikinci elemanda yapalım.
SF Sembolünün Boyutunu Değiştirme
Öncesinde sembolümüzün büyüklüğünü değiştirebilmek için font “modifier”ında largeTitle gibi değerler kullanmıştık. Şimdi ise system içerisindeki size parametresine değer atayarak sembolümüzün boyutunu ayarlayalım.
.font(.system(size: 76.0))
size değerini önce 76 verdik ve giderek azalttık, bu sayede boyuttaki değişimleri gözlemledik.
Sembolü Kalın Yapma
Sembolümüzü kalın yapabileceğimiz bir Image olan square.and.pencil sembolünü seçelim. Sonrasında system “modifier”ının arkadasından bold “modifier”ını yazalım.
Image(systemName: "square.and.pencil")
.font(Font.system(.largeTitle).bold())Bu işlem için aşağıdaki gibi de elemanlarınızı oluşturabilirsiniz. (Hatta bu şekilde yazmanızı tavsiye ederiz çünkü bu yazım çok daha sade ve diğer insanlar tarafından da anlaşılması kolaydır.)
Image(systemName: "square.and.pencil")
.font(.largeTitle)
.bold()SF Sembolünün Boyutunu ve Ağırlığını Değiştirme
Aynı sembolü kullanarak boyutunu size parametresi ile ayarlayalım ve ağırlığını bold -kalın- hale getirelim.
Image(systemName: "square.and.pencil")
.font(.system(size: 56.0, weight: .bold))Sembolün Ölçeğini Değiştirin
imageScale “modifier”ını kullanarak sembolümüzü her ekran boyutunda aynı ölçekte gösterecek şekilde küçük (small), orta (medium) veya büyük (large) hale getirebiliriz. Bu değişikliği gelin beraber gözlemleyelim.
Image(systemName: "square.and.pencil")
.imageScale(.large) // ilk
.imageScale(.medium) // ikinci
.imageScale(.small) // üçüncü
Bir makalemizin daha sonuna geldik! Bu makalemizde SF Symbols nedir, ne işe yarar ve SwiftUI’da nasıl kullanılır öğrenmiş olduk. 🤟🏻
SwiftUI ile ilgileniyor ve daha çok şey öğrenmek istiyorsanız aşağıdaki linkten bütün SwiftUI makalelerimize ulaşabilirsiniz! 🎉
