Create a UIStackView in a UIScrollView

Stack views aren’t scrollable by default!

Image for post
Image for post
Photo by Tim Bogdanov on Unsplash

Difficulty: Beginner | Easy | Normal | Challenging

Prerequisites:

Terminology

Storyboard: A feature of Xcode that allows you to visually see the layout and relationship between elements of your App within the Xcode IDE

UIViewController: A view controller is an intermediary between the views it manages and the data of your app

UIScrollview: A view that allows the scrolling and zooming of the views contained within it

UIStackView: An interface for laying out a collection of views in either a column or a row

UIView: An object that manages the content for a rectangular area on the screen

Views: Presents information to the user. Views are, well, UIViews and their subclasses. Think of it as the UI components that have to be controlled by the controller

This is a step-by-step tutorial for creating a stackview that can be scrollable, using Swift and Xcode.

This tutorial is going to use the storyboard which

Create a new Single View App, by selecting File>New Project in Xcode (full guide)

Image for post
Image for post

Give the App A name. I wouldn’t recommend that you use “Steven Curtis” as your organisation unless your name is Steven Curtis. If it is, hello Steven. This is quite a coincidence.

Image for post
Image for post

You will be asked to select a location for your new project. Pick somewhere sensible (please).

You’ll then be put into a sensible place to start working!

Image for post
Image for post

on the left-hand side of the project navigator you can then select the storyboard. This is where most of today’s work will take place. Here we click “Main.storyboard”

Image for post
Image for post

You can now see the main view controller

Image for post
Image for post

At the top-right hand corner of the screen

Image for post
Image for post
Image for post
Image for post

Now the first thing that we are going to add into the view controller is a scrollview instance

I selected that from the objects, searching rather swiftly (that’s a joke, by the way) by searching for scroll. The first element can then be dragged into the view

Image for post
Image for post

It is best to drag the scrollview to the top-left hand corner. This allows us to see the blue layout guides to help it “clip in”

We then make the scrollview larger, again making it fit the layoutguides

Image for post
Image for post

Now we are going to pin the scrollview to the top, bottom, left and right of the superview

This is selected from the bottom-right hand corner

Image for post
Image for post

You have to make sure that the Scrollview is still selected, and then you have the following fantastic options:

Image for post
Image for post

You then click on each of the top, bottom, left and right to set each one to zero — this means it will be pinned to each side of the superview

Image for post
Image for post

We then add a stackview as a descendent of the scrollview. This is done in pretty much the same way as before, that is choose the object (I have searched for stackview)

Image for post
Image for post

Now you can choose either horizontal or vertical for your stackview (they are described with the diagram beside them).

Once again we can drag the object to the top-left hand corner of the superview, and then enlarge it.

Image for post
Image for post

we must make sure that the stackview is a descendent of the superview. This can be confirmed with (something like) the following setup

Image for post
Image for post

So we have errors!

Image for post
Image for post
Image for post
Image for post

as indicated by the rather upsetting red circle with a white arrow contained within it.

By clicking on the arrow we see two errors:

Image for post
Image for post

As you can see the scrollview claims that it does not know either the x position or the width. You might claim that it should be derived from the fact that it is pinned to the beginning and the end of the superview, but still :)

In fact, what we need to do is pin the stack view to the container scroll view. This is done much like as described in the procedure above for pinning the scroll view to the superview, it can be selected and the constraints added:

Image for post
Image for post

With 0 set for each constraint

Image for post
Image for post

But wait, there is a further complaint!

Image for post
Image for post

Upon investigation, the request is for the width and height

Image for post
Image for post

The width is no problem — the width of the stackview should be equal to the width of the scrollview.

To do this select the stackview

Image for post
Image for post

Then Control-drag to the scrollview and select Equal Widths

Image for post
Image for post

Now just the height to fix.

This is the easiest solution, but one that can involve a degree of head scratching if you are not aware of the way to solve it before hand.

The StackView does not have intrinsic height until something is placed inside it. Therefore the solution to this is to place something into the stackview. My choice? I’ve placed a UILabel there:

Image for post
Image for post

Job done! There are no errors and if you place something that is too large for the view (or rotate) there is no problem, the scrollview will simply scroll.

Wonderful!

Conclusion

This is one of those step-by-step tutorials that can take a while to go through, but once you realise that a stackview does not have an intrinsic height before things are placed within it everything becomes clearer.

I hope that helps!

I’d love to hear from you if you have questions, tips, errors in the code or anything else!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store