CODEWITHSUNDEEP
iosswiftswift3xcode8uistackview
Cobie Fisher
Cobie Fisher

Reputation: 733

Stack Views Compressing into a Block in Xcode Simulator

So, working on a personal project of mine, after frustrating with Auto-layout constraints, I discovered Stack Views. After watching several tutorials and guides on the topic, I thought to try them out. So I created a new Xcode project and played around with them for a while and they seemed to work fine. However, in the process of implementing them into my larger project, I encountered several problems with them that I hope are errors on my part and not Xcode 8 bugs.

After stacking the views and spacing them out, I got this result which was exactly the effect I was trying to achieve:

enter image description here

However, when I run it in the simulator, even at exactly the same size as the storyboard, the views all compress together into one fat blocky mess completely unlike what is displayed on the storyboard:

(ignore the green stuff, just to help me with layout)

enter image description here

//How I stacked the Views

enter image description here

I stacked everything mainly row by row and then stacked the rows together. Then I constrained the master stackview about 10 points to the leading and trailing superviews && 28 pts to the top layout guide and 40 pts to the bottom layout guide.

How to properly stack these damned views so that it looks exactly the same on all devices and screen sizes? Please try and be as specific as you can, including the content mode, etc.

Upvotes: 1

Views: 321

Answers (1)

Pramod Kumar
Pramod Kumar

Reputation: 2652

Here is the solution as I implement :

VIEW HIERARCH

enter image description here

SPECIFICATIONS

MainStackView

Constraint: Top - 20, Leading - 10, Trailing - 10, Bottom - 20

Alignment: Fill, Distribution - Fill, Spacing - 20

Row1

Constraint: Equal Height to MainStackView with multiplier - 0.1

Row2

Nothing

Row3

Constraint: Equal Height to MainStackView with multiplier - 0.37

Alignment: Fill, Distribution - FillEqually, Spacing - 10

Row31, Row32, Row33

Constraint: Nothing

Alignment: Fill, Distribution - FillEqually, Spacing - 10

Row34

Constraint: Nothing, add constraint on small view of equal width to Row34 with multiplier - 0.314

Alignment: Fill, Distribution - Fill, Spacing - 10

Row4

Constraint: Equal height to Row1, add constraint on small view of equal width to Row4 with multiplier - 0.314

Alignment: Fill, Distribution - Fill, Spacing - 10

OUTPUT

enter image description here

Upvotes: 3

Related Questions