[iOS - swiftUI] Image, 원 이미지 사용 방법

목차) SwiftUI의 기본 - 목차 링크

Image

• 단순히 Image("imageName")으로 사용

struct ContentView: View {
  var body: some View {
    Image("book")
  }
}

• 공간에 맞게 이미지 크기를 조정하는 모드 설정
  • resizable()를 선언
  • 화면에 맞추어서 채워지는 효과

struct ContentView: View {
  var body: some View {
    Image("book")
      .resizable() // <-
  }
}

• contentMode 설정 (fit, fill)
  • aspectRatio(contentMode:)

contentMode: .fit	contentMode: .fill

struct ContentView: View {
  var body: some View {
    Image("book")
      .resizable()
      .aspectRatio(contentMode: .fit)
//      .aspectRatio(contentMode: .fill)
  }
}

• 위 방법 말고도, .scaledToFit(), .scaledToFill() 사용 가능
• .scaledToFit()
  • .aspectRatio(contentMode: .fit)

struct ContentView: View {
  var body: some View {
    Image("book")
      .resizable()
      .scaledToFit()
  }
}

• .scaledToFill()
  • .aspectRatio(contentMode: .fill)
    

struct ContentView: View {
  var body: some View {
    Image("book")
      .resizable()
      .scaledToFill()
  }
}

ClipShape

• 원 이미지 만들기
  • .clipShape(Circle())로 이용

Image("book")
  .resizable()
  .scaledToFit()
  .clipShape(Circle())

• Circle에 inset 사용방법
  • Circle().inset(by:) 사용 (아래 원)

Image("book")
  .resizable()
  .scaledToFit()
  .clipShape(Circle().inset(by: 20))

* 전체 코드: https://github.com/JK0369/ExImage-SwiftUI

 

* 참고

https://developer.apple.com/documentation/swiftui/image/resizable(capinsets:resizingmode:)

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