Storyboards are the standard for creating iOS layouts. This video explains the basics of working with storyboards, including using the document outline and finding user interface elements in the Object Library.
- [Instructor] Now it's time to build our application. We're going to start with a new project file using the single view app template. So select that and hit next, and I'm going to call this plain ol' pasteboard. So you can give it any organization name or organization identifier. Choose Swift for the language. And for user interface, change it from Swift UI to storyboard. Note that we're choosing storyboard over Swift UI. Swift UI is a way to create a user interface using code that I felt was a little bit too complex for this course. So there are courses for Swift UI. Look for those in the library. So once you've chosen that, hit next and then save your project. I'll go in chapter two. And then we'll call this storyboards. And then I'll make a final folder in here and then save it. Just like that. Now let's create our user interface by heading to the Main.storyboard file. A storyboard file is a visual user interface file. So you can drag and drop elements onto the screen and quickly create a user interface. So here I have my example device which is an iPhone 11 by default. So you should just leave everything as it is. And then hit this plus button up here to open up the library. Because we're in a storyboard, we have this object library which gives us user interface elements to put into our application. We're going to start with a text field. So type text and then click this one on the right that when you select it says text view. So we have the text field that accepts one line of editable text and the text view gives you a multi-line editable text. So just click and drag that onto your iOS device right here. And I'm just going to make it stick to that top left corner. Just like this. So do that and then just click and drag this square handle on the bottom right down about right there. It doesn't really need to be perfect 'cause we're going to adjust it later anyway. I do want to point out however that with this text field selected, you could tell it's selected because it has the handles around it and you could deselect it by clicking in that blank area over here, single left click on it to select it. You can modify objects by clicking in the attributes inspector. So you need to show the utility area on the right and this toolbar at the top, you can click in the inspector bar and select this little guy that looks like a node on a slider. And in here you can modify the settings of the text field, like changing the color and so forth. So if I want to change the color, I can click this dropdown where it says color and then go down to where it says custom, all the way at the bottom. Then you can choose a swatch that you want to choose. I'm going to go where these colored pencils are here all the way on the right and then select this lead color right here. If you want to bump up the font a little bit you can do that in this area where it says font. We'll keep the system font, then click this up arrow here to bump it up to about size 18. From there, we're not going to allow the text field to be editable. So all it's going to do is accept input from the pasteboard. And we're just going to put it right there in the text field. The last thing we're going to do is to add a toolbar button. So hit the plus button again and search for toolbar and then click and drag that to the bottom of the screen. Just like that. Now, single-click on that item. If you have trouble selecting it, go over to this menu here. It's called the document outline. You can toggle it by pressing this button. And you can expand toolbar and select the item in there. Once you've done that, head over to the attributes inspector. That's that same menu we were in earlier. And then change the system item to trash. This is going to clear the screen. So if we want to remove all the text inside of the text view, you just hit that button. And that's it for now. So we've successfully created a simple user interface with a storyboard.
- Creating an Xcode project
- Navigating the Xcode interface
- Running your first app
- Building layouts with storyboards
- Connecting UI elements to code
- Coding interactivity