[SwiftUI] ImageView에 Radius 적용(RoundedImageView)

개요

ImageView에 cornerRadius를 적용하여 모서리가 둥근 ImageView를 만들어 보자.

 

RoundedImage 구현

clipShape를 이용한 방법

아래 코드처럼 clipShape에 RoundedRectangle을 넣어 모서리가 둥근 ImageView를 만들 수 있다.

struct RoundedImage: View {
    var body: some View {
        Image("dog")
            .clipShape(RoundedRectangle(cornerRadius: 100))
    }
}

위 코드의 Preview는 아래 사진과 같이 나온다.

cornerRadius를 이용한 방법

cornerRadius를 직접 입력하여 모서리가 둥근 ImageView를 설정한다.

struct RoundedImage: View {
    var body: some View {
        Image("dog")
            .cornerRadius(100)
    }
}

위 코드의 Preview는 아래 사진과 같이 나온다.

 

모서리가 둥근 ImageView에 Border 적용

위 두 방법 중 한 방법을 사용하여 이미지의 모서리를 둥글게 만들었다면 거기에 맞게 Border를 적용하려면 아래와 같이 코드를 추가해준다.

.overlay(RoundedRectangle(cornerRadius: 100).stroke(Color.black, lineWidth: 10))

RoundedRectangle을 overlay로 설정하고, stroke의 Color와 lineWidth를 설정하여 border를 설정할 수 있다.

.border를 사용하여 설정하는 방법이 따로 있지만 radius를 설정할 수 없어 이런 경우에는 overlay를 통해 설정해야 한다.

border를 설정한 Preview 화면은 아래와 같다.

 

마치며

SwiftUI에서 모서리가 둥근 ImageView를 설정하는 방법을 알아보았다. 이 설정은 ImageView 뿐만 TextView, Button등 아니라 다른 View에도 동일하게 적용이 가능하다.