Creating a checkbox programmatically using images as the UIButtons background

Question

I have seen multiple questions on how to implement a checkbox by just changing the background image when clicked, but I don't understand why the checkbox only shows when I add it to my ViewController setupViews.

It simply will not show up or change when I have all the functionality in my actionButton function. Should i be using a protocol and delegate set up to get my button showing changing when clicked? Below is my code, I am hoping someone can shed some light as to what I am missing here?

class MainMenuViewController: UIViewController {

let clickingCheckbox = ClickingCheckbox()
var checkbox = UIImage(named: "Checked_Checkbox")
var empty_checkbox = UIImage(named:"Empty_Checkbox")   
var isBoxClicked: Bool!

 override func viewDidLoad() {
    super.viewDidLoad()
    setupViews()
}

func setupViews() {

    self.backgroundImage.addSubview(contentView)
    self.contentView.addSubview(clickingCheckbox)

    clickingCheckbox.snp.makeConstraints { (make) in
        make.top.equalTo(signInButton.snp.bottom).offset(-MainMenuViewController.padding)
        make.leading.equalTo(buttonView)
        make.width.equalTo(signInButton).multipliedBy(0.2)
        make.height.equalTo(clickingCheckbox.snp.width)
    }

    clickingCheckbox.addTarget(self, action: #selector(buttonAction(_:)), for: .touchUpInside)

    clickingCheckbox.setImage(empty_checkbox, for: UIControlState.normal) #The checkbox only shows on screen if I put it here, however it does nothing when clicked!

}

@objc  func buttonAction(_ sender: ClickingCheckbox) {

    if isBoxClicked == true {

    isBoxClicked = false

    }else{

     isBoxClicked = true
    }

     if isBoxClicked == true {

      sender.setImage(checkbox, for: UIControlState.selected)

    }else{

      sender.setImage(empty_checkbox, for: UIControlState.normal)
    }
    print("test")
}

In my Class I have.....

class ClickingCheckbox: UIButton {

  override func draw(_ rect: CGRect) {
      super.draw(rect)

  }
}

I have tried keeping the buttonAction functionality in the class, but that didn't work, I have tried a multiple different ways but can't get my head around how to show it working. All other advice is given to implement using IBOutlets so this would be really helpful for me to understand. Thanks

Possible duplicate of https://stackoverflow.com/questions/2255166/iphone-uibutton-with-uiswitch-functionality — Samah, Jan 22 '18 at 23:03
Is it? Only, the link you posted has a (programmatic) answer but in Obj C. I'm trying to get the same answer but in Swift. — rb2030, Jan 23 '18 at 16:53
you dont set image for state when button is tapped but change state. But if you want it your way change .selected to .normal because you have not changed the state of button — Alok Subedi, Jan 24 '18 at 04:53

score 0 · Answer 1 · answered Jan 23 '18 at 22:38

0

Try something like this:

class ClickingCheckbox: UIButton {
    convenience init() {
        self.init(frame: .zero)
        self.setImage(UIImage(named: "Empty_Checkbox"), for: .normal)
        self.setImage(UIImage(named: "Checked_Checkbox"), for: .selected)
        self.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
    }

    @objc private func buttonTapped() {
        self.isSelected = !self.isSelected
    }
}

answered Jan 23 '18 at 22:38

Samah

1,224
2
13
15

Thanks for your response. However I am still getting the same issue. The checkbox shows up on the screen, but it does not register as being clicked. Even when I put a print statement in the buttonTapped function. – rb2030 Jan 24 '18 at 10:04
You must be blocking the tap event somehow then. I tried with a bare minimum view controller and it works fine for me. What view are you adding the checkbox to? – Samah Jan 24 '18 at 11:20
Hi thanks again for your response. I am adding it to the contentView, which is added to the background Image. Please see below. self.backgroundImage.addSubview(contentView) self.contentView.addSubview(clickingCheckbox) – rb2030 Jan 25 '18 at 12:44
1

There's your problem, the background image will be blocking interaction. `self.backgroundImage.isUserInteractionEnabled = true` should fix it. – Samah Jan 25 '18 at 14:21
You are a hero. Thanks chum. – rb2030 Jan 25 '18 at 21:10

Creating a checkbox programmatically using images as the UIButtons background

1 Answers1