Practice English Speaking&Listening with: Laying Out a UIScrollView in Interface Builder

Normal
(0)
Difficulty: 0

Hi. My name's Rob, and in this screencast,

I'm going to show you how to lay out a UIScrollView in Interface Builder.

In this app, I have a contact info form that's too tall to fit on the screen, so it scrolls.

And if I rotate the interface, the text fields stretch,

and the button stays centered, and it still scrolls properly.

Let's get started by creating a new project.

We'll use the Single-View Application template, and name itScroll Demo”.

For this project, I'm not going to use storyboards, but I'll show you later what's different in a storyboard.

Now let's open the XIB,

put away the project navigator,

open the File Inspector, and turn off auto layout.

I'll show you later what to change to support auto layout, but we'll start out with the old springs and struts layout system first.

Now let's start laying out our form. Let's add a text field for first name,

and give it a label,

and resize the text field,

and set the autoresizing so the text field will stretch in landscape orientation.

Then we add another field for last name,

and a label,

and so on.

And now we've run out of room, but we still have more fields to add.

So we need to put all of this in a scroll view.

Well, that's easy. We just select all of those fields,

then go to the editor menu, and chooseEmbed In > Scroll View”.

Hi. My name's Rob, and in this screencast, then go to the editor menu, and chooseEmbed In > Scroll View”.

Hi. My name's Rob, and in this screencast,

But that doesn't solve the problem, because the scroll view's not any bigger.

The trick is to make both the top-level view and the scroll view bigger.

Let's select the top-level view.

If we hold the Control key and the Shift key and click,

or, if we hold the Shift key and right-click,

we get this pop-up menu of everything under the mouse pointer.

Let's choose the top-level view.

To make it bigger, we go to the Attributes Inspector

and look under the Simulated Metrics section.

See this pop-up menu labeled "Size"?

Set it to "Freeform".

Now we can make the top-level view bigger.

Let's drag it out to give ourselves plenty of room to work.

Oops! The scroll view didn't track the resize.

Let's resize the scroll view, too,

then fix the scroll view's auto resizing in the Size Inspector.

We want to pin it to all four edges, and let it stretch in both directions.

Now we can add the rest of our form fields

and finish with a button at the bottom.

Let's set the button's auto resizing to keep it centered.

Let's try running this in the simulator now.

The form fields have been resized correctly for the width of the screen,

but there's no scrolling yet.

The problem is that we haven't set the content size of the scroll view.

Let's go back to Xcode and fix that.

I like to set up my scroll view with a single content view,

and put everything in that content view.

So let's select all of these subviews,

go to the Editor menu, and choose "Embed In > View".

And let's change the label of the new view to "Content View".

We'll use the size of the content view to set the content size of the scroll view.

So we need to make sure the bottom edge of the content view is just under the button.

And we need to go to the Size Inspector and set its springs and struts.

We want it to stretch horizontally but not vertically.

Now let's put away the inspectors and show the Assistant Editor.

In the Assistant Editor, let's bring up ViewController.m.

We need to add two outlets:

we need an outlet for the scroll view,

and we need an outlet for the content view.

We'll set the scroll view's content size in the "viewDidLayoutSubviews" method.

First, we need to make sure the scroll view's subviews have been laid out,

so we'll send "layoutIfNeeded" to the scroll view.

Then we can set the scroll view's content size to the content view's bounds size.

Let's run it now.

It works! We have scrolling, and it stops in the right place.

If we rotate, everything resizes properly and it still scrolls.

Now, you might be wondering what happens

if you have other stuff besides a scroll view on the screen.

Let's modify the demo to add something else.

Let's put a toolbar at the bottom.

We don't want the tool bar to be inside the scroll view,

so let's make the scroll view a little shorter to make room.

Now we can find the toolbar in the Object Library and drag it into the top-level view.

Then we pull the bottom edge of the scroll view back down flush against the toolbar.

Let's add a flexible space to the toolbar,

and another button,

and change the names of these buttons.

Now we'll run it again.

