Scroll View in 12 Easy Steps.

Photo by Taylor Wilcox on Unsplash

A benefit of working with UITableViewControllers is the built-in ability to scroll when the content is longer than the screen. Sadly, this functionality doesn’t come standard for all Views. This is where Scroll View comes in to save the day. Unfortunately, it’s not as simple as just dragging a Scroll View onto your View Controller. There are a few more steps involved to get it working. I’ve broken it out into 12 easy steps to get your Scroll View up and scrolling!

  1. First up, add a Scroll View to your View Controller.
  2. Drag the four corners to the edges of the view.
  3. Add new constraints setting each to 0 as shown below. Make sure Constrain to Margins is unchecked.
Add ScrollView and set contraints to 0.

Don’t fret when the lines around your view controller turn red, we are just getting started.

4. Add a Vertical Stack View inside the Scroll View.

5. Drag the four corners to the edges of the View Controller.

The beauty of a stack view is that if a height and width aren’t set, its size is based on its subviews so it will expand or contract to fit the content inside.

6. Hold down control and click on Stack View and drag to Content Layout Guide. When the menu pops up, hold down shift and click on Leading Space, Top Space, Trailing Space and Bottom Space to Content Layout Guide.

7. Just below the Stack View, click on Constraints to make sure the four constraints are set to 0. For some reason, some of the constraints sometimes get set to something other than 0. Click on on them and in the Size Inspector and change the Constant to 0.

8. Next, hold down control and click on Stack View and drag to Frame Layout Guide and select Equal Widths.

** Content Layout Guide and Frame Layout Guide are new in Xcode 11.

We are almost there!

9. Click on View Controller and go to the Size Inspector to change the Simulated Size from Fixed to Freeform and put in a height of 1000.

This will make your view controller longer in the storyboard so you can add your content that would normally be cut off it was longer than the actual screen size.

10. Add a UIView inside the Stack View.

11. Drag the edges out to fit the view controller.

12. Set the constraints to 0 on all sides and add a height of 1000.

** The height size of 1000 is not set in stone. You can set the height of your View and the View Controller’s Simulated Size from step 9 to fit your content.

All the layout issue warnings and errors will disappear and you are ready to add your content to the View.

Happy scrolling!

--

--

--

Web / iOS Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Reactive Programming Made Simple Part 3

Denver swimming pool contractor

Building ghostgame.io — A multiplayer word game

Back-end system design

Restarting HTTPD Service is not Idempotence in nature and also consume more resources suggest a…

Java program for command line argument

My Ferrum Story — An illustration of Success

The Cronic Dashboard

Blank Wallet Development Update #3

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
Kelly O’

Kelly O’

Web / iOS Developer

More from Medium

Mutating Functions In Swift

File uploads with Swift

My Swift Studying Notes

iOS Fundamentals — iOS Tour Part 4(Function and Closures)