IOS swift scrollview programmatically - ios

Question

I am implementing a scrollview with multiple views in it programmatically. When I add subviews to it, they are not been displayed.

Answer 1

Here is a full example of adding 3 UIView subviews to a UIScrollView, using constraints to define the scroll view's .contentSize.
You can run this directly in a Playground page - including the ability to scroll:
import UIKit
import PlaygroundSupport
class TestViewController : UIViewController {
let redView: UIView = {
let v = UIView()
v.backgroundColor = .red
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
let greenView: UIView = {
let v = UIView()
v.backgroundColor = .green
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
let blueView: UIView = {
let v = UIView()
v.backgroundColor = .blue
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
let scrollView: UIScrollView = {
let v = UIScrollView()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .cyan
return v
}()
override func viewDidLoad() {
super.viewDidLoad()
// add the scroll view to self.view
self.view.addSubview(scrollView)
// constrain the scroll view to 8-pts on each side
scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 8.0).isActive = true
scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0).isActive = true
scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -8.0).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -8.0).isActive = true
// add three views to the scroll view
scrollView.addSubview(redView)
scrollView.addSubview(greenView)
scrollView.addSubview(blueView)
// give each view a height of 300
NSLayoutConstraint.activate([
redView.heightAnchor.constraint(equalToConstant: 300),
greenView.heightAnchor.constraint(equalToConstant: 300),
blueView.heightAnchor.constraint(equalToConstant: 300),
])
// give each view a width constraint equal to scrollView's width
NSLayoutConstraint.activate([
redView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
greenView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
blueView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
])
// constrain each view's leading and trailing to the scrollView
// this also defines the width of the scrollView's .contentSize
NSLayoutConstraint.activate([
redView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
greenView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
blueView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
redView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
greenView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
blueView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
])
// constrain redView's Top to scrollView's Top + 8-pts padding
// this also defines the Top of the scrollView's .contentSize
NSLayoutConstraint.activate([
redView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 8.0),
])
// constrain greenView's Top to redView's Bottom + 20-pts spacing
NSLayoutConstraint.activate([
greenView.topAnchor.constraint(equalTo: redView.bottomAnchor, constant: 20.0),
])
// constrain blueView's Top to greenView's Bottom + 20-pts spacing
NSLayoutConstraint.activate([
blueView.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: 20.0),
])
// constrain blueView's Bottom to scrollView's Bottom + 8-pts padding
// this also defines the Bottom / Height of the scrollView's .contentSize
// Note: it must be negative
NSLayoutConstraint.activate([
blueView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -8.0),
])
// result:
// scrollView's .contentSize.width is now
// scrollView's width (defined by subviews' leading and trailing anchors
//
// and scrollView's .contentSize.height is now
// redView-Height + 20-pts-spacing +
// greenView-Height + 20-pts-spacing +
// blueView-Height +
// 8-pts top-padding + 8-pts bottom-padding
// or 956
}
}
let vc = TestViewController()
vc.view.backgroundColor = .yellow
PlaygroundPage.current.liveView = vc