# Configuration Selected Button State

*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