Image

• Lokal görsel isimleri

• Sistem ikon isimleri

• ve UIImage

gibi parametreler ile Image oluşturabiliriz.

1) Lokal'de bulunan görseli görüntüleme

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)

template rendering mode

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.

sf system icon

Kullanabileceğimiz SF Sembollerini görüntüleyebileceğimiz masa üstü uygulamasını bu linkten indirebilirsiniz.

SF Symbols

TODO: antialiased, interpolation..