How can a view determine its height based on a function of its width without using an intrinsicContentSize that is dependent on the frame? - ios

Question

I am trying to figure out how best to create a view that determines its own height based on the width it is given. The behaviour I desire is very similar to how a vertical UIStackView behaves in that:
When constrained by its top, leading, and trailing edges, it should determine its own natural height based on its content.
When constrained on all edges, it should fill all the available space by expanding and collapsing as determined by those constraints.
In addition, I am looking to achieve this without using autolayout internally to my view.
To illustrate this, please consider the following example:
class ViewController: UIViewController {
let v = View()
override func viewDidLoad() {
super.viewDidLoad()
v.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(v)
NSLayoutConstraint.activate([
v.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
v.leadingAnchor.constraint(equalTo: view.leadingAnchor),
v.trailingAnchor.constraint(equalTo: view.trailingAnchor),
// Toggle this constraint on and off.
// v.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
])
}
}
class View: UIView {
// Imagine this came from computing the size of some child views
// and that it is relative to the width of the bounds.
var contentHeight: CGFloat { bounds.width * 0.5 }
var boundsWidth: CGFloat = 0 {
didSet { if oldValue != boundsWidth { invalidateIntrinsicContentSize() } }
}
override var intrinsicContentSize: CGSize {
.init(width: bounds.width, height: contentHeight)
}
override func layoutSubviews() {
super.layoutSubviews()
boundsWidth = bounds.width
backgroundColor = .red
}
}
This example achieves the behaviour I've described above but I have a big reservation with it because of how I'm using intrinsicContentSize.
The documentation for instrinsicContentSize states that it must be independent of the content frame, which I have not managed. I am calculating the intrinsic size based on the width of the frame.
How is it possible to achieve this behaviour and not make instrinsicContentSize rely on the bounds?

Answer 1

