Swift(스위프트): 원형 버튼 만들기 (스토리보드)

가로 세로 크기가 동일한 정사각형 버튼에서 cornerRadius 값을 버튼 너비(width)의 50%을 주면 원형 버튼이 됩니다.

 

@IBOutlet으로 연결된 버튼 또는 수동으로 만든 버튼을 원형으로 만들기

@IBOutlet weak var button: UIButton!

// viewDidLoad(_:) 등 함수 안에 작성
button.layer.cornerRadius = 0.5 * button.bounds.size.width
button.clipsToBounds = true

 

extension으로 만들어서 재사용하기

프로젝트에 다음 코드를 추가합니다.

import UIKit

extension UIButton {
    var circleButton: Bool {
        set {
            if newValue {
                self.layer.cornerRadius = 0.5 * self.bounds.size.width
            } else {
                self.layer.cornerRadius = 0
            }
        } get {
            return false
        }
    }
}

 

사용하고자 하는 버튼의 circleButton을 true로 지정하거나

button.circleButton = true

또는 스토리보드에서 버튼 클릭 후 Identity Inspector의 User Defined Runtime Atrribute에서 지정합니다.

 

주의: 버튼의 길이가 제약(constraint)로 지정된 경우는 bounds의 width가 0일 수 있으므로 제약 너비의 0.5배 값을 수동으로 지정합니다.

let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false

// ... //

button.bottomAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
button.widthAnchor.constraint(equalToConstant: 100).isActive = true
button.heightAnchor.constraint(equalToConstant: 100).isActive = true

// ... //

print(button.bounds) // (0.0, 0.0, 0.0, 0.0)
button.layer.cornerRadius = 50 // = 100 * 0.5
button.clipsToBounds = true