UIKit에서 둥근 모서리 적용하기
Applying rounded corners to a UIKit
둥근 사각형은 수년동안 애플의 UI에서 많이 사용되고 있다. 따라서 UIKit 프레임워크를 사용해서 앱을 개발할 때, 우리가 만드는 뷰에 둥근 모서리를 적용하는 것은 쉽게 볼 수 있는 상황이다. 이렇게 둥근 모서리를 적용할 수 있는 기본 API를 살펴보자.
UIKit and Core Animation
비록 UIKit 자체로는 뷰의 모서리를 둥글게 만드는 API가 있지는 않지만, UIView를 지원하는 CALayer은 관련된 작업을 Core Animation을 통해 수행할 수 있도록 해준다.
예를 들어, 다음과 같은 버튼을 만든다고 생각해보자.
let button = UIButton(type: .custom)
button.setTitle("Next", for: .normal)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = .blue
button.contentEdgeInsets = UIEdgeInsets(
top: 4,
left: 6,
bottom: 4,
right: 6
)
layer의 cornerRadius 프로퍼티를 수정하면 버튼에 둥근 모서리를 적용할 수 있다.
button.layer.cornerRadius = 10
위에서 본 방법은 대부분의 경우 문제 없이 작동할 것이다. 그러나 때로는 특정 유형의 모양을 얻기 위해 추가로 커스텀 하고 싶을 수 있다.
예를 들어, 좀 더 큰 둥근 모서리를 원할때, 기본적인 세팅을 사용하는 것은 우리가 생각한 것과 달리 부드러운 모양이 나오지 않을 수 있다. 다음과 같이 폰트 크기와 cornerRadius를 증가시켜 보자.
button.titleLabel?.font = .systemFont(ofSize: 80)
button.layer.cornerRadius = 30
이에대한 결과를 보면 위에서 본것과 달리 좀 더 날카롭고 부자연스러운 모서리가 나타난다.
이와같은 문제는 버튼의 layer를 렌딩할 때, continuous한 모서리 곡선을 사용하면 된다.
button.layer.cornerCurve = .continuous
매우 유용한 또 다른 사용자 정의 옵션은 maskedCorners 프로퍼티로, 버튼의 네 모서리 중 둥글게 할 부분을 제어 할 수 있다. 예를 들어 화면의 오른쪽 하단에 버튼을 배치하려는 경우 다음과 같이 버튼의 왼쪽 상단 모서리만 둥글게 할 수 있다.
button.layer.maskedCorners = [.layerMinXMinYCorner]
위에서 본 프로퍼티들을 사용하여 주어진 뷰의 모서리를 둥글게 만드는 방법을 매우 세부적으로 제어 할 수 있고 Core Animation은 모든 UIKit (및 AppKit의 중요한 부분)의 다양한 상황에서 유용하게 사용할 수 있다.