[iOS] CornerRadius를 활용하여 동그랗게 만들기

Label, Button, View 등과 같이 UIKit의 Object 모서리를 둥그렇게 만들어보자

 

오브젝트의 layer의 cornerRadius에 값을 주면 object의 틀을 얼마나 깍을지 정하고

오브젝트에 clipsToBounds 값을 True로 변경해주면 object의 틀을 벗어나는 부분을 잘라주어 모서리가 둥그렇게 변하는 것이다

import UIKit
import SwiftUI

class ViewController: UIViewController {

    lazy var label: UILabel = {
        let label = UILabel()
        label.backgroundColor = .tintColor
        label.text = "Test"
        label.textAlignment = .center
        label.textColor = .white
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(label)
        
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
            label.widthAnchor.constraint(equalToConstant: 200),
            label.heightAnchor.constraint(equalToConstant: 200)
        ])
            
        label.clipsToBounds = true
        label.layer.cornerRadius = 20
    }

}



// MARK: - SwiftUI를 활용한 미리보기
struct HomeViewController_Previews: PreviewProvider {
    static var previews: some View {
        Container().edgesIgnoringSafeArea(.all)
    }
    
    struct Container: UIViewControllerRepresentable {
        
        typealias UIViewControllerType = UIViewController
        
        func makeUIViewController(context: Context) -> UIViewController {
            let ViewController = ViewController()
            return UINavigationController(rootViewController: ViewController)
        }
        
        func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
    }
}

 

왼쪽이 clipsToBounds가 true일때이고 오른쪽이 clipsToBounds가 false일때이다

검정색 테두리가 layer이다

 

 

object 틀이 검정 테두리라고 가정하면 layer의 cornerRadius에 값을 주면 틀의 코너를 깍는것이다

틀을 넘어가는부분을 잘라낼지 말지를 clipsToBounds가 결정하는데 true로 설정하면 틀의 모양밖으로 나가면 잘라내는것이고

false이면 잘라내지 않는것이다. 

 

cornerRadius의 Summary를 보면 CGFloat 타입이며 디폴트 값은 0인것을 확인할 수 있다.

 

 

 

따라서 오브젝트를 원형으로 만들려면 오브젝트의 hegiht/2 만큼의 값을 주면 원형형태로 오브젝트를 만들 수 있다.

 

항상 높이값을 지정해주는 것이 아니기때문에 원형으로 만들고 싶다면 오브젝트의 bounds의 높이값을 2로 나누면 된다.

object.layer.cornerRadius = object.bounds.height / 2

 

하지만 실제로 ViewDidLoad에 코드를 작성하면 원형으로 깍이지 않는것을 확인 할 수 있다.

 

 

그 이유는 iOS의 View의 Drawing Cycle과 연관이 있는데 우리는 오브젝트의 높이를 2로 나눈 값을 주려는 것인데

실제 오브젝트의 높이가 결정되는 시점은 ViewDidLoad가 아니기 때문이다.

 

iOS의 뷰컨트롤러의 LifeCycle과 뷰의 Drawing Cycle은 다음과 같은데

 

 

 

ViewDidLoad에서 서브뷰들의 배치를 하지 않기 때문에 실제 오브젝트의 높이가 0으로 잡혀 cornerRadius의 값이 0이 되는 것이다.

 

 

 

viewDidLoad에서 레이아웃이 잡히지 않아 hegiht로 나누어도 0 / 2 이기 때문에 CornerRadius가 0인것을 확인 할 수 있다

 

그러므로 오브젝트의 높이가 결정되고 난 뒤에 불리는 함수 viewDidLayoutSubViews()에서 cornerRadius 값을 주면 된다.

 

 

 

import UIKit
import SwiftUI

class ViewController: UIViewController {

    lazy var label: UILabel = {
        let label = UILabel()
        label.backgroundColor = .tintColor
        label.text = "Test"
        label.textAlignment = .center
        label.textColor = .white
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(label)
        
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
            label.widthAnchor.constraint(equalToConstant: 200),
            label.heightAnchor.constraint(equalToConstant: 200)
        ])
            
        label.clipsToBounds = true
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        label.layer.cornerRadius = label.bounds.height / 2
    }

}



// MARK: - SwiftUI를 활용한 미리보기
struct HomeViewController_Previews: PreviewProvider {
    static var previews: some View {
        Container().edgesIgnoringSafeArea(.all)
    }
    
    struct Container: UIViewControllerRepresentable {
        
        typealias UIViewControllerType = UIViewController
        
        func makeUIViewController(context: Context) -> UIViewController {
            let ViewController = ViewController()
            return UINavigationController(rootViewController: ViewController)
        }
        
        func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
    }
}

 

다음에는 뷰의 드로잉사이클에대해 더 자세히 알아보자