Stackview swift iPhone/iPad

Question

Trying to use stackviews in my new app. This is how I want the app to look like. All UIViews are squares and scale with ratio 1:1. Labels should be placed just outside uiviews. Labeltext should also scale.

Tried to put the elements in stacks like this, but it is behaving weird.

How can I make the inner square (with the uiviews) as big as possible and make the labels float around the square?

Answer 1

I have attached the solution with UIView to be squares with aspect ration 1:1 and minimum/maximum value for labels

You can change the spacing of stackview containing labels programmatically to match the edges with square view of UIViews

Please check out the constraints of UIViews, relationships with other views (like equal widths/heights etc) distribution and spacing of stackviews

This checked this on iPhone 8/SE and iPad Pro and it viewed fine in Preview of storyboard except of the spacing of UILabels which can be set programmatically

The solution is uploaded to github here