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