Fit a stackview containing more stackviews in a view

Question

I have a layout that looks like this. The viewcontroller is embedded in a navigation controller which in turn is embedded in a tab bar controller so the view has both a top and bottom bars.

The label and the 3 buttons have height constraints. And the gray view has an aspect ratio constraint set.

The label and the gray view is embedded in one stackview. And the 3 red buttons are embedded in one stackview. Finally both stackviews and embedded in a single stackview.

The all encompassing stackview has leading, top and trailing constraints set.

When I run it in iPhones with bigger screens like the XS, there's no issue.

But when I run it in smaller screens like the SE, the bottom part gets hidden behind the tab bar.

What constraint do I need to set in order for the main stackview to fit inside screen sizes of all iPhones?

I tried setting a bottom constraint to the stackview with a low priority but that doesn't seem to work either.

I assume one reason is the height constraints I've set for the label and the buttons. But I'm not sure how I can set the heights to be resized dynamically.

Demo project

Answer 1

The problem is because you don§t have a bottom constraint so aspect constraint stretches the view which will make the bottom buttons to be down the tab bar

You need to remove the top label and middleView from the main stackview and set constraints as

1- label - leading , trailing , top and height ´´´´ height is optional

2- middleView - leading , trailing , top to label

3- stackview - leading , trailing , top to middleView , bottom to view

According to above the height of middleView will be according to the height of the screen , if you wish it square then replace the leading and trailing with a centerX and aspectRatio of 1