Purpose : Use the isSelected property of UIButton, so that the button changes state when selected.

Application :

• A set of digital buttons. The button number is white by default, and turns blue when the button is selected.
• Another set of operation buttons whose backgroundColor changes from the default orange to white when the button is selected. Its symbol changes from white to gray.

The buttons are grouped into Outlet collections.

The numeric buttons are also linked with an IBAction func numberButtonsTapped. The same applies to the operation buttons IBAction func operandButtonsTapped.

class ViewController: UIViewController {

     @IBOutlet var numberButtons: [UIButton]!
    @IBOutlet var operandButtons: [UIButton]!

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

    @IBAction func numberButtonsTapped(_ sender: UIButton) {
    }

    @IBAction func operandButtonsTapped(_ sender: UIButton) {
    }

For the four numeric buttons. In the Attribute Inspector, change the default State Config to Selected, then change the Text Color. This will be the colour of the number when the button is selected.

When you set up the buttons in the storyboard, assigning a backgroundColor to the button, remember to assign the same colour for the TintColor. If you forget this, the background colour of the title area will change when the button is selected.

We define a function for the initial state of each button collection.

// MARK: **- setup buttons**

 private func setupNumberButtons() {
    numberButtons.forEach { button in
        button.isSelected = false
        button.layer.cornerRadius = 20
    }
}

 private func setupOperandButtons() {
    operandButtons.forEach { operandButton in
        operandButton.isSelected = false
        operandButton.backgroundColor = .orange
        operandButton.tintColor = .orange
        operandButton.layer.cornerRadius = 20
    }
}

Here, for the numeric buttons, the colour is defined in the storyboard, we indicate the state of each button to not selected(false). We take the opportunity to add a rounding of the corners.

For the operation buttons, we want to change the backgroundColor when it is selected, so we define the backgroundColor in the code, so that we can recall this default colour when the button is not selected. We apply this action to the TintColor too.

And a function for the selected state.

private func selectedNumberButton(_ sender: UIButton) {
    setupNumberButtons()
    sender.isSelected = true
}

private func selectedOperandbuttons(_ sender: UIButton) {
    setupOperandButtons()
    sender.isSelected = true
    sender.backgroundColor = .white
    sender.tintColor = .white
    sender.setTitleColor(.gray, for: .selected)
    setupNumberButtons()
}

For the numeric buttons, we start by putting them all in the same default state. Then we change the state of the selected button to true. Here the selected button is the sender. The colour change will be done according to the colours defined in the storyboard.

For the operation buttons, they are all set to their default state. Then we change the colour for each attribute. As we change the background colour to white, we change the colour of the title, so the sign, to see it.

Finally, in our case, we want to indicate the last selected button, so we set the other buttons to their initial state.

We still need to call these methods.

At the start of the application, in the viewDidLoad() function, we call the two methods that set the default buttons. (setupNumberButtons() and func setupOperandButtons())

Then when the user presses a number button (IBAction func numberButtonsTapped()), we call the method that sets the button to selected state (selectedNumberButton()).

When the user presses an operation button (IBAction func operandButtonsTapped()), the other method (selectedOperandButton()) is called.

override func viewDidLoad() {
    super.viewDidLoad()
    setupNumberButtons()
    setupOperandButtons()
}

@IBAction func numberButtonsTapped(_ sender: UIButton) {
    selectedNumberButton(sender)
}

@IBAction func operandButtonsTapped(_ sender: UIButton) {
    selectedOperandbuttons(sender)
}

Without storyboard

If everything is coded programmatically, the colour of the title of the numeric buttons is handled in the same way as the backgroundColor of the operation buttons.

the final word

We have added a corner rounding, we could add a small animation (flash, pong,...)

Thank you for reading,

Have fun coding