• how to setup a UIScrollView without showing errors in interface builder
  • differences between frame layout guide and content layout guide
  • definition and importance of the intrinsic content size
  • create a sticky header just by using interface builder
  • Beginner
  • basic knowledge on how to create constraints in interface builder
  • basic knowledge on how to create an app


Let’s make a UIScrollView inside a xib or a storyboard under this specifications:

  • Scroll view must scroll only vertically
  • The width of the content must be the same as the width of the scroll view (also to avoid horizontal scroll)
  • The content can change dynamically in its height and the scroll content must fit accordingly
UIScrollView creation
Setting up the scroll view


Why intrinsic content size is important and what is it in the first place?


So, if you want to do not set the height and/or width of the scrollable area but you want it to be configured on the actual content this concept becomes super important. I mean, don’t you find pretty ugly scroll views that make you scroll a lot but the content is just a tiny part just because their size it is hard coded?

Interface builder errors due to the fact that there is no content inside the scroll view
Creating content view constraints
  • Scroll view must scroll only vertical
  • The width of the content must be same as the scroll view
  • The vertical content must change dynamically and the scroll content must fit accordingly
Fixing content view width to be equal to scrollview width
Adding fixed height to the scroll view
Removing height constraint at runtime
  • Get a UIStackView
  • Add it as a subview of our content view
  • Set its constraints to fill the content view space
  • Go into out view controller class and create outlets for: scrollview, content view and stack view
extension String { 
static func random(length: UInt = 20) -> String {
let base = “abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789”
var randomString: String = “”
for _ in 0..<length {
let range: Range<UInt> = 0 ..< UInt(base.count)
let randomValue = UInt.random(in: range)
randomString += “\(base[base.index(base.startIndex, offsetBy: Int(randomValue))])”
return randomString
extension UIColor {
static var random: UIColor {
return UIColor(red: .random(in: 0…1),
green: .random(in: 0…1),
blue: .random(in: 0…1),
alpha: 1)
override func viewDidLoad() {
private func fillStackView() {
for index in 0 ..< Int.random(in: 15 … 90) {
let label = createLabel()
stackView.insertArrangedSubview(label, at: index)
private func createLabel() -> UILabel {
let label = UILabel()
label.numberOfLines = 0
label.text = String.random(length: UInt.random(in: 20 … 100))
label.backgroundColor = .random
return label
Each color represent a single UILabel


Back then, one of the most cool UI features were pinned headers inside a scrollview and I remeber it was not that simple to achieve that in interface builder. Using the new scroll view layout guide is super simple, let me show you.

Adding a padding between the content view(dark yellow)and the stack view(red)
Setting up the sticky header
Scrolling down: the sticky header (purple) stays in place
Scrolling up: the stickyheader stays pinned to the top and the content scrolls under it
Header at zero offset


So far you’ve seen:

  • Ho to create a UIScrollView in Interface builder
  • The ludicrous importance of the intrinsic content size
  • The separation between the content layout guide (the area where you will put your content) and the frame layout guide
  • How to create a simple sticky header by playing around with constraints


Apple documentation



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