How to change radio button selected image and corresponding text in Swift iOS

Question

I am working on swift. I have screen with multiple buttons with text. Each button has some corresponding label text. Among multiple buttons, One should be selected at a time. If button one selected, Button one image to be changed with radio button and button 1 text should be with black color and remaining should be with unselected with some light gray color.

I have achieved this with below execution, But, I am checking if there is any better approach.

@IBAction func selectName(_ sender: UIButton) {
     let myButtonImage = sender.currentImage
    let unSelectedImage = UIImage(named: "un_Checked")

    if sender.tag == 1 && myButtonImage!.pngData() == unSelectedImage!.pngData() { //setting for 1st button
        sender.setImage(UIImage(named: "checked"), for: UIControl.State.normal )
        radioButton4.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
        radioButton3.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
        radioButton4.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
        radioButtonLabel1.textColor = UIColor.darkGray //setting for 1st label
        radioButtonLabel2.textColor = UIColor.lightGray
        radioButtonLabel3.textColor = UIColor.lightGray
        radioButtonLabel4.textColor = UIColor.lightGray
    } else if sender.tag == 2 && myButtonImage!.pngData() == unSelectedImage!.pngData()  {
            sender.setImage(UIImage(named: "checked"), for: UIControl.State.normal ) //setting for 2nd button
            radioButton2.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
            radioButton3.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
            radioButton4.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
            radioButtonLabel2.textColor = UIColor.darkGray //setting for 2nd label
            radioButtonLabel3.textColor = UIColor.lightGray
            radioButtonLabel4.textColor = UIColor.lightGray
            radioButtonLabel1.textColor = UIColor.lightGray
    } else if sender.tag == 3 && myButtonImage!.pngData() == unSelectedImage!.pngData() {
        sender.setImage(UIImage(named: "checked"), for: UIControl.State.normal ) // setting for 3rd button
        radioButton3.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
        radioButton1.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
        radioButton2.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
        radioButton4.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
        radioButtonLabel3.textColor = UIColor.darkGray //setting for 3rd label
        radioButtonLabel1.textColor = UIColor.lightGray
        radioButtonLabel2.textColor = UIColor.lightGray
        radioButtonLabel4.textColor = UIColor.lightGray
    } else if sender.tag == 2 && myButtonImage!.pngData() == unSelectedImage!.pngData()  {
            radioButton4.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal) //setting for 4th button
            radioButton1.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
            radioButton2.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
            radioButton3.setImage(UIImage(named: "un_Checked"), for: UIControl.State.normal)
            radioButtonLabel4.textColor = UIColor.darkGray //setting for 4th label
            radioButtonLabel1.textColor = UIColor.lightGray
            radioButtonLabel2.textColor = UIColor.lightGray
            radioButtonLabel3.textColor = UIColor.lightGray
    }

}

But, Default one is first button and first label should be selected.

Any suggestions?

Answer 1

With the current implementation you can do a small refactoring using an extra integer variable to keep the selected button tag.

Declare a variable:

var currentSelectedIndex = -1

And change your implementation like:

@IBAction func selectName(_ sender: UIButton) {

    if (currentSelectedIndex == sender.tag) {
        return
    }
    currentSelectedIndex = sender.tag
    let unSelectedImage = UIImage(named: "un_Checked")

    radioButtonLabel1.textColor = UIColor.lightGray
    radioButtonLabel2.textColor = UIColor.lightGray
    radioButtonLabel3.textColor = UIColor.lightGray
    radioButtonLabel4.textColor = UIColor.lightGray

    radioButton1.setImage(unSelectedImage, for: UIControl.State.normal)
    radioButton2.setImage(unSelectedImage, for: UIControl.State.normal)
    radioButton3.setImage(unSelectedImage, for: UIControl.State.normal)
    radioButton4.setImage(unSelectedImage, for: UIControl.State.normal)

    sender.setImage(UIImage(named: "checked"), for: UIControl.State.normal )

    if currentSelectedIndex == 1 {
        radioButtonLabel1.textColor = UIColor.darkGray
    } else if currentSelectedIndex == 2 {
        radioButtonLabel2.textColor = UIColor.darkGray
    } else if currentSelectedIndex == 3 {
        radioButtonLabel3.textColor = UIColor.darkGray
    } else if currentSelectedIndex == 4 {
        radioButtonLabel4.textColor = UIColor.darkGray
    }
}

Notes/Suggestions:

1. Using tag is not a good idea
2. I would suggest you to create a custom component with that button and label. And add a method/property (a bool) to that component and if you pass true or false to that, it should change the properties of button and label accordingly. In this way, your code will be cleaner and you can even re-use. In the current format, if you add more radio buttons it will be a headache. (I can see that in some checks you changed same button image twice, and it can lead to undesired behaviour).

Answer 2

first define 2 arrays for radio button and radio button lables

var radioButtonLabels:[UILabel] = []
var radioButtons:[UIButton] = []

now you can add your buttons and labels to these arrays (Ex: viewDidLoad())

radioButtonLabels = [radioButtonLabel1,radioButtonLabel2,radioButtonLabel3,radioButtonLabel14]
radioButtons = [radioButton1,radioButton2,radioButton3,radioButton4]

then easily you can change your function to like this

@IBAction func selectName(_ sender: UIButton) {
     for (index, element) in radioButtons.enumerated() {
        element.setImage(element.tag == sender.tag ? UIImage(named: "checked") : UIImage(named: "un_Checked"), for: UIControl.State.normal)
        radioButtonLabels[index].textColor = sender.tag ? .darkGray : .lightGray
    }

}