INTERFACE BUILDER AND UISCROLLVIEW — X — FILE

  • 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

SET UP THE PROJECT

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

INTRINSIC CONTENT SIZE

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

SETUP THE SCROLL VIEW

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() {
super.viewDidLoad()
fillStackView()
}
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

STICKY HEADER

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

RECAP

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

SOURCES

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