3. Image | Notion

struct ImageSample: View {
    var body: some View {
        HStack{
            //Frame으로 이미지의 크기는 변하지 않음. 뷰가 차지하는 공간만 변화함.
            Image(systemName: "star.fill").frame(width: 100,height: 100)
            Image(systemName: "star.fill").frame(width:50, height:50)
            //크기를 변경해야 하는경우 resizable을 사용해야 함.
            Image(systemName: "star.fill").resizable().frame(width: 150, height: 150)
            
            Image(systemName: "star.fill").resizable(resizingMode: .tile).frame(width: 200, height: 200)
            
        }
    }
}

기존 uikit에서 사용하는 방식보다 간결하게 이미지를 구성이 가능하다.

이미지 확대시 적용되는 옵션은 기본 Scale to fill이다.

UIKit	SwiftUI	설명
Scale to fill	기본값	비율과 상관 없이 이미를 늘려서 공간을 가득 채움
Aspect Fit	.ScaledToFit()	이미지의 원본비율을 유지한 상태에서 가능한 최대 크기 까지 늘어남. w,h중 작은 값에 비율을 맞추기 때문에 이미지가 뷰를 벗어나지 않음.
Aspect Fill	.ScaledToFill()	w,h중 큰값으로 이미지 비율 설정 → 이미지가 뷰를 벗어날 수 있음.

ContentMode

		HStack{
                Image(systemName: "star.fill").resizable()
                    .frame(width: 100,height: 150)
                Image(systemName: "star.fill").resizable().scaledToFit()
                    .frame(width: 100,height: 150)
                Image(systemName: "star.fill").resizable().scaledToFill()
                    .frame(width: 100,height: 150)
            }

AspectRatio

콘텐츠 모드를 적용한뒤 좀더 세부적으로 비율을 조절하기 위해 사용된다고함.

ClipShape

이미지의 세이프를 조절함.

Image(systemName: "star.fill").resizable()
                    .frame(width: 100,height: 150).clipShape(Circle())

RenderingMode

tamplate - 이미지의 불투명 영역이 가진 본래의 색을 무시하고 원하는 색으로 변경

orignal - 항상 이미지 본래의 색을 유지함.

Hstak{
	Image("SwiftUI").renderingMode(.original)-> 원본색유지
	Image("SwiftUI").rederingMode(.template)-> 레드로 변경됨
}.foregroundColor(.red)