Buttons are made for clicking, or in iOS, tapping. This movie demonstrates the basics of responding to button presses in iOS. Using this basic interaction effectively helps build a foundation for developing apps. The process involves connecting a button to code and handling the touch event inside your code.
- View Offline
- [Voiceover] So let's create some basic interaction here. Our goal is to take our project, add a button, and have something happen when we click the button. I'm going to start by going over to Main.storyboard to add a button. So in my View Controller, I'm going to drop a button onto the screen. Now just as we searched for label before, we can search for a button now. I'll click in the Fllter area and type out button.
Of course, you can scroll down and find button, but I always find that to take longer than just typing for the element that I want to look for. So there's a button right there, or you can type button, find your button, and drag it on the screen. Now let's change the text on the button. With the button selected, click the Attributes Inspector. You can find the Attributes Inspector in the Inspector Bar, which is at the top of the Utility area. So I click the Attributes Inspector, and now I see settings for my selected button.
So at the top you'll see I have a button selected. I can change the type. I can change other settings using dropdown menus. I can change the text, which is right here using this text field. I'll change the text to say Tap. When I type the text and press return, we don't see all the text inside of the button. Just like we did with the label earlier, we're going to need to just grab one of the handles, stretch it out a little bit so that we can see the whole button. So now our goal is when we tap or click this button, something is going to happen.
The way that code is organized in iOS development is through the Model-View-Controller design pattern. A design pattern is just a way of grouping your code objects and a way of staying organized. The Model-View-Controller design pattern is deeply engrained into iOS. What that means is that your objects in iOS are going to be organized generally into three specific groups.
Objects should either be a model, which represents some kind of data structure. So if you're creating an app that's going to hold contacts, for example, the model would hold the names and the phone numbers and everything, but not any information about what that's supposed to look like, so no font information and not colors or anything like that, just the raw data. Now a model can be a Swift file like a class file or it can be an XML file or a database, or any other kind of data.
It also may be a combination. Maybe you have a database and then you have a Swift class that connects to the database, so you could easily access the data through that class. So that's what a model is. A view is actually what we're looking at on the screen right here, the visible objects. This defines what the font is going to be on the button, what the style of the button's going to be, et cetera, the look of things. The view and the model aren't directly connected to each other. They're connected through the other objects called controllers.
Now if we look at our code, well, we have the view inside of the storyboard file, and we have the controller in the file ViewController.swift. This is connected to a view and controls the view. The controller in a Model-View-Controller can talk to both the view and the model, so the controller connects both of those kinds of objects. So here we have our view in a storyboard, and it's connected to our controller. At this point we don't have a model object.
In your apps, you may have multiple models, views, or controllers, or you might not have, for example, a model. You're not limted to creating a certain number of objects of a certain type. It's just a way of thinking and Model-View-Controller design pattern is a way that we organize our code. So that being said, our goal now is to connect this view object, this button, to our controller object.
So we want to send the information that this button was clicked 'cause that's what a button can do. A button can receive clicks, it doesn't handle the clicks itself. It sends the information that it was clicked to another object, so it's going to send that information to our controller class. In iOS the connection is not made automatically, so we actually have to define this connection ourselves in our code. Here is the fastest and easiest way to create a connection from an object like this button to our code.
Our goal now is to send that button click or button tap action over into ViewController.swift. So to do that I'm going to hide this area right here. This is called the Document Outline. I'm going to hide it by clicking the button at the bottom of the Editor. I'm also going to hide the Utilities area, so we want plenty of space in the Editor right here. Then I'm going to switch to the Assistant Editor 'cause we want to be looking at both our view and our controller code at the same time.
Now there are multiple ways to do this. I can click Assistant Editor and the ViewController code automatically shows up. But a shortcut to doing that is to Option + click the code file that you want on the right. So if I'm in the standard Editor and I Option + click ViewController.swift, the Assistant Editor opens up and the file that I Option + clicked shows up on the right side of the screen. So you can go into the Assistant Editor whichever way you want.
If you want to navigate within files when you're already in the Assistant Editor, you can use the Jump Bars and navigate through your project hierarchy in that way and then just click on the file that you want to edit on either side. So our goal now is to connect this button to our code. So what I'm going to do is just right click and drag, and I'm going to drag between lines 12 and 13. The hover text says Insert Outlet, Action, or Outlet Connection. I'm going to right click and it's asking me if I want a Outlet Connection or an Action or an Outlet Collection.
What's the difference between these? Well, an Outlet is something that is like a variable in our code, like maybe a label. We're going to be sending the view information from the controller in an outlet. It's an outlet to a view. An Action is an event, something that happens. A button was clicked, a slider was moved, something else was changed and the data is being sent from the view into the code. So right now what we want is the Action. We want to do something when the button is clicked, so I'm going to click Action.
Then I'm going to type buttonWasClicked inside of the Name. I'm going to leave Type as AnyObject and the Event as Touch Up Inside. The Event is the actual action that's going to trigger this code, so I can click from the dropdown and choose Touch Down, which is when the finger goes down on the button or Touch Drag Inside or any of these different options. The default is Touch Up Inside. That is when you release your finger off of the button with your finger inside of the button before you release it.
So with all of those selected, I'm going to click Connect. Then there we have our code. It starts with @IBAction. That's a special callout saying that this function or this method in my code is connected to an Interface Builder Action. Interface Builder is the name of the mini app that we use within Xcode to build user interfaces. So we've created that connection, and now we just have to write some code inside of this method. So I go down to the next line and I'm just going to print button click.
I'll save and I'm going to test that, not on the 6 Plus, but on the 6s, and then I'll hit the Run button. So at this point all we're expecting to see is when we tap or click the button, we're going to see a message in the Output window. So we see Tap me! at the top left. Click on the button and then we see button clicked in the Output Window, simple as that. So to make a simple connection to trigger an action from a button, we just right click and drag into our code when we're using the Assistant Editor, and then you write the code that you want to trigger when the action occurs inside of the method that's created for you.
Interested in developing for Apple Watch or Apple TV? Get a sneak peek in Chapter 9. The course wraps up with a look at the submission process for the App Store.
- Installing Xcode and the iOS SDK
- Creating a simple iOS app
- Creating a basic interaction with a button
- Choosing an object as a first responder
- Creating a user interface with Interface Builder and Auto Layout
- Working with sliders and progress bars
- Creating views to show images and web pages
- Developing responsive layouts with size classes
- Understanding the iOS architecture
- Loading data in table views
- Transitioning between views
- Developing for the iPad, Apple Watch, and Apple TV
- Submitting apps to the App Store