WWDC21: AsyncImage
SwiftUI ile geliştirdiğiniz uygulamanıza kolayca internetten görseller ekleyin!
Bir WWDC haftasından hepinize selamlar!👋 Bu yazımızda WWDC21'de SwiftUI için tanıtılan en önemli özelliklerden biri olan AsyncImage’dan bahsedeceğim. 👨💻 Öyleyse haydi başlayalım.🚀
AsyncImage, internetteki görüntüleri URL’ler aracılığıyla asenkron bir şekilde yükleyerek SwiftUI’da göstermenin yeni ve oldukça kolay bir yoludur. Bu özellik tanıtılmadan önce görüntüleri internetten alabilmek için URLSession kullanmamız gerekiyordu. Bu da kodun karmaşıklığını arttırıyordu.
Bu yeni özelliği denemek için öncelikle Xcode 13'ün beta sürümünü Mac’inize kurmuş olmanız gerekiyor. Eğer Xcode 13'e hâlâ sahip değilseniz, indirmek için bu linki kullanabilirsiniz.
Xcode hazır olduğuna göre uygulamamızı geliştirmeye başlayabiliriz. Bunun için öncelikle yeni bir proje oluşturalım.
Şimdi “ContentView”un içine aşağıdaki kodu ekleyelim:
AsyncImage(url: URL(string: “https://source.unsplash.com/random"))Bu kod, AsyncImage’ı olabildiğince basit şekilde kullanmamızı sağlayacak. Kullandığımız URL, Unsplash’den rastgele bir fotoğraf almamızı sağlıyor. Şu ana kadar yazdığımız kod ile görüntünün boyutunu değiştiremiyor veya görsel indirilirken gösterilecek arayüzü ayarlayamıyoruz.
Şimdi, AsyncImage elemanına bir frame “modifier”ı ekleyelim:
AsyncImage(url: URL(string: “https://source.unsplash.com/random"))
.frame(width: 200, height: 200)
Şimdi ise görüntü indirilene kadar gözüken “placeholder”ın boyutunu değiştirdik. Ancak görüntü indirildikten sonra bu boyutun bir önemi veya işlevi kalmıyor. Görüntü, otomatik olarak kendi boyutunda gösteriliyor.
Bu sorunu çözebilmek için init(url:scale:content:placeholder:) “initializer”ını kullanmamız gerekiyor.
Uygulamamızdaki kodu aşağıdaki ile değiştirelim:
AsyncImage(url: URL(string: “https://source.unsplash.com/random")) { image in
image.resizable()
} placeholder: {
ProgressView()
}
.frame(width: 300, height: 300)Bu şekilde yazdığımız kod, görüntüye resizable “modifier”ını eklememizi ve bu sayede görüntüyü ölçeklendirebilmemizi sağlıyor. Ayrıca, görüntü indirilirken kullanıcıyı karşılayacak arayüzü de placeholder’ın içinde belirtebiliyoruz. Bunun için ProgressView kullanmak güzel bir seçenek.
AsyncImage ile yapabileceklerimiz bunlar ile sınırlı değil. Ayrıca, görüntünün anlık durumunu da elde edebiliyoruz. Uygulamanın kodunu aşağıdaki ile değiştirelim:
AsyncImage(url: URL(string: “https://source.unsplash.com/random")) { phase in
if let image = phase.image {
image // Yüklenen görüntü gösterilir
} else if phase.error != nil {
Image(systemName: “xmark.octagon”) // Bir hata olduğunda gösterilir
.font(.largeTitle)
} else {
ProgressView() // Placeholder olarak gösterilir
}
}
Bu şekilde de görüntüyü istediğimiz şekilde gösterebiliyoruz. Ancak bunun dışında görüntünün indirilmesinde bir sorun oluşursa bu durumda da kullanıcıya bir dönüş sağlayabiliyoruz.
Gördüğünüz gibi AsyncImage ile SwiftUI’da internetten aldığımız resimleri kullanmak oldukça kolay. Yalnız burada unutmamanız gereken şey şu, bu özellik kullanıcı tarafında minimum iOS 15, macOS 12 Monterey, tvOS 15 veya watchOS 8 sürümünü gerektiriyor.
