관리 메뉴

김종권의 iOS 앱 개발 알아가기

[iOS - swift] ToggleButton 만드는 방법 (#UIKit, #CheckBox) 본문

iOS 응용 (SwiftUI)

[iOS - swift] ToggleButton 만드는 방법 (#UIKit, #CheckBox)

jake-kim 2024. 12. 24. 01:57

토글 버튼 만드는 아이디어

  • 토글 버튼을 만드는 방법은 여러가지가 있지만, "토글에 관한 기능"을 생각해보면 여러곳에서 사용될 수 있는 여지가 있으므로 공통화가 필요
  • UIButton에는 selected 상태가 있는데 이 상태는 직접 특정 타이밍에 isSelected 값을 변경해주어서 사용이 가능
  • touchUpInside 시점에 selected 값을 변경해주어서 구현

토글 버튼 만들기

  • UIButton을 상속하여 ToggleButton 추가
class ToggleButton: UIButton {

}
  • touchUpInside 시점에 isSelected 상태를 변경해주는게 필요하므로 addTarget(_:action:for:)를 사용하여 touchUpInside이벤트 처리
class ToggleButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
        bind()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        bind()
    }

    private func bind() {
        addTarget(self, action: #selector(changeSelectedState), for: .touchUpInside)
    }

    @objc private func changeSelectedState() {
        isSelected = !isSelected
    }
}
  • isSelected가 변경될때마다 이것을 사용하는 쪽에 이벤트를 주기 위해 closure 추가하면 완료
class ToggleButton: UIButton {
    var onToggle: ((Bool) -> Void)? // <-

    override init(frame: CGRect) {
        super.init(frame: frame)
        bind()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        bind()
    }

    private func bind() {
        addTarget(self, action: #selector(changeSelectedState), for: .touchUpInside)
    }

    @objc private func changeSelectedState() {
        isSelected = !isSelected
        onToggle?(isSelected) // <-
    }
}

 

ex) ViewController에서 위 버튼 사용

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let toggleButton = ToggleButton(frame: CGRect(x: 100, y: 100, width: 100, height: 50))
        toggleButton.setTitle("OFF", for: .normal)
        toggleButton.setTitle("ON", for: .selected)
        toggleButton.backgroundColor = .systemBlue

        toggleButton.onToggle = { isSelected in
            print("ToggleButton 상태: \(isSelected ? "ON" : "OFF")")
        }

        view.addSubview(toggleButton)
    }
}

 

완성)

 

Comments