Methods can be connected to buttons. Learn how the whole process works in iOS 10, Swift 3, and Xcode 8 so you can set up basic user interactivity.
- [Instructor] And now let's say we wanted to run a method when we press a button. So right now, when the app launches, and viewDidLoad is called, we run addNumbers. So right when the app opens up it runs. But what if we wanted to wait until we press a button? Let's head over to main.storyboard and create a button. I'll show the utility area, hide the document outline, and then filter for a button in the object library. Just click and drag that right below where we have our text, and then we can change the text in the button by double-clicking it, and then I'm going to type show sum.
Press return on the keyboard, and just realign that button. That looks good. Now let's connect our button to our code. So this actually works a lot like connecting a label to code, except for, we don't want to reference the button in our code. We want to respond to the action of the button being pressed, so the process is just a little bit different. If we hold option and click on viewcontroller.swift in the navigator, we can get the assistant editor open, and then see our code on the right side.
If you need more space, you can always hide the utility area, and/or the navigator. So, what we want to do is right-click and drag from the button into our code, but we need to drag into the right place. I want to drag in between the viewDidLoad method and the addNumbers method. So let's just right-click and drag from that button right in between those two. And just note that when you're dragging in a button, you always want to make sure that you're not dragging inside of an existing method. So when you see that the cursor is showing you're dragging to the right spot, release your right mouse button, and then in here, what you want to do that's different, is after you check that the type is UI button, which confirms that you've dragged from the right object, you want to change the connection from outlet to action.
Remember, an outlet is to variables as actions are to methods. So if we want to run a method when the object is interacted with or clicked or tapped, then we choose action. If we want to modify something, or get data from something, like change a label, or get data from a label or text field, then we would use an outlet instead. But we're responding to an event. That's why we're using action here. So let's call this show sum.
It actually doesn't have to match the name of the button. And notice that I'm using camel case here following the naming conventions of methods, and with all of this selected I'm going to hit connect. And there we go, there's our @IBAction call out, which is very similar to the @IBOutlet call out. This says this is connected to an interface builder action. Some kind of user interface action, which is a button press. So when the button is pressed, the show sum method will be called.
So that's sufficient, let's head back to the standard editor. And then we want to go to our main class, which is viewcontroller.swift, and instead of navigating there through the navigator, I'm going to go through this jump bar at the top, and this is a whole hierarchy of our application, or rather, our working files for our application. So you can actually start from all the way at the end with Xcode project and drill down, or you can start where it says methods right here.
That's the first group, and it corresponds in the navigator to these various objects. So viewcontroller.swift is inside the methods group. So that's why we want to click on the methods group which has that folder icon. So, click on methods, hover over it for a second, and then select viewcontroller.swift. Now that took a long time here, as I was showing the navigator and everything, but it may be faster for you to quickly switch to the standard editor and simply use the jump bar to jump to the appropriate code file.
Just another way to do it. So, back in our code, we want to run addNumbers when we click the button. So I can actually just cut and paste this line of code where I'm calling addNumbers inside of viewDidLoad. So I'll highlight it, press command-X. Go inside of showSum by going at the end of the line on line 21, going inside of that by pressing return, and then command-V to paste the code. So now, we're going to add the numbers when we click the button. So let's run the application, and see if it works.
So sum is, I click show sum, and then the sum shows up there. And every time I click it, it's going to run again, but it's still adding the same two numbers, which is why we don't see any update in the label. Nevertheless, we have successfully connected a method to a button in our code. So every time we click the button, a method is called, and you can make that connection by simply right-clicking and dragging using the assistant editor.
- Installing Xcode
- Creating an Xcode project
- Understanding variables
- Connecting visual objects to variables
- Understanding methods
- Connecting a button to a method
- Using conditional statements
- Setting up the user interface (UI)
- Building a complete iOS app