cornerRadius

안녕하세요.

 

제가 SwiftUI의 cornerRadius에 대해서 잘못 이해하고 있었더라구요..ㅠㅠ

 

잊지 않기 위해.. 글로 간단하게 정리해보려고 해요.

 

---

 

SwiftUI에는 테두리를 둥글게 만들 수 있는 cornerRadius(_:antialiased:) 이란 method가 있습니다.

 

 

전 그동안 "cornerRadius method를 사용하면 뷰의 테두리를 둥글게 만들어준다."라고 이해를 하고 있는데,

 

이게 반쪽짜리 설명이었더라구요.

 

 

공식 문서에서는 뭐라고 하는지 볼까요?

 

Clips this view to its bounding frame, with the specified corner radius.

 

Clips the view to its bounding frame, ... 

 

 

즉, 

 

"뷰의 테두리를 둥글게 만든다" -> ❎
"뷰를 현재 영역만큼 자르고, 테두리를 둥글게 만든다" -> ✅

 

인 것이었던 것이죠!!ㅠㅠ

 

역시 공식 문서를 꼼꼼하게 봐야 해......

 

 

 

예를 통해서 이해를 도와볼게요.

(이해하기 쉽게 테두리는 gray로 표시했어요.)

 

아래 같은 뷰가 있을 때,

 

Text("Rounded Corners")
    .frame(width: 175, height: 75)
    .foregroundColor(Color.white)
    .background(Color.blue)

 

Text 뷰에 cornerRadius를 준다면?

 

Text("Rounded Corners")
    .frame(width: 175, height: 75)
    .foregroundColor(Color.white)
    .background(Color.blue)
    .cornerRadius(25)    ✅

 

 

애초에 background를 설정하면, 현재 영역만큼만 뒤쪽에 뷰를 배치하기 때문에 테두리만 둥글게 잘리게 됩니다.

 

 

현재 뷰에 overlay로 RoundedRectangle을 배치해볼게요.

 

Text("Rounded Corners")
    .frame(width: 175, height: 75)
    .foregroundColor(Color.white)
    .background(Color.blue)
    .cornerRadius(25)
    .overlay(    ✅
        RoundedRectangle(cornerRadius: 20)
            .stroke(Color.yellow, lineWidth:20)
    )

 

그다음에, RoundedRectangle에 cornerRadius를 적용해보면

 

Text("Rounded Corners")
    .frame(width: 175, height: 75)
    .foregroundColor(Color.white)
    .background(Color.blue)
    .cornerRadius(25)
    .overlay(
        RoundedRectangle(cornerRadius: 20)
            .stroke(Color.yellow, lineWidth:20)
            .cornerRadius(20)    ✅
    )

 

현재 영역만큼 RoundedRectangle이 잘리고, 그 다음에 둥근 테두리가 적용된 것을 볼 수 있어요.

 

 

좀 이해가 되실까요??ㅎㅎㅎ

 

 

---

 

공식 문서를 꼼꼼히 살펴봅시다....

 

이번 글은 여기서 마무리.