Rastgele bir görseli projeye yükleyin (Assets klasörüne sürükleyip bırakabilirsiniz.)
Image("swift") // Görsel ismi.
.resizable() // Görselin boyutlarına müdahale edebilmek için gerekli.
.scaledToFit() // AspectRatio oranı korunur.
.frame(width: 130)
// Sistem görüntünün en-boy oranını bildiği için, (.scaledToFit() kullanınca)
// Yükseklik otomatik olarak hesaplanır.
Image("swift")
.resizable()
// Görselin rengini değişebilmek için,
// rendering mode düzenlemeliyiz. (sistem ikonları için gerekmiyor)
.renderingMode(.template)
.foregroundColor(.orange)
// Artık istediğimiz renge boyayabiliriz.
.scaledToFit()
.frame(width: 130)
Görselin boyutlarına müdahale etmeden önce resizable() metodunu çağırmalıyız.
2) Sistem ikonlarını görüntüleme
Image(systemName: "star.fill")
.resizable()
.frame(width: 100, height: 100)
.foregroundColor(.orange)
.padding()
.background(Color.green)
.clipShape(Circle())
// 1. kısımda gerçekleştirdiğimiz işlemler burada da uygulanabilir.
// Hatta sistem ikonları için renderingMode düzenlemesi yapmadan da
// renk düzenlemesi yapabiliriz.
Sistem ikonları vektörel olduğu için boyuttan bağımsız olarak, çözünürlük endişesi duymadan büyütebiliriz.
Kullanabileceğimiz SF Sembollerini görüntüleyebileceğimiz masa üstü uygulamasını bu linkten indirebilirsiniz.
