[SwiftUI 공부] 모서리 라운드 처리 cornerRadius 사용해보기

안녕하세요 물먹고하자 입니다 :)

오늘은 View의 라운드처리에 대해서 알아보려고 합니다.

역시나 디자인 때문에 사용하는 빈도가 높은편이네요.

바로시작 하겠습니다!

UIKit 기반부터 존재했던 기능이며, 당연히 SwiftUI에도 기능을 제공합니다.

단, SwiftUI에서는 기본적인 cornerRadius만 제공하고, maskedCorners는 제공되지 않습니다.

그래도 maskedCorners 와 비슷하게 SwiftUI 에서 사용하는 방법까지도 공유드립니다.

View 라운딩 처리

기본적으로 cornerRadius, value 의 값 만큼 View의 모서리를 라운딩 처리해줍니다.

frame 상관없는 원형라운딩 처리

frame 크기에 상관없이 라운드 처리시에는 .clipShape(Circle())을 활용할 수 있습니다.

원하는 위치만 라운딩 처리

번외로 [iOS] UIView 모서리 라운드 처리 알아보기 (cornerRadius, maskedCorners) UIKit에서 사용했던 부분 라운드 처리방식을 Shape를 커스텀하게 만들어서 사용할 수 있습니다.

(간혹 위만, 아래만 라운드처리 해주세요.. 이런 화면이 있긴하죠)

오늘은 SwiftUI의 cornerRadius에 대해서 간단하게 정리해보았습니다.

역시나 디자인가이드 맞추느냐고 제일많이 활용되는 함수 이긴하네요.

UIKit에서는 원형 맞출때 frame width/2 이렇게 해서 맞췄었는데, .clipShape(Circle()) 를 통해 계산없이 활용되는 부분은 편했던것 같습니다.

+ 추가내용

글정리는 미리 해두었는데, WWDC23에서 UnevenRoundedRectangle 같은 기능이 추가되었네요

??? 추가된 API가 전부 iOS17일줄 알았는데, 이건 또 iOS16이상이네요.

바로는 사용할수 없겠지만, 알아는 놔야겠어요.

오늘은 이만~

즐거운 코딩 되세요 :)

끝.

물먹고하자의 블로그