UIStackView inside UIScrollView — UIKit

I guess you might be wondering how to auto-layout properly UIStackView inside UIScrollView, since you are reading this post.
The thing about auto-layout trick is to setup auto-layout properly, so the UIScrollView will not show horizontal or vertical scrolls when not needed and it’s content size will be set properly.
In this short tutorial I will show you how to build simple UI with use of:

  • UIStackView
  • UIScrollView
  • Programmatic Auto-Layout

Ok, first things first. We are going to build a version of the app where we want to have a proper horizontal scrolling of contents of the stack view. I assume you created a UIViewController and the view is ready to work on.
If not, you can try out by making a new starter project in Xcode – Single View app.
Ok, first step, let’s add a UIScrollView and UIStackView object declarations by this:

Ok, now let’s build two methods that will create subviews, add them to the hierarchy and setup layout.
We want also the StackView to have a 20 points layout margins on the leading and trailing side, by adding:

ok, to sum up, this part we should have something like this below.

We are adding here stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true to tell the UIScrollView how to calculate it’s content size for vertical scrolling only. See reference provided by Apple: https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithScrollViews.html

Ok, now let’s compile it and run!
Below is what you should get.

UIStackView Inside UIScrollView horizontal scroll issue.

To avoid this issue, we have to provide a new content view and then add our UIStackView into it.

Fixing the issue

First, create a new content view that will be holding the UIStackView

then, change the setupViews method to reflect adding the contentView into the scrollView and add stackView to contentView as a subview:

Now let’s update the setupLayout method to reflect the change in layouting.

Now we should get this fixed:

UIStackView Inside UIScrollView horizontal scroll issue fixed.

as you can see the margins now are correct and there is no possible scrolling, because the content does not need that!

Let’s try to add more labels by copying few more lines (just to fill empty space) in setupViews method:

and here’s the final result!

UIStackView Inside UIScrollView horizontal scroll issue fixed with more content.

If you would like to see the full and finished code go to my Github repository: https://github.com/piotrchojnowski/StackScrollView

Please visit also my personal blog, since part of article will be there exclusively: http://octotap.com/2019/08/03/uistackview-inside-uiscrollview/

Thanks for reading!



Experienced Swift, iOS Developer

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