[TIL] Custom UIButton의 CornerRadius를 반원모양으로 만들기

CustomButton을 만들던 도중 버튼 곡률이 반원이 되도록 구현하려고 했는데 잘 안됐다.

잘못된 코드

import UIKit

class CustomButton: UIButton {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    init(title: String) {
        super.init(frame: .zero)
        
        setTitle(title, for: .normal)
        setTitleColor(.white, for: .normal)
        backgroundColor = .customDarkerBrown
        layer.cornerRadius = frame.height / 2 
        translatesAutoresizingMaskIntoConstraints = false
    }
    
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

왜 안됐냐면 frame.height / 2를 사용하는 이유는 버튼의 크기가 설정된 후에 cornerRadius를 적용하기 위해서인데, 문제는 frame이 초기화 시점에서는 아직 값이 설정되지 않았기 때문이다. 그래서 지금의 코드는 frame.height 값이 0으로 적용되고 cornerRadius도 0이 되어서 고률이 적용되지 않는 것이다.

해결방법

import UIKit

class CustomButton: UIButton {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    init(title: String) {
        super.init(frame: .zero)
        
        setTitle(title, for: .normal)
        setTitleColor(.white, for: .normal)
        backgroundColor = .customDarkerBrown
        translatesAutoresizingMaskIntoConstraints = false
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = frame.height / 2
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

layoutSubviews에서 cornerRadius를 설정하면된다. layoutSubviews는 뷰가 레이아웃을 업데이트한 후 호출되므로, frame이 정확히 설정된 시점에서 cornerRadius를 적용할 수 있다.