UIStackView: consistent height based on all subviews even if they are missing - swift

Question

I've got a StackView with two labels as the arrangedSubviews. I want the StackView to be always the height of those two labels (including DynamicType changes), even if one of the labels text it nil or empty (which normally changes the stack views height to the height of that single label).
I tried to sketch the problem, in hope that I find a great solution. (I cannot simply put a height constraint to the stack view, because dynamicType changes the height of the labels).

Answer 1

I don't think you want to try to use a stack view for this.
Instead, create a custom UIView, with three labels:
Top label
Top constrained to the view Top
Bottom label
Top constrained to the bottom of the Top label (with desired space)
Bottom constrained to the view Bottom
Center label
constrained centerY to the view
Then:
If both labels have text
show them and hide the center label
If only one label has text
give them both " " as text
hide them both
show the center label
set the center label's text and font to the respective top or bottom label
Here's an example:
Custom View
class WalterView: UIView {
let labelA = UILabel()
let labelB = UILabel()
let labelC = UILabel()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
for (v, c) in zip([labelA, labelB, labelC], [UIColor.cyan, UIColor.green, UIColor.yellow]) {
addSubview(v)
v.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
v.leadingAnchor.constraint(equalTo: leadingAnchor),
v.trailingAnchor.constraint(equalTo: trailingAnchor),
])
v.backgroundColor = c
v.textAlignment = .center
}
NSLayoutConstraint.activate([
labelA.topAnchor.constraint(equalTo: topAnchor),
labelB.topAnchor.constraint(equalTo: labelA.bottomAnchor, constant: 8.0),
labelB.bottomAnchor.constraint(equalTo: bottomAnchor),
labelC.centerYAnchor.constraint(equalTo: centerYAnchor),
])
labelA.text = " "
labelB.text = " "
labelC.isHidden = true
// set fonts as desired
labelA.font = .preferredFont(forTextStyle: .headline)
labelB.font = .preferredFont(forTextStyle: .subheadline)
labelA.adjustsFontForContentSizeCategory = true
labelB.adjustsFontForContentSizeCategory = true
}
func setLabels(topLabel strA: String, botLabel strB: String) -> Void {
if !strA.isEmpty && !strB.isEmpty {
// if neither string is empty
// show A & B
// set text for A & B
// hide C
labelA.text = strA
labelB.text = strB
labelC.text = ""
labelA.isHidden = false
labelB.isHidden = false
labelC.isHidden = true
} else {
// if either top or bottom string is empty
// hide A & B
// show C
// set A & B text to " " (so they're not empty)
// set text for C to the non-empty string
// set C's font & background color to respective top or bottom label
labelA.isHidden = true
labelB.isHidden = true
labelC.isHidden = false
labelA.text = " "
labelB.text = " "
if strA.isEmpty {
labelC.text = strB
labelC.backgroundColor = labelB.backgroundColor
guard let f = labelB.font else {
return
}
labelC.font = f
}
if strB.isEmpty {
labelC.text = strA
labelC.backgroundColor = labelA.backgroundColor
guard let f = labelA.font else {
return
}
labelC.font = f
}
}
}
}
Example Controller - each tap will cycle through "both", "Top Only" and "Bottom Only":
class WalterViewController: UIViewController {
var wView = WalterView()
var idx: Int = 0
var testStrings: [[String]] = [
["Top Label", "Bottom Label"],
["Top Only", ""],
["", "Bottom Only"],
]
override func viewDidLoad() {
super.viewDidLoad()
wView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(wView)
// respect safe area
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
wView.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
wView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
wView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
// NO Height constraint...
// height will be determined by wView's labels
])
// so we can see the frame of wView
wView.layer.borderWidth = 1
wView.layer.borderColor = UIColor.red.cgColor
updateLabels()
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
updateLabels()
}
func updateLabels() -> Void {
let strs = testStrings[idx % testStrings.count]
wView.setLabels(topLabel: strs[0], botLabel: strs[1])
idx += 1
}
}
Results: