如何在 IOS 中的 UIStackView 中设置权重

Question

UIStackView is similar to Android LinearLayout but I could not figure out how to set weight for the subviews.

Suppose I have a vertical UIStackView and 3 UIImageView s in it. I want to set weights 3, 6, 1 consecutively for the UIImageView s. How do I do that?

Answer 1

UIStackView doesn't have the same concept of weights. It can use a subview's intrinsicContentSize as a weight, but setting a specific intrinsicContentSize typically requires making a subclass and it's used in other situations too (unlike the android:layout_weight attribute you're familiar with, which is only used by LinearLayout ).

But since UIStackView works by applying constraints to its arranged subviews, you can get the effect of weights by setting additional constraints between the heights of the subviews. ( UIStackView is designed to let you add your own constraints to tweak the layout this way.)

In your case, you want to constrain the height of the top view to be 3 times the height of the bottom view, and you want to constrain the height of the middle view to be 6 times the height of the bottom view.

You can set up a proportional-height constraint in a storyboard by creating an equal-height constraint, then editing the constraint's multiplier.

In code, you could do it like this (on iOS 9.0 or later):

NSLayoutConstraint.activateConstraints([
    top.heightAnchor.constraintEqualToAnchor(bottom.heightAnchor, multiplier: 3),
    middle.heightAnchor.constraintEqualToAnchor(bottom.heightAnchor, multiplier: 6),
])

Answer 2

Intrinsic content size, etc, is totally uninvolved.

To set fractional heights, just set fractional heights:

1. Fix the height of the stack view (say, the whole screen)

2. Put in the three views A, B, C

3. For A, make an height constraint 0.3 of the height of the stack view

4. For B, make an height constraint 0.6 of the height to the stack view

Set the stack view to distribution:Fill.

If you run this on a powerful iPhone, it will figure out that C is "0.1".

You're done.

Answer 3

First off, do you really need a stack view for this? It would be much easier to arrange this simply using proportional height constraints directly.

However, you can do this with a stack view if you really want to use a stack view. The secret is that the "weight" in question is simply the arranged view's intrinsicContentSize().height . Knowing this, I was easily able to set up a stack view consisting of three image views in the proportions you request:

Those, for purposes of the demonstration, are the same image repeated three times: one at 3x height, one at 6x height, and one at 1x height.

How did I do it? I gave the three image views tag values of 300, 600, and 100 respectively in the storyboard. (Of course I could have used an IBInspectable custom property for this, and in real life, I would do so.) Then I made them all instances of my UIImageView subclass, MyImageView, whose code looks like this:

class MyImageView: UIImageView {
    override func intrinsicContentSize() -> CGSize {
        print(self.tag)
        return CGSizeMake(CGFloat(self.tag), CGFloat(self.tag))
    }
}

The stack view's Distribution is configured as Fill Proportionally. The image views are configured with their Content Mode as Scale To Fill. Result: The stack view, in laying out its arranged views, consults the intrinsicContentSize method, and thus does the right thing.