Change the UIButton Image when tapped multiple times

Question

My requirement is to change the UIButton image for three different states. As of now when I tap the button for the first two times (first two states), it works. But when I tap for the third time or when it triggers my third state, the second image still seems to appear. How can and solve this issue? My code is below.

@IBAction func repeateButtonPressed(_ sender: Any) {
    let image = UIImage(named : "repeat_one")
    let image2 = UIImage(named : "repeat")

    if(playerRepeatMode == RepeatModes.NO_REPEAT){
        playerRepeatMode = RepeatModes.REPEAT_LIST
        self.repeatButton.setBackgroundImage(image2, for: .normal)
        self.repeatButton.backgroundColor = buttonToggleColor
    }
    else if(playerRepeatMode == RepeatModes.REPEAT_LIST){
        playerRepeatMode = RepeatModes.REPEAT
        self.repeatButton.setBackgroundImage(image, for: .normal)
    //    self.repeatButton.setBackgroundImage(#imageLiteral(resourceName: "repeat_one"), for: UIControlState.normal)
        self.repeatButton.backgroundColor = buttonToggleColor
    }else{
        playerRepeatMode = RepeatModes.NO_REPEAT
        self.repeatButton.setBackgroundImage(image2, for: .normal)
        self.repeatButton.backgroundColor = UIColor.clear
    }
}

Answer 1

---

Answer after question edit

A couple tips to make it easier to debug...

1. Add comments

2. Use variable names that make sense - eg imgRepeat instead of image2 for an image named "repeat"

The following code works fine for me - assuming the images have transparent areas to show the background color.

@IBAction func repeateButtonPressed(_ sender: Any) {

    let imgRepeatOne = UIImage(named : "repeat_one")
    let imgRepeat = UIImage(named : "repeat")


    if (playerRepeatMode == RepeatModes.NO_REPEAT) {

        // currently NO_REPEAT, changing to REPEAT_LIST
        playerRepeatMode = RepeatModes.REPEAT_LIST

        // set BackroundImage to "repeat"
        self.repeatButton.setBackgroundImage(imgRepeat, for: .normal)

        // set BackgroundColor to buttonToggleColor
        self.repeatButton.backgroundColor = buttonToggleColor

    } else if (playerRepeatMode == RepeatModes.REPEAT_LIST) {

        // currently REPEAT_LIST, changing to REPEAT
        playerRepeatMode = RepeatModes.REPEAT

        // set BackroundImage to "repeat_one"
        self.repeatButton.setBackgroundImage(imgRepeatOne, for: .normal)

        // set BackgroundColor to buttonToggleColor
        self.repeatButton.backgroundColor = buttonToggleColor

    } else {

        // currently REPEAT, changing to NO_REPEAT
        playerRepeatMode = RepeatModes.NO_REPEAT

        // set BackroundImage to "repeat"
        self.repeatButton.setBackgroundImage(imgRepeat, for: .normal)

        // set BackgroundColor to clear
        self.repeatButton.backgroundColor = UIColor.clear

    }

}

---

Original Answer

I think the issue is that you are using .setImage() in one place, but .setBackgroundImage() in the other two places.

That would be fine, assuming you want image2 to be used as background and image to be used as the button image, but you need to clear the other property.

So, where you use the background image:

    self.repeatButton.setBackgroundImage(image2, for: .normal)

    // also *clear* the button image
    self.repeatButton.setImage(nil, for: .normal)

and, where you use the button image:

    self.repeatButton.setImage(image, for: .normal)

    // also *clear* the background image
    self.repeatButton.setBackgroundImage(nil, for: .normal)