Can you add a UIView to a UIStackview? - ios

Question

I have an HStack of content like title, description, etc. Then I have some rectangles I want to add to the UIStackView programatically. But they do not appear.
In Playground in Swift 4
It works when appended to the overall view:
import UIKit
import PlaygroundSupport
class MyViewController : UIViewController {
override func loadView() {
let view = UIView()
view.backgroundColor = .white
self.view = view
// Add rects
let rectFrame: CGRect = CGRect(x:0, y:0, width:100, height:16)
let stepRect = UIView(frame: rectFrame)
stepRect.backgroundColor = UIColor.darkGray
let rectFrame2: CGRect = CGRect(x:50, y:16, width:100, height:16)
let stepRect2 = UIView(frame: rectFrame2)
stepRect2.backgroundColor = UIColor.red
self.view.addSubview(stepRect)
self.view.addSubview(stepRect2)
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
This returns a white screen with two rectangles, one gray and one red, stacked on top of each other with some offset.
But is not working when appended to a UIStackView:
import UIKit
import PlaygroundSupport
class MyViewController : UIViewController {
override func loadView() {
let view = UIView()
view.backgroundColor = .white
self.view = view
// Make vstack
let vStack = UIStackView()
vStack.axis = .vertical
vStack.frame = CGRect(x: 0, y: 0, width: 300, height: 20)
// Add rects
let rectFrame: CGRect = CGRect(x:0, y:0, width:100, height:16)
let stepRect = UIView(frame: rectFrame)
stepRect.backgroundColor = UIColor.darkGray
let rectFrame2: CGRect = CGRect(x:50, y:16, width:100, height:16)
let stepRect2 = UIView(frame: rectFrame2)
stepRect2.backgroundColor = UIColor.red
vStack.addArrangedSubview(stepRect)
vStack.addArrangedSubview(stepRect2)
view.addSubview(vStack)
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
This returns a white screen.

Answer 1

Yes, you can “add a UIView to a UIStackView.
But the whole point of a stack view is to let the placement of these “arranged” subviews. One supplies a distribution of the subviews (defaults to .fill) and an alignment of the subviews (again, defaults to .fill).
But you have specified ambiguous frames for the stack view and its subviews (which don’t happen to have any intrinsic size). Also, the notion of different x coordinates in a vertical stack view doesn't really make sense, either, as the alignment dictates the placement. If you run this in an actual app and then use the “view debugger”, it will report this ambiguity:
Unfortunately, playgrounds don't supply this sorts of diagnostic.
So, if using stack views, you either supply views with intrinsic sizes and let the stack view dictate the size and placement, or define supply the stack view subviews with size constraints and then ask it to manage the spacing between them (by using distribution of .equalSpacing or .equalCentering).
And if you really want to set the x and y values for your views manually, then it doesn't make sense to use a stack view at all.
A few examples: Perhaps you want define the two subviews to have the same size as each other, spaced 10 pt apart, for a total height of 50 pt:
let stackView = UIStackView(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
stackView.axis = .vertical
stackView.distribution = .fillEqually
stackView.alignment = .fill
stackView.spacing = 10
Or perhaps you want your two subviews of specific size spaced within this 50 pt tall stack view:
let stackView = UIStackView(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
stackView.axis = .vertical
stackView.distribution = .equalSpacing
stackView.alignment = .center
let grayView = UIView()
grayView.translatesAutoresizingMaskIntoConstraints = false
grayView.backgroundColor = .darkGray
let redView = UIView()
redView.translatesAutoresizingMaskIntoConstraints = false
redView.backgroundColor = .red
stackView.addArrangedSubview(grayView)
stackView.addArrangedSubview(redView)
view.addSubview(stackView)
NSLayoutConstraint.activate([
redView.widthAnchor.constraint(equalToConstant: 100),
redView.heightAnchor.constraint(equalToConstant: 16),
grayView.widthAnchor.constraint(equalToConstant: 100),
grayView.heightAnchor.constraint(equalToConstant: 16)
])
There are lots of other examples we could give you, but, in short, it simply doesn’t make sense to set frames of stack view and arranged subviews (esp with different x values) and hoping that the stack view will be able to reconcile this solely with with .fill distribution.

Answer 2

From Apple's UIStackView documentation:
For all distributions except the UIStackView.Distribution.fillEqually
distribution, the stack view uses each arranged view’s
intrinsicContentSize property when calculating its size along the
stack’s axis. UIStackView.Distribution.fillEqually resizes all the
arranged views so they are the same size, filling the stack view along
its axis. If possible, the stack view stretches all the arranged views
to match the view with the longest intrinsic size along the stack’s
axis.
Your UIViews have no content and so when the stack views lay them out it will not see any intrinsicContentSize it needs to preserve. To see a different behavior that shows how a stack view handles its arranged subviews, try putting non-empty text views or image views in the stack. You can also try setting
vStack.distribution = .fillEqually
If you want to be able to have a generic UIView hold the size you set, one way is to create your own minimal subclass of UIView and override its intrinsicContentSize property, returning the view's self.bounds.size