[SwiftUI] Tutorial 04. Custom Image View 만들기 - shadow, overlay, shape

이번에는 

커스텀 이미지뷰를 만들건데, 재사용 가능하도록 컴포넌트화 시켜서 만들어 보겠습니다!

 

[ SwiftUI View 생성]

새로운 swiftUI파일을 생성해줍니다.

우리는 Circle Image 를 커스텀 할 것이기 때문에

이름은 CircleImage.swift로 하겠습니다!

 

 

[ 이미지 추가 ]

Assets에 사용할 이미지를 추가해줄게요!

저는 turtlerock.jpg를 넣어줬습니다.

Image 인스턴스 사용해서 이미지 추가

[ Shape ]

Image()를 사용하고 그 밑에 Modifier를 사용해서 모양과 border를 추가해주겠습니다.

.clipShape() 를 사용해서 Circle()을 파라미터로 넣어주면 동그란 이미지가 나옵니다!

 

[ Overlay ]

원을 하나 더 만든 다음 오버레이로 추가합니다.

이미지의 테두리를 부여할 수 있습니다.

원을 하나 더 만든다음 추가한다는게 이해가 잘 안갔는데

Overlay는 번역하면 씌우다라는 뜻입니다

원을 하나 더 만들어서 이미지에 덮어 씌운다는 뜻입니다.

 

[ Shadow ]

shadow 모디파이어를 추가했습니다. 적용된 Preview는 아래와 같습니다.

 

 

 

여기까지 커스텀이미지를 생성하는 방법과

shape, overlay, shadow를 적용하는 방법도 알아보았습니다!

 

 

출처 

SwiftUI 튜토리얼