SwiftUI - Image

오늘은 Image에 대해서 알아보겠습니다.

https://developer.apple.com/documentation/swiftui/image

스유에서 이미지를 보여주는 뷰가 Image 구조체입니다.
UIImage 비슷한거라고 생각하면 될 듯?

---

먼저 프로젝트에 기영이 이미지를 추가해줍니다.

기본

struct ContentView: View {
    var body: some View {
        Image("giyoung2", bundle: nil)
    }
}

 

 

frame 적용
기영이 이미지 사이즈를 변경해봅시다.
사이즈는 100, 100으로 변경해보겠습니다.

struct ContentView: View {
    var body: some View {
        Image("giyoung2", bundle: nil)
            .frame(width: 100, height: 100)
    }
}

응? 왜 안바껴?
ㅇㅇ resizable 수정자를 적용하지 않으면 이미지는 본래의 사이즈를 유지한다고 합니다.
그럼 resizable 수정자를 붙여보고 frame을 넓이 높이를 100으로 적용해봅시다.

struct ContentView: View {
    var body: some View {
        Image("giyoung2", bundle: nil)
            .resizable()
            .frame(width: 100, height: 100)
    }
}

잘 바뀌는 것 확인

위와 같이 resizable내에 parameter가 존재하는데 설정하지 않으면,
기본으로 capInsets은 EdgeInsets, resizingMode는 stretch가 적용된다고 합니다.

resizingMode 비교
참고 왼쪽이 .stretch고 오른쪽이 .tile이 적용된 화면입니다.
(타일은 이미지 렌더링 공간보다 이미지가 작은 경우 여백을 타일식으로 채워서 사용할 수 있겠네요)

 

opacity 적용
기영이 이미지에 불투명 설정을 해줍시다.

struct ContentView: View {
    var body: some View {
        Image("giyoung2", bundle: nil)
            .opacity(0.5)
    }
}

 

blur 적용
기영이 이미지 블러를 적용해봅시다.

struct ContentView: View {
    var body: some View {
        Image("giyoung2", bundle: nil)
            .blur(radius: 5)
    }
}

 

saturation 적용
기영이 이미지 채도를 조정해봅시다.

struct ContentView: View {
    var body: some View {
        Image("giyoung2", bundle: nil)
        .saturation(0.5)
    }
}

 

aspectRatio 적용
기영이 이미지 비율을 설정해봅시다.

왼쪽 aspectRatio.fit 적용, 오른쪽 aspectRatio.fill 적용

struct ContentView: View {
    var body: some View {
        Image("giyoung2", bundle: nil)
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

struct ContentView: View {
    var body: some View {
        Image("giyoung2", bundle: nil)
            .resizable()
            .aspectRatio(contentMode: .fill)
    }
}

 

edgesIgnoringSafeArea 적용
기영이 이미지 safe area 무시하도록 설정해봅시다.

struct ContentView: View {
    var body: some View {
        Image("giyoung2", bundle: nil)
            .resizable()
            .aspectRatio(contentMode: .fill)
            .edgesIgnoringSafeArea(.all)
    }
}

 

resource:
https://www.raywenderlich.com/books/swiftui-by-tutorials
https://developer.apple.com/documentation/swiftui/image