In this lesson, we'll learn how to link multiple elements to a single IBAction. 1
And in the process, we'll also learn how to differentiate between the buttons that the user has pressed. 2
Once we figured this out, we can turn our app into a real xylophone and play a different sound for each 3
button. 4
So how can we know which button they pressed? 5
Well, a simple option might be simply creating a IBAction for each and every button. 6
Now, that's not the best option. 7
Firstly, because it's going to be really tedious to do that and we have to click and drag almost seven 8
times in order to achieve this. 9
And, secondly, because it create way more code than necessary. 10
So what else can we do? 11
Well, if you go ahead and open up the assistant so that we can have our Main.storyboard on the left 12
and our code on the right, then notice when we hover over this little circle, it already highlights that 13
we've linked to the C button. 14
Well, if you click on this little circle and hold and drag, well, then you can drag this IBAction for 15
it to be linked to all of the buttons on screen. 16
And this is very quick and it doesn't require you writing any more code. 17
And now when I hover over the circle, you can see it highlights all of my seven buttons. 18
So I've managed to link all seven buttons to the same IBAction so that now whenever any of these buttons 19
are pressed, then it's going to trigger this code block, and you can test this if you simply run the app 20
and click on all the button. 21
Now, notice that no matter which button I click, it's still going to be triggering the play sound function 22
which has the functionality of playing my C.wav file. So every button is a C sound. 23
What we actually want is a different sound for each button. But to do that, we first have to be able to 24
identify which button was pressed. 25
If you look closely at our IBAction, you can see that it's actually really similar to the functions 26
that we just learned about. 27
It's also got the func keyword. It's got a name. It's got a set of round brackets where we said the inputs 28
go into. And then it's got a code block which has the curly braces, and in between the curly braces, we 29
tell it what it needs to do. 30
All that's different here is that it has this IBAction annotation and this shows that it's linked to 31
the Interface Builder, 32
the IB is the Interface Builder part. And the other difference is that in this case, there's actually something 33
inside these round braces, 34
rather than being simply empty. 35
Now, this part inside here are the inputs to our function. 36
And unlike the functions that we've created so far, this function is not actually called by us. 37
It's not triggered like playSound where we call it and it gets executed. 38
There's nowhere in our code where we call keyPressed. 39
And this is because this function actually gets called when the linked button gets tapped 40
and when a touch gets detected on one of these buttons that it's linked to. 41
And when that happens, the identity of the button that got tapped gets sent over to this function that 42
it triggers inside this input. 43
So we can, in fact, use this input to get information about the button that triggered it inside this 44
IBAction just above our playSound. 45
I'm going to go ahead and print what is the value of this sender. 46
So if we go ahead and run up again, and now when I press on, say, the first C button, you can see that 47
what gets printed is some information about a UIButton. This corresponds to the sender right there. 48
So it tells us the frame of the button whether if it was opaque, whether if it was autoresized, what 49
its tag is equal to, and a bunch of other things which are related to how it's displayed. 50
This is the identity of the button, essentially, but we can't actually dig a lot deeper. 51
Let's try and print out the background color of the sender. 52
Think back to how you managed to get the image property from the image view and go ahead and try to 53
print out the background color of the button that got pressed. Pause the video now and try to complete 54
this challenge. 55
When we had a image view,what we would write is ImageView.image and we would get access to the 56
image property which we were then able to set or we could then print. 57
And now what we want is the sender which we know is a button. 58
So it's gonna be one of these seven buttons. And these buttons will have a bunch of properties including 59
a background color. 60
So that's what we want to be able to print. 61
So we can tap into our sender. 62
And then if I type dot, I can access its various properties, including its buttonType, backgroundImage. 63
And if I search through this, I can find something called a backgroundColor. 64
And down here, it tells me that this is going to correspond to the view's background color. 65
So let's hit enter. 66
And now if we hit run and we press on any of these buttons, then you can see that we're getting the 67
systemYellowColor or the systemOrangeColor. 68
So let's click on the purple button and you can see that we've got the 69
systemPurpleColor. 70
So it's able to tell us the color of the button that got pressed. 71
So remember that any of these properties that you see in the Attribute Inspector, we can tap into using 72
that dot notation. 73
So wouldn't it be cool if we could actually just simply get the title of each of the buttons because 74
we have our C, we have our D, and they correspond to the names of our sounds. Instead of printing the 75
background color, 76
can you figure out how to print the title of the button that got pressed? Try using the five-step process 77
that we used for figuring out how to play sound to figure out how to print the title of the button that 78
we pressed, so that if I press this one, I get C printed. If I press this one, I get G printed, and so on 79
and so forth. 80
Pause the video, go through the process that you learned, and try to complete this challenge. 81
Did you have a go at printing the buttons title? 82
Well, there's actually a number of ways you could have completed this challenge. 83
Let's take a look together and let me show you the three approaches you could've used to solve this problem. 84
All right. 85
So the first one we've got on StackOverflow is how to get the current title of a button. Just click on 86
it and let's see the answer. So we can tap into the sender.title or we can tap into the 87
sender.titleLabel.text, and if we take a look at some of the other answers, say, this one "checking UIButton 88
Title in Swift," then you can see that you can use 89
button1.currentTitle. So there's a lot of ways of doing the same thing. 90
And often, you'll come across different answers. 91
The simplest, in this case, is to simply tap into the currentTitle, and you can see that this corresponds 92
the current title that's displayed on the button. 93
But another way of doing this is, of course, tapping into the titleLabel and getting the text that's 94
in the title label. 95
Alternatively, we can get the title for a particular control state of the button, 96
so when the button is normal, what is the title. 97
So there's lots of ways of doing the same thing. But in my case, I'm going to keep the simplest one which 98
is sender.currentTitle. So if I hit run now and I press on each of my buttons, you can see that I've got 99
F and this one is G, A, B. So I'm able to get the value of the title by using this code. 100
So now we know that we can get hold of the title which is using the sender.currentTitle, and that 101
title corresponds exactly to the name of the sound file that we want to play, 102
we just have one problem. How do we move that information from here inside the IBAction into our play 103
sound function? 104
How can we get it to go from here to here, so that when we press the D button and our IBAction triggers, 105
our D.wav actually plays? In order to do that, we need to learn a bit more about how to create functions 106
with inputs and how to use it in our function. 107
So for all of that and more, I'll see you on the next lesson.