How to set weight in UIStackView on iOS

Question

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

Suppose I have a vertical UIStackView and 3 UIImageView . I want to set scales 3, 6, 1 in series for UIImageView s. How to do it?

Answer 1

UIStackView does not have the same concept of weights. It can use subview intrinsicContentSize as a weight, but setting a specific intrinsicContentSize usually requires a subclass, and it is used in other situations (as opposed to the android:layout_weight attribute that you are familiar with, which only uses LinearLayout ).

But since UIStackView works by applying restrictions to its organized subviews, you can get the effect of weights by setting additional restrictions between the heights of the subviews. ( UIStackView designed to add your own limitations for customizing the layout in this way.)

In your case, you want the height of the top view to be 3 times that of the bottom, and you want to limit the height of the middle view so that it is 6 times that of the bottom.

You can set a proportional height constraint in the storyboard by creating an equal width constraint, and then editing the constraint factor.

In code, you can 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

The internal size of the content, etc. Not fully involved.

To set fractional heights, simply set fractional heights:

1. Fix stack height (say, full screen)

2. Insert three kinds of A, B, C

3. For A, set a height limit of 0.3 to the stack view height

4. For B, set a height limit of 0.6 on the height to represent on the stack

Set the stack view for distribution: Fill.

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

You made

Answer 3

First off, do you really need a stack view? It would be much easier to organize this simply by using direct height limits.

However, you can do this with the stack view if you really want to use the stack view. The secret is that the "weight" in question is simply an ordered view of intrinsicContentSize().height . Knowing this, I could easily create a stack view consisting of three images in the requested proportions:

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

How did i do this? I gave three images tag values ​​of 300, 600 and 100 respectively in the storyboard. (Of course, I could use the individual IBInspectable property for this, and in real life I would.) Then I made all the instances of my subclass of UIImageView 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 distribution is configured as padding proportionally. Representations of images are adjusted using the content mode as bars for filling. Result: the presentation of the stack when building its ordered views accesses the intrinsicContentSize method and, thus, does the right thing.