[SwiftUI] Circle ImageView에 Border 넣기

개요

이전 포스팅인 Circle ImageView에 Border를 넣어보자.

2021.07.29 - [iOS] - [SwiftUI] Circle ImageView

[SwiftUI] Circle ImageView

 

Border 넣기

아래와 같이 동그란 모양의 ImageView를 먼저 생성해준다.

import SwiftUI

struct CircleImageView: View {
    var body: some View {
        Image("dog")
            .clipShape(Circle())
    }
}

struct CircleImageView_Previews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

그리고 Image에 아래와 같은 속성을 추가하여 Border를 추가해줄 수 있다.

.overlay(Circle().stroke())

미리보기 화면으로 보면 아래와 같이 적용된다.

 

Border 두께 및 색상 설정

Border의 두께와 색상을 설정해보자

struct CircleImageView: View {
    var body: some View {
        Image("dog")
            .clipShape(Circle())
            .overlay(Circle().stroke())
    }
}

위의 코드에서 storke()에 두께와 색상 정보를 아래와 같이 입력하면 된다.

.overlay(Circle().stroke(Color.green, lineWidth: 5))

Border의 색상은 초록색이고 두께는 5로 설정했다. 두께의 자료형은 CGFloat으로 소수점까지 설정이 가능하다.

적용된 화면은 아래와 같다.