ViewController Containment with Subclassing - ios

Question

in an attempt to up my "getting away from massive view controllers" I am trying some stuff with view controller containment.
Here's what I want:
have a base class with a scroll view and an embedded stack view
inherit from that class with an implementation of my desired scene
being able to add child view controllers as needed to my implementation
I expect something like this:
Here's the code I am trying to achieve this with:
import UIKit
/**
Base class
*/
class PrototypeStackViewController: UIViewController {
private let scrollView: UIScrollView = {
let s = UIScrollView()
s.translatesAutoresizingMaskIntoConstraints = false
s.contentMode = .scaleToFill
return s
}()
private let stackView: UIStackView = {
let s = UIStackView()
s.translatesAutoresizingMaskIntoConstraints = false
s.axis = .vertical
s.alignment = .fill
s.distribution = .fill
s.contentMode = .scaleToFill
return s
}()
override func loadView() {
view = UIView()
view.backgroundColor = .systemGray
view.addSubview(scrollView)
scrollView.addSubview(stackView)
let nstraint = stackView.heightAnchor.constraint(equalTo: scrollView.frameLayoutGuide.heightAnchor)
stackViewHeightConstraint.priority = .defaultLow
NSLayoutConstraint.activate([
scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
stackViewHeightConstraint
])
}
override func viewDidLoad() {
super.viewDidLoad()
}
func add(child: UIViewController) {
addChild(child)
stackView.addArrangedSubview(child.view)
child.didMove(toParent: self)
}
func remove(child: UIViewController) {
guard child.parent != nil else { return }
child.willMove(toParent: nil)
stackView.removeArrangedSubview(child.view)
child.view.removeFromSuperview()
child.removeFromParent()
}
}
/**
Implementation of my scene
*/
class PrototypeContainmentViewController: PrototypeStackViewController {
lazy var topViewController: PrototypeSubViewController = {
let t = PrototypeSubViewController()
t.view.backgroundColor = .systemRed
t.label.text = "Top View Controller"
return t
}()
lazy var centerViewController: PrototypeSubViewController = {
let t = PrototypeSubViewController()
t.view.backgroundColor = .systemGreen
t.label.text = "Center View Controller"
return t
}()
lazy var bottomViewController: PrototypeSubViewController = {
let t = PrototypeSubViewController()
t.view.backgroundColor = .systemBlue
t.label.text = "Bottom View Controller"
return t
}()
override func loadView() {
super.loadView()
add(child: topViewController)
add(child: centerViewController)
add(child: bottomViewController)
}
override func viewDidLoad() {
super.viewDidLoad()
}
}
/**
Sample View Controller
*/
class PrototypeSubViewController: UIViewController {
lazy var label: UILabel = {
let l = UILabel()
l.translatesAutoresizingMaskIntoConstraints = false
return l
}()
override func loadView() {
view = UIView()
view.backgroundColor = .systemRed
view.addSubview(label)
NSLayoutConstraint.activate([
label.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 12),
label.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -12),
label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
}
override func viewDidLoad() {
super.viewDidLoad()
}
}
Here's what I get:
If you look close, you can even see the "Bottom View Controller" label – but on top the green center view controller.
I am missing something here in my love-hate-relation with auto layout, that much is for sure...

Answer 1

You are missing the width constraint that ensures that the stack view fills the width of the scroll view:
stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
Also I would set your label constraints in this way:
NSLayoutConstraint.activate([
label.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 12),
label.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -12),
label.top.constraint(equalTo: view.topAnchor),
label.bottomAnchor.constraint(equalTo: view.bottomAnchor),
])

Answer 2

Had to make some tweaks to make it work.
First of all, to span over the whole width, I was missing stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor), which Francesco Deliro correctly told me in the other answer.
Also, turns out I needed to change my stackViews distribution to .fillProportionally.
The code I was able to get what I showed on the question's picture is now this:
/**
Base Class
*/
class PrototypeStackViewController: UIViewController {
private let scrollView: UIScrollView = {
let s = UIScrollView()
s.translatesAutoresizingMaskIntoConstraints = false
s.contentMode = .scaleToFill
return s
}()
private let stackView: UIStackView = {
let s = UIStackView()
s.translatesAutoresizingMaskIntoConstraints = false
s.axis = .vertical
s.alignment = .fill
s.distribution = .fillProportionally //CHANGED to this
s.contentMode = .scaleToFill
return s
}()
override func loadView() {
view = UIView()
view.backgroundColor = .systemGray
view.addSubview(scrollView)
scrollView.addSubview(stackView)
NSLayoutConstraint.activate([
scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
//CHANGED set of constraints here, seems as though width and heigt anchors are needed
stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
stackView.heightAnchor.constraint(equalTo: scrollView.heightAnchor),
stackView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),
stackView.centerYAnchor.constraint(equalTo: scrollView.centerYAnchor)
])
}
override func viewDidLoad() {
super.viewDidLoad()
}
func add(child: UIViewController) {
addChild(child)
stackView.addArrangedSubview(child.view)
child.didMove(toParent: self)
}
func remove(child: UIViewController) {
guard child.parent != nil else { return }
child.willMove(toParent: nil)
stackView.removeArrangedSubview(child.view)
child.view.removeFromSuperview()
child.removeFromParent()
}
}
class PrototypeContainmentViewController: PrototypeStackViewController {
lazy var topViewController: PrototypeSubViewController = {
let t = PrototypeSubViewController()
t.view.backgroundColor = .systemRed
t.label.text = "Top View Controller"
return t
}()
lazy var centerViewController: PrototypeSubViewController = {
let t = PrototypeSubViewController()
t.view.backgroundColor = .systemGreen
t.label.text = "Center View Controller"
return t
}()
lazy var bottomViewController: PrototypeSubViewController = {
let t = PrototypeSubViewController()
t.view.backgroundColor = .systemBlue
t.label.text = "Bottom View Controller"
return t
}()
override func loadView() {
super.loadView()
add(child: topViewController)
add(child: centerViewController)
add(child: bottomViewController)
}
override func viewDidLoad() {
super.viewDidLoad()
}
}
class PrototypeSubViewController: UIViewController {
lazy var label: UILabel = {
let l = UILabel()
l.translatesAutoresizingMaskIntoConstraints = false
l.textAlignment = .center
return l
}()
override func loadView() {
view = UIView()
view.backgroundColor = .systemRed
view.addSubview(label)
NSLayoutConstraint.activate([
//CHANGED to this set of constraints
label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
}
override func viewDidLoad() {
super.viewDidLoad()
}
}
Hope that this answer will help future me and potentially others as well :-)