Fill Proportionally in UIStackView

Question

I am using Storyboard to create a layout which consists of a UITableView and a UIView at the bottom. I am using UIStackView and playing them vertically. I want the UITableView to take 80% of the height and UIView (footer) to take 20%. I am using Fill Proportionally option of UIStackView and even through in Xcode preview it looks good but when the app is run it does not render correctly. Here is what I want it to look like:

And here is what it looks like when it is run:

Ideas?

Zwickau

Answer 1

You will need to set an explicit constraint to make tableView.height 4x bigger than your view size. They don't have intrinsic content size, so the stackView does not "know" how to properly fill the space.

Also, set the distribution mode to .fill, because .fillProportionally uses intrinsic content size to determine proper distribution (excerpt from docs):

case fillProportionally

A layout where the stack view resizes its arranged views so that they fill the available space along the stack view’s axis. Views are resized proportionally based on their intrinsic content size along the stack view’s axis.

Using constraints we are setting the size explicitly, not using intrinsic content size - thus .fillProportionally does not work. I assume in that case the stackView uses values returned by view.intrinsicContentSize directly. However, constraints will not change view.intrinsicContentSize.

If you would be doing it in code, you could do it with this:

tableView.heightAnchor.constraint(equalTo: myView.heightAnchor, multiplier: 4).isActive = true

In storyboards, control drag from tableView to the myView and select Equal Heights:

Then select the created constraint and set the appropriate multiplier:

Llywellyn

How can I do this using Storyboard? If I apply the height constraint to UITableview using Storyboard is does not work as expected – Zwickau

I did that and it seems to be working. Although it does throw exceptions of breaking some constraints. Xcode 9.2 is a complete mess!! – Zwickau

@johndoe there you go – Roller

Thanks! I did exactly that and now I see a black screen with no views. What settings should I use for UIStackView Fill, Fill Proportionally. Currently it is set to Fill Proportionally. – Zwickau

once you do "You will need to set an explicit constraint to make tableView.height 4x bigger than your view size. They don't have intrinsic content size, so the stackView does not "know" how to properly fill the space." then why can't you keep the distribution as .fillProportionately? I mean shouldn't it just fill the tableview 4X more the view? Isn't that what proportionately means? – Cotton

@Honey I guess it's because the constraints are not defining the intrinsic content size, just setting the size explciitly. .fillProportionally works with intrinsic content size, as you can read in the documentation – Roller

@Honey I added a short explanation to the answer – Roller

Aha. I think I finally understood their difference. Each time I got a piece of their difference. Obviously UIView's and tableView's intrinsic size is (0,0) hence you can't use it like that. Thanks – Cotton

it is working fine when i set it equal height to another view for iphone 8 simulator. but it is not working on iphone max pro simulator. why it is happening like this. – Xylophagous

Answer 2

In the storyboard's Document Outline control-drag from the top view to the stack view and select Equal heights. Now go to the Size Inspector and you should see the constraint. Double click on it and set the multiplier to 0.2. Then update the frames.

Keep the stack view distribution as Fill.

Control drag from view2 to view1 to create equal heights constraint.

Go to the constraint and set multiplier as 0.2.

Aurelioaurelius

Screenshots would help! The main view consists of a UIStackView. UIStackView contains the UITableView and a FooterView (UIView). – Zwickau