INTERFACE BUILDER AND UISCROLLVIEW — X — FILE

SET UP THE PROJECT

UIScrollView creation
Setting up the scroll view

INTRINSIC CONTENT SIZE

The natural size for the receiving view, considering only properties of the view itself.

SETUP THE SCROLL VIEW

Interface builder errors due to the fact that there is no content inside the scroll view
Creating content view constraints
Fixing content view width to be equal to scrollview width
Adding fixed height to the scroll view
Removing height constraint at runtime
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

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

SOURCES

--

--

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