Stack view - but with "proportional" gaps

Question

Imagine a stack view with four items, filling something. (Say, filling the screen).

Notice there are three gaps, ABC.

(Note - the yellow blocks are always some fixed height each.)

(Only the gaps change, depending on the overall height available to the stack view.)

Say UISV is able to draw everything, with say 300 left over. The three gaps will be 100 each.

In the example, 9 is left over, so A B and C are 3 each.

However.

Very often, you want the gaps themselves to enjoy a proportional relationship.

Thus - your designer may say something like

If the screen is too tall, expand the spaces at A, B and C. However. Always expand B let's say 4x as fast as the gaps at A and B."

So, if "12" is left over, that would be 2,8,2. Whereas when 18 is left over, that would be 3,12,3.

Is this concept available in stack view? Else, how would you do it?

(Note that recently added to stack view, you can indeed specify the gaps individually. So, it would be possible to do it "manually", but it would be a real mess, you'd be working against the solver a lot.)

Answer 1

You can achieve that by following workaround. Instead of spacing, for each space add a new UIView() that would be a stretchable space. And then just add constraints between heights of these "spaces" that would constrain their heights together based on the multipliers you want, so e.g.:

space1.heightAnchor.constraint(equalTo: space2.heightAnchor, multiplier: 2).isActive = true

And to make it work I think you'd have to add one constraint that would try to stretch those spaces in case there is free space:

let stretchingConstraint = space1.heightAnchor.constraint(equalToConstant: 1000)
// lowest priority to make sure it wont override any of the rest of constraints and compression resistances
stretchingConstraint.priority = UILayoutPriority(rawValue: 1)
stretchingConstraint.isActive = true

The "normal" content views would have to have intrinsic size or explicit constraints setting their heights to work properly.

Here is an example:

class MyViewController: UIViewController {

    fileprivate let stack = UIStackView()

    fileprivate let views = [UIView(), UIView(), UIView(), UIView()]
    fileprivate let spaces = [UIView(), UIView(), UIView()]

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = .white

        self.view.addSubview(stack)

        // let stack fill the whole view
        stack.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            stack.topAnchor.constraint(equalTo: self.view.topAnchor),
            stack.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
            stack.leftAnchor.constraint(equalTo: self.view.leftAnchor),
            stack.rightAnchor.constraint(equalTo: self.view.rightAnchor),
            ])

        stack.alignment = .fill
        // distribution must be .fill
        stack.distribution = .fill
        stack.spacing = 0
        stack.axis = .vertical

        for (index, view) in views.enumerated() {
            stack.addArrangedSubview(view)
            view.translatesAutoresizingMaskIntoConstraints = false
            // give it explicit height (or use intrinsic height)
            view.heightAnchor.constraint(equalToConstant: 50).isActive = true

            view.backgroundColor = .orange

            // intertwin it with spaces
            if index < spaces.count {
                stack.addArrangedSubview(spaces[index])
                spaces[index].translatesAutoresizingMaskIntoConstraints = false
            }
        }
        // constraints for 1 4 1 proportions
        NSLayoutConstraint.activate([
            spaces[1].heightAnchor.constraint(equalTo: spaces[0].heightAnchor, multiplier: 4),
            spaces[2].heightAnchor.constraint(equalTo: spaces[0].heightAnchor, multiplier: 1),
            ])

        let stretchConstraint = spaces[0].heightAnchor.constraint(equalToConstant: 1000)
        stretchConstraint.priority = UILayoutPriority(rawValue: 1)
        stretchConstraint.isActive = true
    }
}

Answer 2

Remarkably, @MilanNosáľ 's solution works perfectly.

You do not need to set any priorities/etc - it works perfectly "naturally" in the iOS solver!

Set the four content areas simply to 50 fixed height. (Use any intrinsic content items.)

Simply don't set the height at all of "gap1".

Set gap2 and gap3 to be equal height of gap1.

Simply - set the ratios you want for gap2 and gap3 !

Versus gap1.

So, gap2 is 0.512 the height of gap1, gap3 is 0.398 the height of gap1, etc.

It does solve it in all cases.

Fantastic!!!!!!!!!!

So: in the three examples (being phones with three different screen heights). In fact the relative heights of the gaps, is always the same. Your design department will rejoice! :)

Answer 3

Created: a gist with a storyboard example

The key here is Equal Heights between your arranged views and your reference view: And then change the 'Multiplier` to your desired sizes:

In this example I have 0.2 for the main view sizes (dark grey), 0.05 within the pairs (black), and 0.1 between the pairs (light grey)

Then simply changing the size of the containing view will cause the views to re-size proportionally:

This is entirely within the storyboard, but you could do the same thing in code.

Note that I'm using only proportions within the StackView to avoid having an incorrect total size, (and making sure they add up to 1.0), but it should be possible to also have some set heights within the StackView if done correctly.