Working With Multiple UIButtons and Utilizing Their Tag Property

For as long as I can remember, I’ve always used UIButton’s IBAction functionality when when working with buttons. Whether if it was one button or a couple, it’s simple to connect buttons to their respective ViewController and write some logic within their IBAction function. However, what if you needed to work with multiple buttons? Say…ten or twenty buttons? While it’s highly unlikely you’ll find this many buttons in an app’s screen, apps like a typical calculator beg the question on how they are configured under the hood with so many buttons?

This is where a button’s ‘tag’ comes into play. In Main.storyboard, a button’s tag property can be assigned a unique number in the Inspector. Again, it has to be a unique tag value; buttons cannot share the same tag or else it’ll crash upon runtime when tapped/triggered. It’s no different than calling a set of twins the same name because calling that name will cause confusion.

I will spare you from reading an entire guide on building an entire calculator to show off a button’s tag use; I will keep it short and work with 3 buttons. In this example, I will show you how you can have 3 buttons utilizing the same IBAction, and produce a specific output based on its tag.

So let’s start by building out a simple view controller with three buttons side-by-side(you may add them to a stack view if you wish), constrained horizontally and vertically. Apply the background color of the far left button red, the middle button to green, and the far right button to blue. Above the button, add a label and constrain it above the button set far enough where they do not obscure each other. Give the label a fixed height of 50 and a width of 100. Finally, constrain the label horizontally to center. The UI should look similar to the one below.

So let’s start configuring the buttons’ tags. Let’s start with the red button by selecting it and going to the Inspector properties in the left pane. Down at the bottom but still close to the center, you’ll find the tag property. Let’s assign the red button’s tag with 1. Select the green button and apply 2 as the tag value. Finally, select the blue button and apply 3 to the tag.

So now that we’re done setting up our UI, option+click the ViewController.swift file to open up Assistant editor and have both ViewController.swift file and Storyboard open side-by-side. Let’s start by connecting the sole label to the ViewController.swift first by holding down Control + click and dragging the label from Storyboard to ViewController.swift file above the viewDidLoad() function. Simply name the IBOutlet as displayLbl. Below the viewDidLoad() is where we’ll establish one IBAction function. To do this, Control + click and drag the red button to the ViewController.swift file. Name the IBAction connection as buttonPressed and ensure the Sender is selected as UIButton. This is crucial because we want our logic to trigger when a UIButton is specifically pressed. Next, repeat the same process with the green and blue buttons however, drag it to the same IBAction buttonPressed function just created. As you drag both green and blue buttons to the buttonPressed function, you’ll see the entire function get highlighted. This is a good indication you have connected all 3 buttons to buttonPressed function. Consider this function the one function to rule them all. Your ViewController.swift file should look similar to the one below:

So now that we got our label and 3 buttons connected, let’s work on the logic to output some data when the buttons are tapped. We got 3 buttons delegated by one function. How do we tell our logic output THIS when THIS button is tapped. Well our one input property sender of type UIButton can handle the task of figuring out which button was tapped with the help of the UIButton’s tag. Rather than writing some lenghtly if/else logic, let’s work with my favorite condition-handling method: switches.

Because sender has access to the UIButtons tag property, we can have our Switch statement evaluate the sender.tag value. The case results can be the likes of our tag values of 1, 2 and 3. Each case result can output a String to the displayLbl. The exhaustive default case can just be break as the result. Let’s put this in practice:

It’s the moment of truth — let’s the run the app. Once it loads up, tap on a button and the label should display the color of the button you have pressed.

So as you can imagine, having one function to delegate the triggered output of three buttons is easily managed rather than having to connect all three buttons with their own IBAction. If you need to add more buttons with specific output, simply connect it to this function and add modify the switch logic.

If it doesn’t seem to display the correct color or there is no output at all, double check you have configured the tags as instructed above and confirm all three buttons are connected to the one IBAction buttonPressed function.

If the label is outputting the color correctly, congratulations! You have successfully utilized a button’s sender tag!

Happy coding!