Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,800 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
If you find you'd like to learn more, see iOS App Development Essential Training, Foundations of Programming: Fundamentals, or any of the other programming courses in our library.
- Installing Xcode
- Creating an Xcode project
- Configuring the iOS Simulator
- Understanding variables
- Connecting visual objects to variables
- Understanding functions, methods, and selectors
- Connecting a button to a function
- Using conditional statements
- Setting up the user interface
- Connecting code elements to build an app
Skill Level Beginner
We've already looked at connecting a variable to a storyboard object. Now, we'll look at connecting a function to a storyboard action. Now, I use the word action instead of object because we're not connecting a function to a visual element, we're connecting a function to something that happens when you click a button. So let's look at how that works. I'm in my ViewController.h file, and you can see I have a label that is connected to a storyboard UILabel.
Now, below the curly braces, I'm going to declare my function. Now, this is very similar to declaring a variable in our .h file. In that we're not going to declare what the function does. We're just going to say the name of the function, and the type of information that it returns and that it receives. So, we'll type a hyphen and open parenthesis, and then I'm going to type IBAction. And as I type IBAction, you see that Xcode wants to finish this for me.
So, I'm going to press a Return on my keyboard. And now the code that's highlighted says, selector. Remember that selector is synonymous with function, action, or method. So, for selector, I'm going to type in clickedButton, capital B. Then it says colon, then parentheses id. id is a generic data type that can apply to any pointer object. And then the word sender. After sender, I'm going to put a semicolon. Again, we're not putting the curly braces because we're not saying what the function does.
We're just saying that a function will exist in our .m file here. And doing so enables us to connect this function to a button click action. So again, we have IBAction for a function. And IBAction is just a special way of saying void. It's, it's a type of void that says, reveal this function to our storyboard so that we can connect it to a button press. And then, we have IBOutlet which we use for variables.
So we'll see that this has a hollow circle, meaning we haven't connected it to anything yet. So let's connect it to something. Click MainStoryboard.storyboard. And then I'm going to need my utility view on the right side. So I'm going to click the button to reveal the utility view. Just like our label, I'm going to select a button from the Object library. So find the Object library, scroll down till you see Button, it should be right below Label, and then click and drag the button onto the screen.
Now, I'm going to use the guide to drag it to the center of a strain horizontally. In iOS 7, the default buttons do not have a border around them. So it just says button, and of course you could double-click that and change the text if you wanted to. But I'm not going to for now. Now we want to connect the click action of this button to the function that we created. To do that, click on View Controller on the left side of the screen, just like how we set the values for variables and labels, we're going to do the same thing for the button.
So click View Controller. Click in the circle with the arrow. Click the Connections Inspector button, which is the circle with the arrow inside. And then, you won't see it in Outlets actually, you'll have to scroll down and find it in Received Actions. So there's clickedButton and then a colon afterwards. So hover your mouse over that circle, and just like we did with the label, we're going to click and drag over to the button. With the button highlighted, I'm going to release my mouse button, and you're going to notice something different. Here's a list of a whole bunch of different things.
Now, this list contains different actions that we can connect to a function. So the action that we want to connect is when you click on the button, then we can choose whether it's when you finish clicking on the button and lift your finger up, or when you initially put your finger down on the button. And I'm going to chose initially putting my finger down on the button, and that event is called Touch Down. So I'm going to click Touch Down. And now, you'll see in the Received Actions area that I've connected clickedButton to the button.
Alright, let's go back to ViewController.m. Now that I've declared that the clickedButton function exists, I need to define that function inside of my .m file. Until I define it, I'm going to see a warning sign on line 15 next to my @implementation line of code. That warning sign says, you said that a function is going to be inside of this file in ViewController.h, and I don't see the function here, so create it or you're going to have to look at this warning sign.
So let's create that function. I'm going to hide the utilities view and then under viewDidLoad, that is, after the closed curly brace. I'm going to go down a few lines, so I'll type a hyphen and parentheses, IBAction. Now it says selector, again, I'm going to type clickedButton. And then use the code hinting. And now I have all this extra code, so I'm just going to delete everything that I don't need. So I have clickedButton, then a colon, and then parentheses, id, and then sender. So below that, I'm going to write my curly braces.
And now, that warning should go away because I've created the function. And again, I'm seeing this circle that's filled in, saying I've connected this function to some kind of action in my storyboard. In this case, clicking a button. So now, what I want to do is have some kind of visual feedback that shows when I click the button. So we'll type label, that's the name of our label on the screen, .text, that's how we change the text of the label. We'll set it equal to the NSString, which is an at symbol and two quotes, and inside of the quotes, going to type BOOM in all caps.
So I'll run this in the simulator. And remember that clickedButton is not going to run until we actually click the button. So rather than calling the function name, the function is connected to the action of clicking the button. So here's the simulator. And then, you'll see that the label just says Label, but when I click on the Button, the label changes to say BOOM. So to review, here's how you connect a function to an action. In your header file or your .h file, you're going to declare the function.
So hyphen, the return data type is going to be IBAction, the name of the function, colon, the return data type in parentheses, which is going to be just id, and then sender, and then a semicolon. Once you've done that, go to your storyboard, drag a button out. And using the utilities view, you click and drag from the circle onto the button. Choose the event that you want to trigger the function, and then go to your .m file, and then actually define that function there.
Code that you put inside of that function will execute when you click the button.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.