Storyboards are the standard for creating iOS layouts. This movie explains the basics of working with storyboards, including using the document outline and finding user interface elements in the Object Library.
- [Teacher] So let's look at building a basic layout for an iOS app. In Xcode, you can create a new project by going to File > New > Project, or you can create it from the Welcome screen. Here, I'm going to choose Single View Application and click Next, I'll name this Basics, and then I'll click Next using the settings that we had previously entered in to create our first project. I'll save this in Exercise Files, Chapter 02, basic_layouts, final.
Now you can save this anywhere else that you'd like on your computer. If you don't have the Exercise Files, it doesn't matter where you save this project, but if you do have the Exercise Files, just don't save it inside of the final folder. So you can save it right out here and that's fine. So I'll create the project, and to modify a layout, we go over to Main.storyboard. Remember, a storyboard file is a file where you can design your user interface.
Now when you click your storyboard file, you're going to see a few different things in the editor. You may see this list on the left side of the editor that says View Controller Scene, and this is called the document outline. If you expand that list by clicking the triangle on its left side, you can see sort of a hierarchy of your application. So we have a View Controller object, we can expand it, then we have a Top Layout Guide, a Bottom Layout Guide, and a View.
Just like as we talked about earlier, the View is what we see visually, and the controller, in this case called the View Controller, is a code file that connects the View to our data. This document outline isn't the only way to view how your file is organized, and if you want to hide it or show it, you can click the button at the bottom center of the editor. This is the button to hide the document outline, so when I click this, it's going to slide to the left and hide the document outline, so I can show it again by clicking that button again.
So I'm going it now just to get a little bit more space to design our user interface. I'll scroll up a little bit, and then I see my View Controller. So this white screen is what we were seeing when we ran the application in a previous movie. So let's say we wanna start designing a simple user interface. Well, the user interface objects are stored in the Object Library. The Library is the section at the bottom of Utility Area, which is on the right side of the screen.
When you look there, by default, I'm not seeing any user interface objects. I'm seeing code objects, like a Cocoa Touch Class, a UI Test Case Class, et cetera. And as I scroll down here, I don't really see any user interface items. Now to get those, what you wanna click on is this Object Library button right here, it's a circle with a square inside of it, and that's going to show objects, some visible and some not visible, but objects for building user interfaces nonetheless.
So if we can scroll down, and you can see these different types of View Controllers, and you scroll down enough and you'll see Label and Button and some user interface elements that you'll probably recognize, like a Switch or an Activity View Indicator. What I'm gonna do here is just drag out a Label onto the screen. So I'll click and drag from the Object Library, and I'm going to use these guides. Now these guides basically give you a guide on how far away an object should be from the edge of the screen.
So there's sort of a default margin for an iOS application, and when we drag them out and we follow this guide, we automatically snap to that default margin. So that's what I'm going to do here, just drop the label right there, and then we can edit the label in multiple ways. One way is to just double-click the label and change its name. New name! Just like that. Then I can press Return on my keyboard to commit that change, and there's my label. You can also change the label through the Inspector.
The Inspector is the top part of the Utility Area, and it has different buttons. Notice that there's four buttons added since we're not looking at a code file. Remember I talked about earlier how the Inspector changes based on what's going on in the editor. So if I click on this one that looks like a little notch on a slider, that's the Attributes Inspector. So let's go there, and this is another place where we can edit a label. So I'll type Changed in Inspector right there, and when I type that and press Return to commit the change, you'll see that there's an ellipses right there.
Actually, what happened is the text is getting cut off. So you can make the changes by double-clicking, typing out your change, or you can do it in the Inspector. However, when you make that change, if there's too much text for the size of the label, it'll get cut off like that, and then to show it, you can just drag the handle, so I'm dragging this right center handle right here until it's long enough. And there we go, we see that change in the Inspector. And then if you want to, just for fun, you can run this in the simulator to see that your app is indeed updated.
And there's our app, and it says "Changed in Inspector." Pretty simple. So I'll hit the Stop button in Xcode to stop the app. Now there is some data that's showing here in the debug menu. For now, we're just going to ignore that, so I'm going to hide the Debug Area by clicking the button in the toolbar right here. So with this label selected, we see other settings that we can adjust inside of the Inspector bar, so make sure you're again on the Attributes Inspector in the Inspector bar, and then you can change different settings for the label, like the color and the font and alignment, et cetera.
What I want you go get out of this is that when you select a storyboard, the editor changes. You can navigate through your different elements using the Document Library, which you can show or hide using the button in the editor. This shows you a hierarchy for your application and enables you to easily select different elements from this type of a list. If you don't need that, you can always hide it and get a little bit more space. Also, I wanted to show you that you can get visual objects from the Object Library at the bottom of the screen in the Utility Area, and that you can modify objects by double-clicking on them inside of the storyboard in the editor, or by selecting them and then heading over to the Attributes Inspector, and then modifying the properties there.
- Installing Xcode and the iOS SDK
- Creating layouts
- Adding interactions
- Changing labels and text fields
- Troubleshooting UI-to-code connections