[iOS, Swift] 체크박스 구현하기

iOS 16.1, Xcode 14.2, Swift 5, UIKit 환경에서 진행했습니다.

 

iOS에서는 체크박스와 라디오버튼이 기본적으로 제공되어지지 않습니다.

그러나 체크박스는 기본적인 버튼 속성을 사용하여 구현할 수 있습니다.

 

버튼을 생성할 때에, setImage 설정할 때에 state 값이 normal인 것과 selected인 값을 따로 설정해줍니다.

lazy var checkButton: UIButton = {
    var button: UIButton = UIButton(type: .custom)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setImage(UIImage(systemName: "rectangle"), for: .normal)
    button.setImage(UIImage(systemName: "checkmark.rectangle"), for: .selected)

    return button
}()

이미지는 애플 플랫폼에 제공되는 SF Symbols 을 활용했습니다.

 

SF Symbols에 대한 참조

https://bksesame.tistory.com/201

 

그러면 버튼이 selected인 상태와 normal인 상태의 이미지가 다르게 표출됩니다.

버튼을 클릭할 때에 selected와 normal인 상태를 바꿔주도록 설정하면 체크박스 구현은 완료됩니다.

override func viewDidLoad() {
    ...

    checkButton.addTarget(self, action: #selector(didTapButton(_:)), for: .touchUpInside)
}

@objc func didTapButton(_ sender: UIButton) {
    sender.isSelected.toggle()
}

 

전체코드

lazy var checkButton: UIButton = {
    var button: UIButton = UIButton(type: .custom)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setImage(UIImage(systemName: "rectangle"), for: .normal)
    button.setImage(UIImage(systemName: "checkmark.rectangle"), for: .selected)

    return button
}()

override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(checkButton)
    NSLayoutConstraint.activate([
        checkButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        checkButton.centerYAnchor.constraint(equalTo: view.centerYAnchor)
    ])

    checkButton.addTarget(self, action: #selector(didTapButton(_:)), for: .touchUpInside)
}

@objc func didTapButton(_ sender: UIButton) {
    sender.isSelected.toggle()
}

 

 

결과

 

 

 

참조

https://stackoverflow.com/questions/29117759/how-to-create-radio-buttons-and-checkbox-in-swift-ios