SwiftUI ) AsyncImage

SwiftUI ) AsyncImage 

 

AsyncImage는 iOS15로 업데이트되면서 생긴 기능으로

 

URLSession 인스턴스를 사용하여 할당된 URL에서 이미지를 가져오는 기능을 수행하여줍니다.

 

실제로 디바이스를 실행하고 몇 초 후 이미지가 나타나게 하는곳에 사용될 수 있습니다.

 

이번엔 이 AsyncImage를 활용하는 방법을 알아보겠습니다.

 

 

1. AsyncImage

 

struct ContentView: View {
    
    private var imageUrl : String = "https://img.freepik.com/free-vector/character-bee-set_77984-116.jpg"
    
    
    var body: some View{
        
        AsyncImage(url: URL(string: imageUrl))
        
        }
 }

 

다음과 같이 코드를 작성하면 앱 실행 후 해당 url의 이미지가 나오는것을 확인할 수 있습니다.

 

 

 

2. Scale

 

해당 이미지의 크기가 마음에 들지 않는다면 Scale을 통하여 이미지의 크기를 조정할 수 있습니다.

 

 var body: some View{
        
        AsyncImage(url: URL(string: imageUrl), scale: 3.0)
        
        }

 

scale의 값이 클 수록 이미지는 작아집니다.

 

 

3. Placeholder

 

AsyncImage는 PlaceHolder를 이용하여 특정 이미지가 먼저 화면에 나오게 한 후, AsyncImage가 나오게 합니다.

var body: some View {
       AsyncImage(url: URL(string: imageUrl)) { image in
            image
                .resizable()
                .scaledToFit()
        } placeholder: {
            Image(systemName: "photo.circle.fill")
                .resizable()
                .scaledToFit()
                .frame(maxWidth: 120)
                .foregroundColor(.purple)
                .opacity(0.5)
        }
        .padding(40)
 }

 

 

4. Extension

 

PlaceHolder처럼 2가지 이상 이미지가 존재하는 경우 이미지의 크기를 조정하기 위하여 중복된 코드가 

 

반복될 가능성이 높다. 이럴때는 Image에 Extension을 넣어 처리하는 방법이 있다.

 

extension Image {

    func imageModifier() -> some View {
        self
            .resizable()
            .scaledToFit()
    }
    
    func iconModifier() -> some View {
        self
            .resizable()
            .scaledToFit()
            .frame(maxWidth: 120)
            .foregroundColor(.purple)
            .opacity(0.5)
    }
}

 

이러한 방법을 통하여 3번의 PlaceHolder 코드를 간략화 할 수 있다.

 

var body: some View {
       AsyncImage(url: URL(string: imageUrl)) { image in
            image.imageModifier()
        } placeholder: {
            Image(systemName: "photo.circle.fill").iconModifier()
        }
        .padding(40)
 }

 

 

5. Phase

 

AsyncImage를 불러올때 URL링크를 통하여 이미지를 불러오는것이기 때문에

 

현재 이미지가 로드되는 상태에 따라서 단계별로 다른 이미지를 연출할 수 있습니다.

 

 

5 - 1  if let

      AsyncImage(url: URL(string: imageUrl)) { phase in
            if let image = phase.image {
            image
                .resizable()
                .scaledToFit()
            }else if phase.error != nil {
                Image(systemName: "ant.circle.fill").iconModifier()
            }else {
                Image(systemName: "photo.circle.fill").iconModifier()
            }
        }
        .padding(40)

 

5 - 2 Switch

     AsyncImage(url: URL(string: imageUrl) ) { phase in
            switch phase {
            case .success(let image):
                image.imageModifier()
                    .transition(.move(edge: .bottom))
            case .failure(_):
                Image(systemName: "ant.circle.cill").iconModifier()
            case .empty:
                Image(systemName: "photo.circle.fill").iconModifier()
            @unknown default:
                ProgressView()
            }
            
        }
        .padding(40)

 

실제로 위에 이미지 url을 지워서 이미지가 링크될수 없는 url이 되면 다음과 같은 화면이 나타납니다.

 

 

 

 

6. Animation

 

AsyncImage에는 Anmiation을 부여할 수 있습니다.

 

Anmation은 프리뷰에서는 확인이 안되고 시뮬레이터를 통하여 확인해야 합니다.

 

   AsyncImage(url: URL(string: imageUrl), transaction:  Transaction(animation: .spring(response: 0.5, dampingFraction: 0.6, blendDuration: 0.25))) { phase in
            switch phase {
            case .success(let image):
                image.imageModifier()
                    .transition(.move(edge: .bottom))
            case .failure(_):
                Image(systemName: "ant.circle.cill").iconModifier()
            case .empty:
                Image(systemName: "photo.circle.fill").iconModifier()
            @unknown default:
                ProgressView()
            }
            
        }
        .padding(40)

 

애니메이션의 종류는 아래와 같이 다양하게 있습니다.

 

image.imageModifier()
    .transition(.move(edge: .bottom))
    .transition(.slide)
    .transition(.scale)
    .transition(AnyTransition.scale.animation(.easeInOut))