[SwiftUI] Image

출처 : 스윗한 SwiftUI (이봉원 저, 비제이퍼블릭)

 

 

 

Image

---

- UIKit에서 UIImageView와 같이 지정된 이미지를 표현하는 뷰

 

• frame

- 사이즈 조절

HStack{ // 가로 방향으로 뷰를 배열하는 컨테이너 뷰
    Image("SwiftUI") // 원본 100 x 100 
    Image("SwiftUI").frame(width: 50, height: 50) // 50 x 50
    Image("SwiftUI").frame(width: 200, height: 200) // 200 x 200
}

 

• Resizable

- 이미지의 크기 변경(frame보다 먼저 적용시키기)

HStack{
    Image("SwiftUI")
    Image("SwiftUI").resizable()
        .frame(width: 50, height: 50)
    Image("SwiftUI").resizable()
        .frame(width: 200, height: 200)
}

Resizable

 

- 이미지의 특정 영역만을 지정해 늘려 주는 것도 가능(capInset)

- capInset은 stretch와 tile로 나뉨(default : stretch)

HStack{
	Image("SwiftUI")
        .resizable(capInsets: .init(top: 0, leading: 50, bottom: 0, trailing: 0))
        .frame(width: 150, height: 150)

    Image("SwiftUI")
        .resizable(resizingMode: .tile)
        .frame(width: 150, height: 150)
}

 

 

• Content Mode

- Default(UIKit에서 ScaleToFill) : 비율과 관계없이 이미지를 늘려서 주어진 공간을 가득 채움

 

- .scaledToFit() : 이미지 원본 비율 유지하면서 가능한 최대 크기까지 늘어남(최대 크기는 너비와 높이 중 작은 값 기준)

 

- .scaledToFill() : 이미지 원본 비율 유지하면서 가능한 최대 크기까지 늘어남(최대 크기는 너비와 높이 중 큰 값 기준)

 

HStack(spacing: 30){
            
    Image("SwiftUI").resizable().frame(width: 100, height: 150)

    Image("SwiftUI").resizable()
        .scaledToFit()
        .frame(width: 100, height: 150)

    Image("SwiftUI").resizable()
        .scaledToFill()
        .frame(width: 100, height: 150)
        .clipped() // 프레임에서 벗어나는 이미지 제거
        
}

 

 

 

• AspectRatio

- 이미지의 비율에 대해 조금 더 세부적인 조정이 필요할 때 사용

 

- CGFloat 또는 CGSize로 전달 받음

※ CGFloat = 너비/높이를 계산, CGSize = width, height 지정

HStack(spacing: 30){
        
    Image("SwiftUI").resizable()
        .aspectRatio(CGSize(width: 1.6, height: 1), contentMode: .fit)

    Image("SwiftUI").resizable()
        .aspectRatio(0.7, contentMode: .fill)
        .frame(width: 150, height: 150)
        .clipped()

}

 

 

 

 

• ClipShape

- 이미지를 원하는 모양으로 만들 때 사용

- 지정한 도형의 모습만 남기고 나머지 이미지는 잘라 내는 기능

 

 HStack(spacing: 20){
    Image("SwiftUI").clipShape(Circle())
    Image("SwiftUI").clipShape(
        Rectangle().inset(by: 10)
    )
    Image("SwiftUI").clipShape(
        Ellipse().path(in: CGRect(x: 10, y: 10, width: 80, height: 110))
    )
}

 

 

 

• RenderingMode

- template와 original 2가지의 렌더링 모드가 사용됨

1. template : 이미지의 불투명 영역이 가진 본래의 색을 무시하고 원하는 색상으로 변경해 템플릿 이미지로 활용 가능
2. original : 항상 이미지 본래의 색을 유지

 HStack{
            Image("SwiftUI")
            Image("SwiftUI").renderingMode(.original)
            Image("SwiftUI").renderingMode(.template)
}
.foregroundColor(.red)