Scrolling in a horizontal UIStackView with Storyboard

Image courtesy: pinterest.com (from google search)

Since the release of UIStackView , it has become an extensively used UI element across the iOS developers. It reduces our heavy duty on setting a ton of constraints manually. Although it provides flexibility in most of the cases, it doesn’t provide the scrolling behavior that most of us wish to have.

Last time, I had a requirement where I needed to use a stack view with horizontal scrolling on it. I googled a lot and found many resources. But most of them were done from the code side. I also found some that were done in the storyboard. You can find some suggestions in this SO Post.

Yes I could think of doing it programmatically. But I won’t. Because I’m not a good programmer 😜. I like to design in the storyboard.

But after trying the ones with storyboard I just failed. Sometimes the constraints aren’t satisfied. Even if the constraints are satisfied, the scrolling doesn’t work. So I end up with my solution. If you need to learn how I did this, take your time to read the entire.

Let’s see first what we are going to accomplish:

Horizontal Scrolling in Stack View with Storyboard

We will design this from storyboard. We will need a UIScrollView and a UIStackView as the sub view of the scroll view. We will not create any static UI content for feeding the stack view. Rather we will fill the stack view with such views that are capable of having dynamic sizes themselves. So I’ll not demonstrate how to create the inner view (purple colored) as dynamically sized, but you can have a look at the source. Enough said! Let’s dive into building the above.

Drag a scroll view from the object library to the view controller scene. Give it some constraint.

Scroll view’s constraints with the super view

I put the leading & trailing to match the super view’s edge. Put it in the vertically centered position and gave a height constraint. Doing so, satisfies all the required constraints. You can position this scrollview as your need obviously.

Now, drag a horizontal stack view from the library to the scroll view. Use the properties for the stack view as below:

Pin it’s edges to its super view (scroll view). I like to keep a decent gap at the leading and trailing. So I set them at 10 pts.

Stack view’s constraints with scroll view

But wait, what? 🙄🙄

Unsatisfiable/Missing constraints of scroll view

What just happened? 😕 I added the leading & trailing constraints and aligned the scroll view with the center Y of the superview. Also gave a height constraint in the first place. But why is this complaining after all?

Here the culprit is contentView of the UIScrollView . From the apple doc:

The scroll view must know the size of the content view so it knows when to stop scrolling

So, how do I specify the size of the content view in advance? Yes you can. Because here the content view is your stack view. You can simply control+click+drag from the stack view to the scroll view in the document outline and by pressing shift key you can select Equal Widths & Equal Heights:

control+click+drag from stack view to scroll view

Setting equal widths & heights keeping shift key pressed and then pressing enter key

Doing this will eliminate the storyboard error. See:

Storyboard’s complain gone

(I used -20 for the equal width’s constant as I previously set the leading & trailing edge 10 pts from the super view edge so that total width matches up)

But… We have done something wrong. Let’s see what could be the wrong first in the output:

Broken content inside the stack view

As soon as we specify the width & height both of the content view, we are losing the scrolling behavior of the scroll view. And as a bonus, the whole content view is now contained only in the viewable region of the scroll view. It doesn’t expand beyond the screen edge. You can read it here on no. 5 & 6 points. Then do the below:

• We need the horizontal scrolling, right? So we don’t need the Equal Widths constraint. Delete it.
• But keep the Equal Heights constraint as we will restrict the vertical scrolling of the stack view.

But deleting the equal widths constraint, brought back the previous missing constraint error in the storyboard. What can we do? Let me think…. 🤔🤔

Okay, do one more thing. Select the stack view from document outline and add an alignment constraint as Horizontally in Container. But only doing this again won’t solve the problem that happened last time when we tried with equal widths constraint. You need to explicitly make this constraint as Remove at build time. Because we don’t need this constraint actually, but to make xcode happy to stop showing the error in the document outline. Keep in mind that, this is a must step:

Horizontal alignment constraint

Setting constraint as Remove at build time

So we are done setting up the scroll view and the stack view. It’s all we needed to make the stack view horizontally scrollable.

Now it’s time to fill the stack view with actual view components. For this, add an IBOutlet of the stack view to your view controller. We will add some views to the stack view through this outlet.

This will produce output as:

Besides this, you can specify these subviews’ width also. As my inner view is capable of having dynamic width/height I can restrict them and have more appealing look:

Final version of horizontally scrollable stack view

You can find the complete implementation of this part here. You can also take a look on how I setup the inner views of the stack view with custom .xib file.

The demonstration above doesn’t apply only to horizontally scrollable stack view. Same approach can be applied to make a vertically scrollable stack view too. You just need to alter some constraints, that’s it.

Hope you find this helpful!