And we can see that the toolbar also got resized properly,

and it fits right in landscape too,

and the scroll view still scrolls right.

Now let's up the ante.

Let's go back to the project and add some more items to the toolbar.

A whole bunch more items.

There's no way all of these items will fit on the screen.

Let's flagrantly violate the human interface guidelines by making the toolbar scroll.

So we select the toolbar,

go back to the Editor menu,

and choose Embed In > Scroll View.

We need to set the scroll view's auto resizing in the Size Inspector.

We want to pin it to the left, bottom, and right edges,

and let it stretch horizontally.

And we need to set the auto resizing of the toolbar, too.

We want it to NOT stretch.

And then we should resize it to fit the buttons.

Next, we hide the inspector,

open the Assistant Editor,

and go to ViewController.m.

We hook up an outlet for the toolbar scroll view,

and we hook up an outlet for the toolbar itself.

Then, we go to "viewDidLayoutSubviews",

send "layoutIfNeeded" to the toolbar scroll view,

and then set its content size to the toolbar's bounds size.

Now if we run this, we can scroll the toolbar,

and we can still scroll the form.

Everything still works in landscape, too.

Pretty neat!

We do have one little nitpick.

That gray background shows up when we bounce the scroll views.

Let's go back to Xcode and get rid of those.

For the form scroll view, we can just set its background color to white.

But the background of the toolbar, before iOS 7, is a gradient.

The easiest way to handle this is just

move the toolbar and its scroll view out of the way for a moment.

Then, bring out the inspector,

go to the Object Library, and drag out another toolbar.

Put this one at the bottom of the screen.

Delete its default item.

Then, go to the Editor menu and choose Arrange > Send to Back.

Then, move the scroll view back on top of the new toolbar.

Let's run it again.

Now when we scroll the toolbar past the edge,

the empty toolbar behind it shows through

and it looks like we're just moving the buttons.

Neat!

Now let's talk about what changes if you're using a storyboard.

The answer is... not much.

Here's a project with a storyboard.

The first difference is the simulated metrics aren't attached to the view anymore.

Now they're attached to the view controller.

So to resize this view, we have to select the view controller.

Then we can go to the attributes inspector

and there's the Size pop-up and we can change it to "Freeform" again.

The other difference is there's no frame around the top-level view that we can use to resize it.

We have to select the view,

go to the Size Inspector,

and change the numbers in the width and height boxes.

So it's a little more painful,

but you just have to make it at least as big as your content.

You don't have to make it exactly the right size.

You can make it too big and leave it that way.

Last, let's talk about what's different with auto layout.

The difference with auto layout is that you don't have to set the content size.

Auto layout knows about scroll views.

It knows that a scroll view has a content size, Auto layout knows about scroll views.

It knows that a scroll view has a content size,

and it will set the content size

based on the constraints between the scroll view and its subviews.

So we have to make sure those constraints do what we want.

Here's a project with a scroll view.

If we select the content view, we can see that there's a constraint

between the bottom edge of the content view and the bottom edge of the scroll view.

Let's run the project like this.

When we scroll down, we can see extra space under the button.

That space is the size of the constraint we looked at.

To get rid of that space, we need the constraint to be length zero.

Let's go back to Xcode.

Instead of trying to fix the constraint in Interface Builder,

we'll fix it in code.

Let's bring up the Assistant Editor and go to ViewController.m.

Then we select that constraint in the xib

and connect it to a new outlet in the view controller.

In "viewDidLoad", we just set the constraint's constant to zero.

That tells the scroll view that it should only scroll to the bottom edge of the content view.

Let's run the project again.

Now it stops scrolling where it should,

Wrapping up, here are the steps involved when we're using springs and struts.

Here are the steps involved when using auto layout.

If you need more help getting your scroll view working with auto layout,

check out this tech note.

If you need more help after that,

go to stack overflow and post a question.

And here are some links to other things I've done,

and ways to contact me.

That's all I have to show you in this screencast.

Good luck!

The Description of Laying Out a UIScrollView in Interface Builder