If you haven't looked at the Xcode 10 beta yet, here's the two big changes you'll be seeing in the storyboard. Learn how to quickly make a scroll view completely in storyboards.
- [Instructor] There's been a few changes in the storyboard in Xcode 10. Some might drive you crazy if you don't know how to use them. Some are really cool and will speed up your workflow. Let me show you the two major changes and what they can do. Now I'm using a beta four version of Xcode 10 here. As I'm using a beta, be aware changes from what I'm telling you might happen, but this is gonna give you the basic idea. Download the starter file, which is a blank project with a few media files and colors in the assets folder.
Check a previous tip to learn more about the assets folder. Head into the storyboard, and when you see the storyboard, you'll see the library is missing in the bottom here. Instead, we've got a button on the top. Hold down that button and you'll see that you've got two libraries. An objects library and a media library. I'll select the show media library and the library appears. And you could see in here, that I can scroll down and I've got all the different stuff from the assets folder showing up here.
I can search on the top here. So if I'm looking for my turkey and brie sandwich, I can just type brie and it'll find the turkey and brie sandwich. And if I want to end that selection, I can do the X on the side here. You'll also notice a little icon, which is to switch to icon view. So if you don't want the names and you just wanna see stuff, you can do it this way. Now I have a icon here for pizza. We should see down here, the pizza and parm. I can just drag that onto my storyboard, like so.
You'll notice that the library disappears. If you click the library again, you'll get the objects window. Again, if you push and click anywhere outside that, it's gonna disappear, or if you drag something. If you want to keep it up, for example, you're dragging a lot of objects in, hold down the option key and select the library and it'll stay in place. Now I'm gonna put a label, and I'm gonna drag that in. I'm also gonna drag a button, and for that, I'm gonna actually click over here to the icon so I can see them all clearly, and I'm just gonna drag the button down, like so.
And now I'm done with this, I can click up here or I can click the X over here. I'm just gonna click over here. And I'm just gonna make these a little fancier. Go over to properties for the label and you'll see the real big difference here. Now that we don't have a library down here, we can see the entire attributes or a lot more of the attributes. Particularly view here, so I can do some things that I haven't been able to do before. I click the background here, and I'm gonna pick a red color for the background for this.
And I'm gonna pick Caribbean green here for the color for my label, and I can change my label a little bit. Let's just do a custom marker felt, wide, 84 points, just to make this nice and big. 'Kay. And I'm gonna change this to I love pizza.
And it's moving off the side here, but that's okay. We're gonna do something in a minute to deal with that. I'm just gonna make the button big too. I'm gonna change this to 72 points. Change the button name to pizza, and jump down here in my background, and I'll give myself green background with a text color of baby powder, there.
That looks good, all right. So we've got some buttons here, and I've put them over the side here, and you will see over here that Xcode is complaining. And we've got some localization issues that say it doesn't have any layout constraints. It's now gonna start complaining about that in Xcode 10 that you are, don't have any layout constraints. I'm gonna select all three of these. Now before Xcode 10, you'll notice down here, we have the stack view button. That's been replaced with the embed in button, and that lets you do a whole bunch of different kinds of embed, including stack views.
So I'm gonna go ahead and do the stack view one, and that gets me a vertical stack view, and then what I'm gonna do with the stack view is I'm gonna embed that in another one I can do here, which is a scroll view. So I can click that again and get inside with the scroll view, and you'll see over here in the outline that I got my stack view is embedded in the scroll view. You'll also see that this is complaining like crazy here about your auto layout. And this is important, was the content size ambiguity.
A scroll view has to have at least one and its best one, scroll view, in order to work properly. And if you don't have that right, it's gonna say content size ambiguity because it doesn't know how big that scroll is. So what we're gonna do is do a couple of changes here with auto layout. I'm gonna start with the scroll view here, and I'm gonna pin that to the outside to my view here, and I'm gonna do five for all of these.
'Kay, tab and add four constraints. And that adds my scroll view into place, and then we go into my stack view and I'm gonna pin that. Now you're gonna be pinning the stack view as your individual view inside the scroll view, so here's a little trick to do. I'm gonna pin this at the upper left corner, zero, zero, and then I have to be over the edge a little bit in order for the scroll view to work. So that's gonna be a negative value for the pin, so I'm gonna do negative five here for the right or the trailing, and negative five here for the bottom.
And then I'm gonna add the four constraints. And that satisfies the constraints and that gives you a fast scroll view which you can do with like, a few clicks to get one into your app. You can also embed navigation controllers and tab bar controllers right here. I'm gonna click on the view controller here. Go back down to embed, and I just have to click navigation controller here, and I've got a navigation controller set up. Let me zoom out a little bit. I'll move this over for a moment so you can see better.
And you can see, there's our navigation controller. I can scoot this down. There we go. And then I can just add another view controller in here, which is on my library. I can do a control drag for my pizza to hook it back up. I'll pop up the properties here, click on this view controller, change my views background to, let's say, bedazzled blue, and now I have a navigation controller here.
I can go ahead and run this, and I'm gonna run this on an iPhone 8 and run, and I'll wait for my iPhone to show up, and as you see, I've got a scroll view here. I hit the pizza button, and there's my navigation controller. Your workflow will change with these two buttons in Xcode 10 storyboard. You can get quick scroll views for static content and you can reach everything a lot easier.