Stackview with two table views and labels causes overlap

Question

I've been trying to build the following view that I already built in an Android app:

I used a stack view to layout the views vertically. There is a label, followed by first table view, then another label, then another table view(Android configuration is the same):

What I would expect is to have the first table view stretch to accomodate the 3 items inside, the label after it to follow, and so on without constraining heights.

This is how the autolayout looks like:

And these are the constraints I set up:

How can I achieve the same view like in Android?

Answer 1

The problem is that views based on UIScrollView (all table views and collection views are) don't have an intrinsic size to return to the Stack View; they could theoretically be of infinite size. The correct way to solve this is not to put them in a stack view, but add them as constrained sub-views with the following constraints:

• Top table view is constrained equal to the top, leading, and trailing edges of its superview.
• Bottom table view is constrained equal to the bottom, leading, and trailing edges of its superview.
• Top table view's bottom anchor is equal to the top anchor of the bottom table view.
• Top and bottom table views are constrained to have equal heights.

That will force the table views to each use half of the available screen space, while remaining flexible for different screen sizes.