<div id="readability-page-1" class="page"><div><a href="https://imjhk03.github.io/posts/round-corners-specific-view/">ENG</a>UIView에서 모서리를 둥글게 하려면 레이어의 <code>cornerRadius</code> 값을 설정하면 된다. 다음과 같이 사용하면 된다:<div><code><table><tbody><tr><td><pre>1
</pre></td><td><pre>cornerView.layer.cornerRadius = 8
</pre></td></tr></tbody></table></code></div><blockquote>서브뷰가 둥근 모서리로 잘리도록 하려면 다음을 한다: ‘view.clipsToBounds = true’</blockquote>하지만 상단 또는 하단으로만 모서리를 처리해야 한다면 어떻게 해야 할까? <code>CALayer</code>의 <code>maskedCorners</code> 속성을 설정해야 한다. 이렇게 둥근 모서리를 만들기 위한 extension을 만들 수 있습니다:<div><code><table><tbody><tr><td><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
</pre></td><td><pre>extension UIView {
 // Available from iOS 11.0
 func cornerRadius(_ corners: UIRectCorner..., radius: CGFloat) {
 layer.cornerRadius = radius
 
 var maskedCorners: CACornerMask = []
 let cornerSet = corners.isEmpty ? [.allCorners] : corners
 
 if cornerSet.contains(.allCorners) {
 maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner]
 } else {
 if cornerSet.contains(.topLeft) {
 maskedCorners.insert(.layerMinXMinYCorner)
 }
 if cornerSet.contains(.topRight) {
 maskedCorners.insert(.layerMaxXMinYCorner)
 }
 if cornerSet.contains(.bottomLeft) {
 maskedCorners.insert(.layerMinXMaxYCorner)
 }
 if cornerSet.contains(.bottomRight) {
 maskedCorners.insert(.layerMaxXMaxYCorner)
 }
 }
 
 layer.maskedCorners = maskedCorners
 }
}
</pre></td></tr></tbody></table></code></div>이 extension은 다음과 같은 기능을 제공한다:<ul><li>가변 매개변수를 사용하여 여러 모서리를 한 번에 설정할 수 있다</li><li><code>UIRectCorner</code>와 <code>CACornerMask</code> 간의 매핑을 통해 쉽게 원하는 모서리를 설정할 수 있다</li><li><code>reduce</code> 함수를 사용하여 선택된 모든 모서리를 하나의 마스크로 결합한다</li></ul>아래 표는 <code>CACornerMask</code>와 모서리의 관계를 보여준다:<div><table><thead><tr><th>CACornerMask</th><th>모서리</th></tr></thead><tbody><tr><td>layerMinXMinYCorner</td><td>상단 왼쪽 모서리</td></tr><tr><td>layerMaxXMinYCorner</td><td>상단 오른쪽 모서리</td></tr><tr><td>layerMinXMaxYCorner</td><td>하단 왼쪽 모서리</td></tr><tr><td>layerMaxXMaxYCorner</td><td>하단 오른쪽 모서리</td></tr></tbody></table></div>사용 예시:<div><code><table><tbody><tr><td><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td><pre>// 모든 모서리를 둥글게
circleView.cornerRadius(.allCorners, radius: 50)

// 상단 모서리만 둥글게
circleView.cornerRadius(.topLeft, .topRight, radius: 50)

// 왼쪽 모서리만 둥글게
circleView.cornerRadius(.topLeft, .bottomLeft, radius: 25)

// 대각선 모서리만 둥글게
circleView.cornerRadius(.topLeft, .bottomRight, radius: 25)
</pre></td></tr></tbody></table></code></div> 참고 <a href="https://developer.apple.com/documentation/quartzcore/calayer/cornerradius" target="_blank">cornerRadius</a><a href="https://developer.apple.com/documentation/quartzcore/calayer/maskedcorners" target="_blank">maskedCorners</a></div></div>

UIView의 일부 모서리만 둥근 모서리를 설정하는 방법

댓글