Continuous corners in SwiftUI

no minho·2023년 11월 24일

스위프트UI에서 각진 모서리를 둥글게 만드는 법은 매우 간단하다.

struct RootView: View {

    var body: some View {
        Text("Lorem ipsum.")
            .padding()
            .background(Color.orange)
            .cornerRadius(8) 
            .border(Color.black, width: 2, cornerRadius: 8)
    }

}

하지만 당신이 나같은 스타일의 사람이라면 UIkit에서 소개된 "continuous" 코너 스타일을 원할 수 도 있다. 애플이 지금까지도 여전히 사용중인 "squircle"이나 "superellipse"같은 스타일말이다.
운좋게도 이것도 매우 쉽다.

cornerRadius() modifier는 RoundedRectangle을 포함한 clipShape()의 특별한 한 종류일뿐이다. 비슷하게도 border() modifier도 stroke()를 사용한 overlay()로 새롭게 만들 수 있다.
이 코드를 한번 작성해보면 RoundedRectangle의 스타일을 .continuous로 바꿀 수 있다.

struct RootView: View {

    var body: some View {
        Text("Lorem ipsum.")
            .padding()
            .background(Color.orange)
            .clipShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
            .overlay(RoundedRectangle(cornerRadius: 8, style: .continuous)
                .stroke(Color.black, lineWidth: 2)
            )
    }

}

출처: https://cargath.github.io/blog/2019/06/23/SwiftUI-Rounded-Corners

0개의 댓글