[iOS - SwiftUI] 튜토리얼 - 3. 이미지 커스텀 방법 (Image, clipShape, stroke, overlay, shadow)

구현된 동그란 썸네일 이미지 + 흰색 테두리 + 그림자 효과

이미지 사용 방법

• asset 파일에 사진 파일 준비

• ContentView에 Image()를 사용하여 이미지 표출

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

• SwiftUI에서는 clipShape()를 통해 이미지를 Circle형태로 만들기가 매우 쉬움

struct ContentView: View {
  var body: some View {
    Image("dog")
      .clipShape(Circle()) // <-
  }
}

• overay {  }를 통해 테두리에 선 긋기

struct ContentView: View {
  var body: some View {
    Image("dog")
      .clipShape(Circle())
      .overlay { // <-
        Circle().stroke(.gray, lineWidth: 4)
      }
  }
}

• shadow()를 통해 그림자 효과도 손쉽게 적용 가능

struct ContentView: View {
  var body: some View {
    Image("dog")
      .clipShape(Circle())
      .overlay {
        Circle().stroke(.white, lineWidth: 4)
      }
      .shadow(radius: 6) // <-
  }
}

* 참고

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views