관리 메뉴

김종권의 iOS 앱 개발 알아가기

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

iOS 기본 (SwiftUI)

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

jake-kim 2022. 8. 3. 23:54

목차) 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

Comments