[iOS] UIView 모서리 라운드 처리 알아보기 (cornerRadius, maskedCorners)

  [iOS] UIView 모서리 라운드 처리 (Radios 알아보기)

오늘은 UIView의 모서리를 둥글게 만드는 법,  4모서리 혹은 원하는 방향만 둥글게 처리하는 방법에 대해서 알아보겠습니다.

Playground에서 샘플 작업하였습니다. (하단 샘플소스 참고)

  위의 그림같이 4모서리를 전부 라운드 처리 할 경우

layer.cornerRadius 만 사용하여도 표시가 가능합니다.

// 1. 모서리 4방향 Radius 기본 적용
let radiusDefault = UIView()
radiusDefault.frame = CGRect(x: 100, y: 100, width: 70, height: 70)
radiusDefault.backgroundColor = .black
view.addSubview(radiusDefault)
            
radiusDefault.layer.cornerRadius = 10

  원하는 모서리만 라운드 처리는 ?

layer.maskedCorners 를 활용하여 모서리별 값 을 통해 사용할 수 있습니다.

radios5.layer.maskedCorners = [
.layerMinXMinYCorner,
.layerMinXMaxYCorner,
.layerMaxXMaxYCorner,
.layerMaxXMinYCorner]

  샘플소스

//: A UIKit based Playground for presenting user interface
  
import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        
        // 1. 모서리 4방향 Radius 기본 적용
        let radiusDefault = UIView()
        radiusDefault.frame = CGRect(x: 10, y: 10, width: 70, height: 70)
        radiusDefault.backgroundColor = .black
        view.addSubview(radiusDefault)
            
        
        radiusDefault.layer.cornerRadius = 10
        
        // --------------------------
        
        // 2. 한쪽 모서리들 적용하기
        // 2-1. 왼쪽 위
        let leftTop = UIView()
        leftTop.frame = CGRect(x: 10, y: 90, width: 70, height: 70)
        leftTop.backgroundColor = .red
        view.addSubview(leftTop)

        leftTop.layer.cornerRadius = 10
        leftTop.layer.maskedCorners = [.layerMinXMinYCorner]

        // 2-2. 오른쪽 위
        let rightTop = UIView()
        rightTop.frame = CGRect(x: 90, y: 90, width: 70, height: 70)
        rightTop.backgroundColor = .red
        view.addSubview(rightTop)

        rightTop.layer.cornerRadius = 10
        rightTop.layer.maskedCorners = [.layerMaxXMinYCorner]
 
        // 2-3. 왼쪽 아래
        let leftBottom = UIView()
        leftBottom.frame = CGRect(x: 170, y: 90, width: 70, height: 70)
        leftBottom.backgroundColor = .red
        view.addSubview(leftBottom)
        
        leftBottom.layer.cornerRadius = 10
        leftBottom.layer.maskedCorners = [.layerMinXMaxYCorner]
        
        // 2-4. 오른쪽 아래
        let rightBottom = UIView()
        rightBottom.frame = CGRect(x: 250, y: 90, width: 70, height: 70)
        rightBottom.backgroundColor = .red
        view.addSubview(rightBottom)
        
        rightBottom.layer.cornerRadius = 10
        rightBottom.layer.maskedCorners = [.layerMaxXMaxYCorner]
        
        // ------------------------- //
        // 여러개 사용하는 방법
        
        let radios1 = UIView()
        radios1.frame = CGRect(x: 10, y: 170, width: 70, height: 70)
        radios1.backgroundColor = .purple
        view.addSubview(radios1)
        
        radios1.layer.cornerRadius = 10
        radios1.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
        
        let radios2 = UIView()
        radios2.frame = CGRect(x: 90, y: 170, width: 70, height: 70)
        radios2.backgroundColor = .purple
        view.addSubview(radios2)
        
        radios2.layer.cornerRadius = 10
        radios2.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]
        
        let radios3 = UIView()
        radios3.frame = CGRect(x: 170, y: 170, width: 70, height: 70)
        radios3.backgroundColor = .purple
        view.addSubview(radios3)
        
        radios3.layer.cornerRadius = 10
        radios3.layer.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner]
        
        let radios4 = UIView()
        radios4.frame = CGRect(x: 250, y: 170, width: 70, height: 70)
        radios4.backgroundColor = .purple
        view.addSubview(radios4)
        
        radios4.layer.cornerRadius = 10
        radios4.layer.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner, .layerMaxXMinYCorner]
        
        let radios5 = UIView()
        radios5.frame = CGRect(x: 30, y: 300, width: 300, height: 300)
        radios5.backgroundColor = .blue
        view.addSubview(radios5)
        
        radios5.layer.cornerRadius = 10
        radios5.layer.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner, .layerMaxXMinYCorner]
        
        self.view = view
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

  마무리

보통은 4모서리를 전부다 라운드 처리를 하다 보니 maskedCorners 를 몰랐지만, 이번에 원하는 위치만 사용하는 방법을 알아봐서 활용성이 넓어진 것 같습니다.
필자의 경우 UIView 두개를 위아래로 붙여 1개의 UIView 처럼 표기해야하는데, 위에 UIView와 아래 UIView에 각각 라운드 처리를 나누어 표기하니 하나처럼 보여지는 것으로 활용하였습니다.

즐거운 코딩 되세요~