This can all be done with auto-layout constraints. No need to calculate anything.
All you need to do is make sure your custom view's content has appropriate constraints to define the layout.
For example, a UILabel has an intrinsic size based on its text. You can constrain a "top" label to the top of the view, a "middle" label to the bottom of the "top" label, and a "bottom" label to the bottom of the "middle" label and to the bottom of the view.
Here's an example (all via code):
class SizeTestViewController: UIViewController {
let v = ExampleView()
override func viewDidLoad() {
super.viewDidLoad()
v.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(v)
NSLayoutConstraint.activate([
v.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
v.leadingAnchor.constraint(equalTo: view.leadingAnchor),
v.trailingAnchor.constraint(equalTo: view.trailingAnchor),
])
v.topLabel.text = "This is the top label."
v.middleLabel.text = "This is a bunch of text for the middle label. Since we have it set to numberOfLines = 0, the text will wrap onto mutliple lines (assuming it needs to)."
v.bottomLabel.text = "This is the bottom label text\nwith embedded newline characters\nso we can see the multiline feature without needing word wrap."
// so we can see the view's frame
v.backgroundColor = .red
}
}
class ExampleView: UIView {
var topLabel: UILabel = {
let v = UILabel()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .yellow
v.numberOfLines = 0
return v
}()
var middleLabel: UILabel = {
let v = UILabel()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .cyan
v.numberOfLines = 0
return v
}()
var bottomLabel: UILabel = {
let v = UILabel()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .green
v.numberOfLines = 0
return v
}()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
addSubview(topLabel)
addSubview(middleLabel)
addSubview(bottomLabel)
NSLayoutConstraint.activate([
// constrain topLabel 8-pts from top, leading, trailing
topLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8.0),
topLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8.0),
topLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8.0),
// constrain middleLabel 8-pts from topLabel
// 8-pts from leading, trailing
middleLabel.topAnchor.constraint(equalTo: topLabel.bottomAnchor, constant: 8.0),
middleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8.0),
middleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8.0),
// constrain bottomLabel 8-pts from middleLabel
// 8-pts from leading, trailing
// 8-pts from bottom
bottomLabel.topAnchor.constraint(equalTo: middleLabel.bottomAnchor, constant: 8.0),
bottomLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8.0),
bottomLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8.0),
bottomLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8.0),
])
}
}
The result:
and rotated, so you can see the auto-sizing:
Edit
A little clarification on Intrinsic Content Size...
In this image, all 5 subviews have an intrinsicContentSize of 120 x 80:
class IntrinsicTestView: UIView {
override var intrinsicContentSize: CGSize {
return CGSize(width: 120, height: 80)
}
}
As you can see:
If I don't add constraints to specify Width - either with a Width constraint or Leading and Trailing constraints - the view will be 120-pts wide.
If I don't add constraints to specify Height - either with a Height constraint or Top and Bottom constraints - the view will be 80-pts tall.
Otherwise, the width and height will be determined by the constraints I've added.
Here's the complete code for that example:
class IntrinsicTestView: UIView {
override var intrinsicContentSize: CGSize {
return CGSize(width: 120, height: 80)
}
}
class IntrinsicExampleViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
var iViews: [IntrinsicTestView] = [IntrinsicTestView]()
var v: IntrinsicTestView
let colors: [UIColor] = [.red, .green, .blue, .yellow, .purple]
colors.forEach { c in
let v = IntrinsicTestView()
v.backgroundColor = c
v.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(v)
iViews.append(v)
}
let g = view.safeAreaLayoutGuide
// first view at Top: 20 / Leading: 20
v = iViews[0]
v.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0).isActive = true
v.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0).isActive = true
// second view at Top: 120 / Leading: 20
// height: 20
v = iViews[1]
v.topAnchor.constraint(equalTo: g.topAnchor, constant: 120.0).isActive = true
v.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0).isActive = true
v.heightAnchor.constraint(equalToConstant: 20).isActive = true
// third view at Top: 160 / Leading: 20
// height: 40 / width: 250
v = iViews[2]
v.topAnchor.constraint(equalTo: g.topAnchor, constant: 160.0).isActive = true
v.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0).isActive = true
v.heightAnchor.constraint(equalToConstant: 40).isActive = true
v.widthAnchor.constraint(equalToConstant: 250).isActive = true
// fourth view at Top: 220
// trailing: 20 / width: 250
v = iViews[3]
v.topAnchor.constraint(equalTo: g.topAnchor, constant: 220.0).isActive = true
v.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0).isActive = true
v.widthAnchor.constraint(equalToConstant: 250).isActive = true
// fourth view at Top: 400 / Leading: 20
// trailing: 20 / bottom: 20
v = iViews[4]
v.topAnchor.constraint(equalTo: g.topAnchor, constant: 400.0).isActive = true
v.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0).isActive = true
v.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0).isActive = true
v.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0).isActive = true
}
}

Answer 2

As DonMag said in his response, intrinsicContentSize is not quite intended for complex layout management but rather as an indication of a View's preferred size when there are not enough constraints for his frame.
However, there is a simple example i can provide to hopefully point you in the right direction.
Let's assume i want a RatioView to be intrinsically sized so that its height is a linear function of its width:
let ratioView = RatioView()
ratioView.ratio = 0.5
in this example, ratioView will have an intrinsic height equal to half of his width.
The code for RatioView is the following:
class RatioView: UIView {
var contentHeight: CGFloat { bounds.width * ratio }
private var kvoObservation: NSKeyValueObservation?
var ratio: CGFloat = 1 {
didSet { invalidateIntrinsicContentSize() }
}
override var intrinsicContentSize: CGSize {
.init(width: bounds.width, height: contentHeight)
}
override func didMoveToSuperview() {
guard let _ = superview else { return }
kvoObservation = observe(\.frame, options: .initial) { [weak self] (_, change) in
self?.invalidateIntrinsicContentSize()
}
}
override func willMove(toSuperview newSuperview: UIView?) {
if newSuperview == nil {
kvoObservation = nil
}
}
}
There are two important highligths in the above code:
the view calls invalidateIntrinsicContentSize to inform the layout system that the value of his intrinsicContentSize property has changed.
the view is constantly monitoring via KVO observation any changes to his frame property, so that it can calculate its new height every time its width changes.
The second step is especially noteworthy: without it, the view wouldn't know when its size is changing and thus wouldn't have any chance to inform the layout system (via invalidateIntrinsicContentSize) that its intrinsicContentSize has been refreshed.