[iOS] View의 모서리 둥글게 만들기 (feat. cornerRadius)

Logan·2020년 11월 25일
1
post-custom-banner

모서리가 둥근 View

둥글게 만들고 싶은 뷰를 해당 뷰가 속한 뷰컨트롤러의 @IBOutlet으로 연결하고, viewDidLoad() 내부에서 해당 인스턴스의 속성을 변경해주면 됩니다.

모서리를 둥글게 만드는 속성은 var cornerRadius: CGFloat { get set } 입니다.

class ViewController: UIViewController {

    @IBOutlet weak var myView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        myView.layer.cornerRadius = 30
    }

}

Radius 효과를 개별적으로 주고 싶다면?


만약 cornerRadius 효과를 개별적으로 주고 싶다면, var maskedCorners: CACornerMask { get set } 속성을 활용하면 됩니다.
CACornerMask 타입으로 선언되어 있고, 원하는 모양에 따라 각 꼭지점의 위치를 나타내는 아래 프로퍼티를 배열안에 넣어서 사용하면 됩니다.

static var layerMaxXMaxYCorner: CACornerMask
static var layerMaxXMinYCorner: CACornerMask
static var layerMinXMaxYCorner: CACornerMask
static var layerMinXMinYCorner: CACornerMask

각각의 프로퍼티는 Corner의 위치를 나타냅니다.

class ViewController: UIViewController {

    @IBOutlet weak var myView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        myView.layer.cornerRadius = 30
        myView.layer.maskedCorners = [.layerMaxXMaxYCorner]
        // MaxX, MaxY에만 Radius가 적용
    }
    
}

View를 원형으로 만들기

cornerRadius는 CGFloat 타입이기 때문에 뷰를 원형으로 바꾸고 싶다면, 뷰의 높이(또는 넓이) / 2 를 해주면 원형과 같은 효과를 줄 수 있습니다.
뷰의 높이 또는 넓이는 frame속성을 통해 접근할 수 있습니다.

myView.frame.width
myView.frame.height

원의 형태로 만들고 싶은 경우 viewDidLoad()보단, viewDidLayoutSubviews()(뷰컨트롤러의 서브뷰들이 배치를 완료한 상태) method에서 구현해주는 게 더 안전합니다.

class ViewController: UIViewController {

    @IBOutlet weak var myView: UIView!
    
    override func viewDidLayoutSubviews() {
        myView.layer.cornerRadius = myView.frame.width / 2
    }

}
profile
iOS개발자 꿈나무
post-custom-banner

0개의 댓글