[SwiftUI] Image

Image

이미지를 표현하는 뷰

 

// 이미지 표현은 되지만 원본의 형태로 보입니다
// Image("SwiftUI")
//   .frame(width: 50, height: 50)


Image("SwiftUI")
  .resizable()
  .frame(width: 120, height: 120)

.resizable : 사용할 때에만 이미지 크기가 변경 가능
frame 수식어보다 먼저 사용이 되어야만 합니다.

 

var body: some View {
    VStack {
        Image("swiftUI")

        Image("swiftUI")
            .resizable()
            .frame(width: 80, height: 80)
        
        Image("swiftUI")
            .resizable()
            .scaledToFit()
            .frame(width: 150, height: 100)
        
        Image("swiftUI")
            .resizable()
            .scaledToFill()
            .frame(width: 150, height: 100)
            .clipped()
    }
}

clipped() : 프레임에 벗어나는 부분 잘라내기
scaledToFit() : 표현 가능한 최대 크기로 구현 (min(width, height) 값에 맞춰서 이미지 구현, 프레임에 벗어나지 않음)
scaledToFill() : 표현할 수 있는 최대 크기로 구현 (max(width, height) 값에 맞춰서 이미지 구현, 프레임에 벗어남)

 

ClipShape

VStack {
    // 이미지 크기보다 10씩 크기를 줄인 사각형
    Image("swiftUI")
        .clipShape(
            Rectangle().inset(by: 20)
        )
    
    // 원으로 표현
    Image("swiftUI")
        .clipShape(Circle().inset(by: 10))
    
    // 크기와 위치를 지정한 타원
    Image("swiftUI")
        .clipShape(
            Ellipse().path(in: CGRect(x: 20, y: 0, width: 150, height: 250))
        )
}

 

SF symbols

애플에서 제공되는 이미 내장되어 있는 심벌로 앱을 다운받으면 무엇이 있는지 확인 가능

VStack {
    // 색깔 및 크기 설정
    HStack {
        Image(systemName: "sun.haze.fill")
            .imageScale(.large)
            .foregroundColor(.red)
        
        Image(systemName: "sun.haze.fill")
            .imageScale(.medium)
            .foregroundColor(.red)
        
        Image(systemName: "sun.haze.fill")
            .imageScale(.small)
            .foregroundColor(.red)
    }
    .padding()
        
    // Font를 이용하여 크기 설정
    HStack {
        Image(systemName: "cloud.sleet")
            .font(.body)
            .foregroundColor(.blue)
        
        Image(systemName: "cloud.sleet")
            .font(.title)
            .foregroundColor(.blue)
        
        Image(systemName: "cloud.sleet")
            .font(.system(size: 40))
            .foregroundColor(.blue)
    }
    .padding()
    
    // 굵기 설정
    HStack {
        Image(systemName: "cloud.bolt")
            .font(Font.title.weight(.black))
            .foregroundColor(.yellow)
        
        Image(systemName: "cloud.bolt")
            .font(Font.title.weight(.bold))
            .foregroundColor(.yellow)
        
        Image(systemName: "cloud.bolt")
            .font(Font.title.weight(.light))
            .foregroundColor(.yellow)
    }
    .padding()
}
.background(Color.black)