Methods can be connected to buttons. This movie shows how the whole process works in iOS 10, Swift 3, and Xcode 8 so you can set up basic user interactivity.
- [Host] So let's say, instead of running these did score methods inside a view did load, let's say we wanted to do that on a button press. We're going to comment out these lines of code and then head over to main.storyboard. In here I'm going to hide the document outline using this button at the bottom left corner. That gives us a little more space. I'm also going to hide the debug area. I'll show the utilities area and then I want to find a button. So I'm going to search for button and then click and drag one right beneath the label.
I'm going to change the text on these buttons as well. I can do that by double clicking the text on the button right in the middle of interface builder on my storyboard. So I'm going to type hit ship, I'll click away. I'll realign that and then I'm going to option drag down a copy. I'm going to change ship to alien. So again I'm double clicking the text of the button, selecting ship, and replace it with alien, and press return on my keyboard to commit the change.
We'll just realign that and that looks good. So now we have a button for when we hit a ship and a button for when we hit an alien. And each of these is going to give a different amount of points to our score. So with this done, I'm going to set up the connections to our code using the assistant editor. Remember we can option click viewcontroller.swift to make it show up on the right side. To get some more space, we're going to hide both the utilities area and the navigator.
So what I'm going to do here is right click and drag from the buttons into my code. Now when you're working with a method it actually doesn't matter where the method is in your code. My code's not going to work any differently if I declare did score here or down here. It's not processed in any particular order. It just needs to be inside of the curly braces for the class definition, and it will run when it's called. So I'm going to right click and drag from hit ship right in between view did load and did score.
Note that I can drag it down here, here, here, or just about anywhere in my code. So make sure that it's not inside of the curly braces and release your mouse button. For type you should see Uibutton, if you see Uibutton, you're in business. Change the connection from outlet to action. Remember earlier I said, action is synonymous with method in swift development. So I'm going to name this did hit ship using camel case, so hit has a capital H, ship has a capital S.
However if you type it all lowercase or you name it something else, it's not going to matter here. Leave the rest of the settings at their defaults and then hit connect. So we see did hit ship, and we want to do the same thing for the alien. So I'm going to right click and drag, right below the closed curly brace connected to did hit ship, and I'm going to release my mouse button. Again, confirm that you have Uibutton for the type. That mean's that you've correctly right clicked and dragged from the button and not from another object.
Change the connection to action, remember we want to run some code when the button was clicked, and then give it a name. Did hit alien should be fine. And again this is your method name. So you want to follow the rules. Don't give it any spaces or special characters. Everything else set like this, hit connect and there we go. Did hit ship and did hit alien. I'll go back to the standard editor and this time I'm going to get to viewcontroller.swift through the jump bar right below the toolbar.
Now if you don't like the jump bar, you can always just show the navigator and go through that way. But I want to show you a different method in case you like it better. You can click where it says methods here in this little folder icon which is a group. Hover your mouse there for a second and you should see viewcontroller.swift right there. So click on that and then you're back in your code. So let's put our cursor inside did hit ship. So put your cursor right at the end of that open curly brace on line 19, press return on the keyboard to get inside of that method.
So in here, when we hit the ship, let's say we want to get one point. So I'm going to type self.didscore and then press return on my keyboard, and for the points I'm going to put a one. Then I'm going to press the right arrow key on my keyboard, close out that parenthesis. Now we'll do the same thing in did hit alien. Cursor after the open curly brace, return key, and then remember we don't have to call a self and a dot for this. We can just call did score, once it's highlighted, press return on your keyboard, type in a number, I'll type in five, right arrow key to close out the parenthesis.
So now let's run the app, and what we should get is that did score runs when we click the buttons. So there we have our label. And if I hit hit ship, it says score is one. Each time I click it, it adds one to the score. Each time I click hit alien, it adds five to the score. So our mini app is working properly. So remember, if you want to connect a button to trigger an action or method in your code, simply right click and drag from that button in interface builder right into your code and make sure to chose action instead of outlet.
- Installing Xcode
- Creating an Xcode project
- Configuring the iOS Simulator
- 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