SwiftUI: Image
Uygulamaların neredeyse tamamında görseller kullanılmaktadır. SwiftUI ile uygulamamıza nasıl görseller ekleyebileceğimizi öğrenelim!
SwiftUI ile çok az kod yazarak son derece özgün ve yaratıcı tasarımlar ortaya çıkartmak mümkün. Bu yazımızda sizinle SwiftUI ile görsel oluşturmayı ve oluşturduğumuz bu görselleri özelleştirmeyi öğreneceğiz. Hazırsanız hiç vakit kaybetmeden başlayalım! 💪
Projemizi Oluşturalım
Her şeyden önce tabii ki bir Xcode projesi oluşturmamız gerekiyor. Bunun için “Create a new Xcode project” seçeneğine tıklayalım.
Önümüze gelen “Single View App” bölümüne tıkladıktan sonra, önümüze bu ekran gelecektir. Burada önemli olan, “User Interface” bölümünü “SwiftUI” olarak seçmektir. Aksi taktirde uygulamanızda SwiftUI kullanmanız zor olacaktır.
Bundan sonra, projemizi kaydedersek, kod yazmaya başlayabiliriz!
Kodlama
İlk olarak, elemanımızda kullanacağımız görseli projemize kaydederek başlayalım. Bunun için, TurkishKit logosunu (siz başka bir resim de kullanabilirsiniz), projemizin “Assets” klasörüne taşıyoruz.
Böylece elemanımızı oluşturmaya geçebiliriz. İlk olarak body değerinin içerisinde bir Image elemanı oluşturalım.
struct ContentView: View {
var body: some View {
Image()
}
}Elemanımızı oluşturduktan sonra, hangi görseli kullanacağımızı belirtmek için görselimizin ismini elemanımızın içerisine yazıyoruz. Artık resmimizi görebiliriz.
Yazımızın başında SwiftUI ile özgün ve bir o kadar da yaratıcı tasarımlar yapabileceğimizi söylemiştim. İşte buna örnek vermek için şimdi biz de bu elemanı biraz daha farklı hale getirelim. İlk olarak resmimizin boyutunu değiştirelim. Bunun için frame metodunu kullanacağız.
Fark edeceğiniz üzere, resmimizin boyutu değişmedi. Bunun sebebi, resizable metodunu frame metodundan önce çalıştırmayışımızdır.
Resmimiz kare olmasına rağmen biz frame metodunda hem yükseklik (height) bilgisini hem de genişlik (width) bilgisini vermekteyiz. Aslında sadece bir değeri vererek de resmimizin şeklini kare olarak tutabiliriz. Bunun için ekstra olarak aspectRatio metodunu çağırmalıyız.
Şimdi ise resmimizin opaklığını değiştirelim. Bunun için opacity metodunu çalıştırmamız gerekecek.
Resmimizin köşe yarıçaplarını değiştirerek daha güzel görünmesini sağlayabiliriz. Bunu yapmak için cornerRadius metodunu çalıştıralım.
Resmimizin çevresi biraz daha belli olsun diye, resmimizin üstüne mavi bir çizgi ekleyebiliriz. Bunun içinse overlay metodunu çalıştıralım.
Bu mavi çizgini arkasına da mavi bir gölge eklesek güzel olmaz mı? Bunu yapmak için de shadow metodunu çalıştıralım. (Metotlar, metotlar…)
Son olarak da, resmimizi biraz çevirelim. Bunun için de rotationEffect metodunu çalıştıralım.
Belki biliyorsunuz, Apple, WWDC 2019'da SF Symbols teknolojisini tanıttı. Kısaca bu teknoloji, her boyutta kaliteli olan semboller kullanmanızı sağlıyor. (Konu ile alakalı daha fazla bilgi edinmek için bu yazımızı okuyabilirsiniz.) Bu sembolleri Image elemanında kullanmak mümkün. Bunun nasıl mümkün olduğunu göstermek için, bir tane daha Image elemanı oluşturalım. Yalnız, SwiftUI üzerinde iki veya daha fazla elemanı bir arada kullanmak için Stack yapılarını kullanmamız gerekmektedir. Biz bu iki resmimizi dikey bir şekilde göstermek için VStack yapısını kullanacağız. (Bütün elemanlarımız, bu yapının içerisine yazılacaktır.)
VStack(spacing: 80) {
Image("TurkishKit")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200)
.opacity(0.9)
.cornerRadius(40)
.overlay(RoundedRectangle(cornerRadius: 40).stroke(Color.blue, lineWidth: 10))
.rotationEffect(.degrees(10))
Image()
}Not: spacing parametresi, elemanlar asındaki boşluğu ayarlamak içindir.
Şimdi yeni Image elemanımıza geçebiliriz. Bu elemanımızda bir SF sembolü kullanmak için Image elemanımızdaki systemName parametresine istediğimiz sembolün ismini yazalım. (Bütün SF sembollerine ulaşmak için SF Symbols uygulamasını indirebilirsiniz.)
Gördüğünüz üzere, resmimiz gerçekten de çok ama çok küçük. Şimdi, aklınıza bu resimi büyütmek için az önceki yöntem geliyor olabilir, ama bu sefer onu yapmayacağız. Bunun sebebi, SF Symbols teknolojisidir: Bir SF sembolü tıpkı bir yazı gibidir, yani bir fonta sahiptir. Bu yüzden, tıpkı bir Text elemanının font büyüklüğünü ayarlıyormuş gibi, bu sembolün büyüklüğünü ayarlayacağız.
Aynı zamanda, bu semboller tıpkı yazı elemanları gibi renk de değiştirebiliyorlar. Bunu göstermek için foregroundColor metodunu kullanarak sembolümüzün rengini kırmızı olarak değiştirelim.
SwiftUI ile bir görüntüye yeni bir şekil vermek de çok kolaydır. Örneğin, bu resmi bir yuvarlağa çevirmek için yapmamız gereken, clipShape metodunu kullanarak elemanımın şeklini daire (circle) olarak belirlemek.
İstersek resmimizi bulanıklaştırabiliriz. Bunun için blur metodunu çalıştırmalıyız.
Daha önce oluşturduğumuz elemandaki gibi, bu elemanımıza da çevresini kaplayacak bir çerçeve yapalım.
Çerçevemiz tam olarak belli olmuyor. O yüzden, çerçevemizin kendisine gölge ekleyebiliriz. Evet, SwiftUI sayesinde bu tarz işlemler gerçekten de çok kolay. 😎
Hatta çerçevemizi biraz daha belirginleştirmek için, çerçevemizi sembolümüzün dışına çıkartabiliriz! Bunun için sadece padding metodunu çalıştırmalıyız. (Dikkat, padding metodunu overlay metodundan önce çağırmalısınız yoksa metot farklı çalışır. SwiftUI’da bu çok önemlidir.)
Resmimizin dışına çıkıyormuş gibi gözüken gölgeleri istersek silebiliriz. Bunun için mask metodunu kullanmalıyız.
Bir makalemizin daha sonuna geldik. Bu makalemizde SwiftUI ile Image elemanını nasıl kullanabileceğimizi öğrendik. Artık siz de kendi özgün elemanlarınızı oluşturabilirsiniz! Hepinize keyifli kodlamalar dilerim! 😊
Bu yazımızda yapmış olduğumuz projemize buradan ulaşabilirsiniz:
