[SwiftUI] 원하는 코너에 Round Corner 적용하기

내가 사용했던 둥근 모서리 사각형 커스텀

요즘 대세인 둥근 모서리 사각형! 하지만 코드를 짜다보면 각 모서리마다 다른 Radius 을 걸어주고 싶을 때가 있다. 그럴때 내가 사용했던건 아래와 같다. 끝에 아주 쉬운 방법이 나오니 끝까지 읽어주세요 😌

 

extension View 를 한뒤 roundedCorners 라는 함수를 생성해 줬다. 그리고 corner 는 UIKit 에서 지원해주는 UIRectCorner 를 입력해줘서 아래와 같이 원하는 코너에 Round 를 걸어 주는 함수를 구현 할 수 있었다.

 

extension View {
    func roundedCorners(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape(RoundedCornersShape(radius: radius, corners: corners))
    }
}

 

public typealias UIRectCorner = Int
public struct UIRectCorner : OptionSet, @unchecked Sendable {
    public init(rawValue: UInt)
    public static var topLeft: UIRectCorner { get }
    public static var topRight: UIRectCorner { get }
    public static var bottomLeft: UIRectCorner { get }
    public static var bottomRight: UIRectCorner { get }
    public static var allCorners: UIRectCorner { get }
}

 

사용방법은 아래와 같다. 아래와 같이 사용하면 위 왼쪽, 위 오른쪽만 둥근 사각형을 만들 수 있었다.

 

Rectangle()
    .roundedCorners(20, [.topLeft, .topRight])

 

UnevenRoundedRectangle

하지만 이미 Swift 에서 구현이 되어있는 방법이 있었으니... UnevenRoundedRectangle 이라는 것이 있었다!!

나름 16.0 버전부터 나온 최신 방법이긴 하다. 역시 이런 문서들이 잘 정리되어있으니 너무 좋은 것 같다. 사용방법은 아래와 같다. 이렇게 사용하게 되면 위 왼쪽이 둥근 사각형이 만들어 진다.

 

UnevenRoundedRectangle(topLeadingRadius: 10)

 

그 외에도 아래와 같은 친구들을 사용할 수 있다는 점! 뭔지 모르겠다면 UnevneRoundedRectangle 을 치고 뒤에 어떤 변수들을 넣을 수 있나 살펴보면 더 쉬울 것 같다.

 

init(
    topLeadingRadius: CGFloat = 0,
    bottomLeadingRadius: CGFloat = 0,
    bottomTrailingRadius: CGFloat = 0,
    topTrailingRadius: CGFloat = 0,
    style: RoundedCornerStyle = .continuous
)

 

기존에 간단하게 구현하긴 했지만, 구현한 함수에서 RoundedCornerStyle 을 어떻게 적용하느냐에 대한 고민이 있었는데, Swift 에서 지원해주는 UnevenRoundedRectangle 을 사용하면 될 것 같아서 좋다 :)