SwiftUI Image 그리기

• 이번에는 SwiftUI에서 Image를 어떻게 그리는지에 대해 알아보겠습니다.

Image 그리기

• 기본적으로, 이미지 파일을 화면에 띄우기 위해서는 다음과 같이 하면 됩니다.

Image("image-name")

• iOS 17부터는 이미지 리소스를 자동으로 static property로 생성합니다. (참고)
• 그래서 이미지 이름을 String으로 넘기지 않고 다음과 같이 부를 수 있습니다.

Image(.imageName)

• 이번에 새로 내장된 SF Symbols 아이콘을 사용하기 위해서는 다음과 같이 하면 됩니다.

Image(systemName: "circle")

• SwiftUI에서 UIImage를 통해 이미지를 불러오려면, 다음과 같이 하면 됩니다.

let image = UIImage(named: "image-name")
return Image(uiImage: image ?? UIImage())

• SwiftUI에서는 다음과 같이 사각형을 그릴 수도 있고, 원을 그릴 수도 있습니다.

Rectangle()
  .fill(Color.blue)
  .frame(width: 250, height: 250)
  
Circle()
  .fill(Color.blue)
  .frame(width: 250, height: 250)

Image 조정하기

• 앞서 사용했던 시스템 아이콘 SF Symbols를 사용하면, 이미지의 색상도 변경할 수 있습니다.

Image(systemName: "circle")
  .foregroundColor(.blue)

• SwiftUI에서 이미지의 크기를 조절하기 위해서는 resizable을 사용하면 됩니다.

Image("image-name")
  .resizable()
  .frame(width: 50, height: 50)

• 정해진 사이즈에 이미지를 채우는 방식은, 다음과 같이 지정할 수 있습니다.

Image("image-name")
  .resizable()
  .aspectRatio(contentMode: .fill)

• 다음과 같이 SwiftUI에서는 이미지에 그라데이션 효과를 줄 수도 있습니다.

Text("SwiftUI tutorial by Hohyeon")
  .background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .top, endPoint: .bottom))

• 배경으로 Image를 사용하기 위해서는 다음과 같이 하면 됩니다.

Text("SwiftUI tutorial by Hohyeon")
  .background(
    Image("image-name")
      .resizable()
      .frame(width: 100, height: 100)
  )

마무리

• 이렇게 해서 SwiftUI에서는 Image를 어떻게 그리는지 알아봤습니다.