UIScrollView in 30 Seconds

The UIScrollView control enables you to present more content than can appear on a single screen. Scrolling is a common approach to managing content overflow, typically when the amount of content far exceeds the view.

Scroll view controls are broken in to two parts:

  • The View Port
  • The Content Container

The View Port is the window through which you view the Content Container. In theory the Content Container can be infinite in size on any plane, be it horizontal, vertical, or both. When the Content Container is larger than the View Port scroll bars appear, which gives you access to all the content.

In UIKit the Scroll Viewer control is called UIScrollView. You use this control by adding UIScollView to any parent view, pinning all four sides of the View Port to the parent view; then, add a single child view—often best to use a UIView—to act as the Content Container. Set the constraints for the Content Control to be the same as the View Port, with additional constrains for equal heights and widths. This may seem a little counter intuitive. If all the constraints are the same as the parent how will the content scroll? The answer is to loosen one of the height, width or both constraints, to say 250 depending on which way you wish to scroll.

Now you can add your child content that you wish to scroll; again, this often makes sense to be a single view, such as a UIView or UIStackView etc. depending on your needs. Pin the edges of your content to the Content Container that need to remain fixed, and finally, add height and/or width constraints to the Content Container to match the child content in the dimensions you wish to scroll.

Let’s create an example to demonstrate how to set this up in Xcode by creating a scrolling UIStackView full of UILabel’s.

  1. Create a new single view project
  2. Open the main.storyboard file
  3. Add a UIScrollView to the View
  4. Add UIView to the UIScrollView, and name it “Content”
  5. Next add a vertical UIStackView to the Content UIView

You’ll have something that looks like this:

View Hierarchy

Next you need to add the constraints:

  1. Select the UIScrollView and add four constraints to pin the view to the top, trailing, bottom and leading edges to the View**.
  2. Select the Content UIView and add four constraints to pin the view to the top, trailing, bottom and leading edges to the super view.
  3. Add two more constrains to the Content UIView to make the height and width equal to the super view.
  4. As we wish to only scroll vertically in this example set the newly created height constraint to have a priority of 250.
  5. Select the UIStackView and add three constraints to pin the view to the top, trailing and leading edges to the super view. You are not pinning the bottom edge this time as you’ll want this to grow based on the content size.
  6. Add a final constraint to make the height of the Content UIView equal to the UIStackView

** NOTE: These constraints will be set against the Safe Area bounds, which is usally just fine. However, if you have a need to put the UIScrollView behind a UINavigationBar with translucency enabled, you may notice that the navigation bar is now opaque. While annoying and unintuitive this is easily remedied by making the Scroll View.top constraint equal to the super view and not the safe area, so the constraint reads something like Scroll View.top = top.

You’ll have something that looks like this:

Constraints

The final step is to add some content to the UIStackView:

  1. Add 8 UILabel controls to the UIStackView
  2. Add a height constraint of 200 to each label
  3. Alternate the colour of each label to make it easier for you to see the scrolling in action
  4. Run the project

All done, you’ll see something like this:

Scrolling

Designer, iOS/macOS Developer; rider of motorcycles

Designer, iOS/macOS Developer; rider of motorcycles