Note: You can also watch a video of this lesson at Lynda. com and LinkedInLearning. 

There’s been a few changes  to the storyboard in Xcode 10, some might just 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.

I wrote this using the Beta 6 version  of Xcode 10. As I’m using betas, be aware changes from what I’m telling you might happen, but this will give you the basic idea, and I haven’t seen any changes in the app I developed in beta 6. 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.

A Freed Library to Roam

When you look at the storyboard you’ll see the library missing from the bottom left where it has always been. There’s now a libraries button at the top right.

Hold it down and you can select between the Object Library and the Media Library.

I’ll select the Show Media Library, and you’ll see the assets I have added to this project.

 

At the top is a larger search box, which I’ll type brie.

You can clear the choice by pressing the X.  There’s also an icon view, if you want to see only the icon and not the name. Click the icon at the upper right corner to toggle between list and icon view.

I can just drag an asset directly to the storyboard, so I’ll drag the pizza. Once you use the library it disappears. Click it once and it will give you the object library. If you want to keep it around, press the key while clicking.

I’ll drag a label out. Click the properties icon and you’ll see the joy of this new library. You have a lot more room for attributes. I’ll change the background color and the text color of the label. Not so much scrolling.  I’ll say “I Love Pizza” On the label, and set the font to Marker Felt84 points.  That goes off the iPhone 8 here, but I’ll come back to that.

I’ll also add a button here. I’ll do that in list view, I’ll click the list view icon, and type butto in the search. There the button and I’ll drag it in, change a few colors and make a 72 pointfont.

You’ll see there are layout errors, and if you click on the icon, it complains that there are no constraints. Xcode 10 asks you to always add constraints. I’ll do this the easy way and make a stack view.

One Button to Embed them All

Stack views bring us to the other button change. The stackview button of earlier versions of Xcode has been replaced with an Embed button. I’ll marquee select the three objects I have and click the Embed button. You’ll see several choices.

All types of embedding of views and view controllers are here. No more searching through menus to find the one you want. This button is contextual and will activate the ones that work for the situation.

Simple Scroll Views in a few clicks

This time,  I’ll pick the StackView. A vertical stack view appears. This goes off the screen so, I’ll embed it in a scroll view by selecting  the scroll view.

Autolayout starts complaining we are missing constraints.

The important one for scroll views is the Scrollable Content Size Ambiguity. If you embed to scroll views, make sure you embed a single view into the scroll view and set its size. I used the single stack view here, but if you had some buttons you’s make a UIView, set the size of that, and then add the buttons to the UIVIew. I’ll use some quick auto layout to resolve the error.  Click the Scroll view and pin it 10 points from each edge.

 

Now here’s the important point for a scroll view: click the container view, in this case the stack view. I’ll pin to 0,0 in the upper left, but leave extra space below and to the right with a negative value for the pin. Say -5 and -5.

That gives you a fast scroll view.

Embed ViewControllers

You can also embed navigation controllers and tab bar controllers right here. Click on the view controller icon,  and in the embed button, select Navigation controller. Zoom out a little and you’ll se our navigation controller. I can also add  a Navigation controller from the library by dragging out.  I’ll change the background color.  I’ll connect the controllers via  the pizza button with a control drag. Build and Run.

When the simulator shows, you can drag the scroll view. Click the pizza button and the view controller transitions. Click back.

Your workflow will change with these two buttons in Xcode 10 Storyboard. You can get quick scroll views for static content and reach everything a lot easier.

Note: You can also watch a video of this lesson at Lynda. com and LinkedInLearning.