Often the first step in building an app is to create a basic user interface. That's the purpose of this video. See how the interface of a basic to-do list app can be created.
- [Instructor] Let's start building our app by creating the user interface. To create the user interface, head over to main.storyboard. For those of you following along without the exercise files, I'm just using a single-view application template project with no changes so far. In the storyboard file, create a label from the library. So click the library button in the tool bar and then search for label and click and drag one of those out onto the screen. I'll drag mine right about here, I'm hugging that left guide and then a little bit down from the top.
Let's double click this and change this to groceries, and press return to commit the change. The way that our layout's going to work is it's going to say the name of our application right here, which is groceries, it's going to have a text field to enter an item to add to our grocery list right here, and then a button right here to add the item to the grocery list and then a text view, which is a multi-lying text field, taking up the rest of the space in the application.
The next step is to grab a text field, so open up the library again and search for text field, and click and drag one out, drag that right below groceries, just snapping to the guide right there, both to the left and right below groceries. And then stretch out the label to right about there, just enough space to add that add button, and then we'll go back to the library again, filter for button, and then click and drag the button out to the right of the text field.
So the left edge of the button should be close to the right edge of the text field following the guide, and I'll just drag that right handle out a little bit like that. So I'm hugging the guide here on the right, and on the left of the text field, the text field is hugging this guide. So let's change the text in the button to add and then press return, and then finally we need to add our text view which is that bottom object that's going to store our grocery list.
Hit the library button again, type out text, and then you'll see text view in there. So just click and drag that out, and we'll hug the left edge following the guide and then slide up until it snaps right below that text field and release your mouse button. Then we'll use the bottom right handle to drag down to the right, snapping to the bottom and the right edges. At this point, we're going to use something called auto-layout pins to set up our layout, to make sure that this layout scales appropriately with device screen sizes.
I mentioned earlier in the course that complex layouts are beyond the scope of this course, so we're just going to touch on it here and if you want more information on that topic, I'll show you where to go at the end of the course. So to add our constraints, let's start with the groceries. We're going to start from the top of our application and make sure everything is pinned all the way at the top. To create the auto-layout pins, use the keyboard shortcut Shift + Option + Command and then the equal sign.
You'll then see some blue lines showing the constraints that that object is now following. So there's a constraint above, there's this line on the left and that's saying that it's a certain number of pixels or points from the top and the left of the screen. This red line is indicating there's an auto-layout error, which we'll fix by adding constraints to the rest of the objects. So let's do this one at a time, go into the text field next and we'll use the keyboard shortcut again Shift + Option + Command and the equal sign.
If you're wondering what that does, it's the shortcut for editor, resolve auto-layout issues, reset to suggested constraints. In other words, it tells Xcode to guess where it thinks the constraints should be and add the constraints there, and then you don't have to add the constraints manually. So let's go to the add button now, same keyboard shortcut, text view, and the same keyboard shortcut, and that should make all of the red lines go away. So if you click on each one of these, one by one, you should see that there are now only blue lines for the constraints and no red lines.
The last thing that we want to do is to just test this in the simulator to make sure that it looks similar to what we see in Xcode. Let's run the app in the simulator and see how it looks. And there it is, it looks pretty close to how it does in Xcode so I'm happy with that, let's go back to Xcode, stop the application, and now that our layout is set up, let's delete this dummy text right in here so I'm double-clicking the text view to select all the text, delete, and then return so we still have the text view there it just has no text inside of it.
And we've successfully created the layout for our application.
- Creating an Xcode project
- Navigating the Xcode interface
- How model-view-controller works in an iOS app
- Troubleshooting UI-to-code connections
- Planning an app within your constraints
- Setting up the UI
- Testing your app on a device