[SwiftUI] Image (1)

 

SwiftUI에서 Image 사용법에 대해 알아보겠다.

 

UIKit에서 쓰이던 UIImageView를 대체할 수 있는 녀석이다.

 

일단 에셋에 image 하나를 넣어주겠다. ( image이름 - "swiftui" )

 

그리고 아래와 같이 body 안에 

코드를 입력하면 끝이다.

UIImageView에 UIImage를 넣어주고 하는 과정이 

한줄의 코드로 가능한것이다.

 

var body: some View {
        Image("swiftui")
    }

 

 

여기서 주의사항은

image는 기본적으로 image 본연의 사이즈를 

유지한다는 점이다.

이게 무슨말이냐 하면 

image 파일을 열어서 사이즈를 확인해보면 

해당 image의 사이즈를 알 수 있는데

그사이즈를 유지하고 있다는 말이다.

 

 

이말은 곧 frame이라는 수식어를 사용해서 

image의 frame을 변경한다고 했을때

var body: some View {
        Image("swiftui")
            .frame(width: 100, height: 100, alignment: .center)
    }

 

image 자체의 프레임의 변화는 없고

image를 가지고 있는 View의 frame이 

감소한다는 것이다.

 

.frame(width: 100, height: 100, alignment: .center)

 

그래서 image에 frame을 적용 시키기 위해서는

resizable() 이라는 수식어를 사용한다.

 

Image("swiftui")
                .resizable()
                .frame(width: 100, height: 100, alignment: .center)

 

 

.resizable()

 

잘보니 저번 시간에 강조했던

수식어 사용에 있어서 주의사항이 

이번에도 드러나고 있었다.

 

image 전용 수식어인 .resizable() 수식어는

frame 수식어보다 먼저 적용되어야 한다는 것이다.

frame 수식어는 View 프로토콜을 반환하는 수식어라 

frame을 지정한 이상 .resizable()은 사용할 수 없게 되버린다.

 

resizable

frame

 

 

이쯤 되면 UIKit에서 자주 사용하던

image 관련 설정 키워드들이 생각날것이다.

 

간단하게 비교 해보자면 아래 표와 같다.

UIKit	SwiftUI
Scale to Fill	기본값
Aspect Fit	.scaledToFit()
Aspect Fill	.scaledToFill()
clipsToBounds	.clipped()

 

Image("swiftui")
                .resizable()
                .scaledToFit()
                .frame(width: 50, height: 100, alignment: .center)

.scaledToFit()

 

Image("swiftui")
                .resizable()
                .scaledToFill()
                .frame(width: 50, height: 150, alignment: .center)

.scaledToFill()

Image("swiftui")
                .resizable()
                .scaledToFill()
                .frame(width: 50, height: 150, alignment: .center)
                .clipped()

 

 

image에 대한 속성을 좀더 다루고자 하였으나 

양이 생각보다 많아 

2편에 이어서 포스팅을 하겠다.