UIScrollViews In Storyboards

Setting up scrollview in IB with pure auto layout seems a complex task. We often end up with constraints warnings and errors. Here is a tutorial that might help you avoid such potholes.

What we will be doing?

Creating a vertical scrollable scroll view(marked yellow) that would contain a content view(marked blue). This content view will hold our UILabel for title, UIImageView for image and another UILabel for description text(violet)

Lets Begin

Create a new project with Single View Application template.

The Scroll View

Open main.storyboard, drag a UIScrollView from the object library and put it on the view of the only scene (View Controller Scene).

Pin the edges of the scrollview to the superview with zero spacing.

Select the Scroll View and update its frame using shortcut ‘option’+’command’+’=’.

The Content View

Now drag a UIView from object library and place it inside the scroll view. In document outline rename this view to Content View. This view will hold our content items.

Pin the edges of the Content View the superview with zero spacing.

You might have noticed two errors, in the document outline, stating ambiguous scrollable height and ambiguous scrollable width.

Scroll view expects its content view to be properly pinned from all sides and define it own height and width.

We have pinned the sides but our content view does not define its own heigh and width. Generally, one of the dimension is equals to the scroll views same dimension. In our case the width of the content is equal to the width of the scroll view. So lets put equal width constraint between the content view and scroll view. Control drag from the content view to scroll view, and select equal widths.

One might notice that error stating ambiguous width is resolved. That leaves us with one that pertains to the height.

Now how will our content view get its height? Obviously from its content items(i.e the title image and description views). But as of now we can silence this error by putting a dummy constraint that equates the content views height to be some multiplier(twice in my case) of scroll views height. We will later remove this constraints once the content view gets its height from content items.

To put the dummy height constraint control drag from content view to scrollview and select equal heights. Then select the newly created constraint and in attributes inspector, change the multiplier to ‘2’. Update the content view frames. Now contents view size inspector shows its height as 1160 i.e twice of 580 (this might vary due to the size of the view controller scene, but the multiplier would be 2)

Tip: To make the complete content view visible, one can change the simulated size of the scene. This would help us on constraining content items and well as visualising the complete scroll view content view.

To make the full content view visible, change the simulated size of the scene to 1160 or more.

Select the View Controller from document outline, in size inspector change simulated size from fixed to freeform and then set the desired height.

Now we will start placing our content items.

The Content Subviews

First the title. Drag a UILabel from object library and drop it on the content view. Rename it in document outline as Title Label. Pin its top leading and trailing with ‘standard’ spacing. Update its frame.

Drag drop a UIImageView from object library, below the title label. Control drag from the image view to title label and set vertical spacing. Pin this image views Leading Trailing space tot superview, also pin it height to some constant (200).

Note: Just for simplicity we are pining the height of image view. Image view gets its height from the image being displayed.

Similarly drag drop a UILabel, our last content item, and put it below the Image View. For this to be multiline set number of lines to 0.

Pin vertical spacing between this label and image view. Also pin image views leading and trailing spaces to superview.

Now we need just one more constraint so that content view can get its height from its content items. This constraint is bottom space between our last label’s bottom and its superview (Content View) bottom.

For this constraint control drag from the description label to the content view and pin the bottom. We need to change the constant of this constraint to some standard spacing like 20 points.

Just after the changing the constant value of our last constraint we see some errors in document outline. This is because, the content view is getting height from two sources.

  1. Our dummy height constraint.
  2. From its subviews i.e. content items.

So now its the right time to remove the dummy constraint. Put some random title, image and some long text in the description label. Update the misplaced views, and test you scroll view.

So we got scroll views without a single line of code.