1

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Cobie Fisher
  • 713
  • 2
  • 8
  • 18
  • I *hate* UIStackView. While *trying* to simplify auto layout, I found it added "under the cover" things to the point I coded things manually. So yeah, I'm not of much help - but since this was exactly what I faced two years ago - I uprooted your question. Well formed and worded, from what I can see you've tried several things, defined what you want, etc. –  Jul 27 '17 at 15:46

1 Answers1

3

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

bestiosdeveloper
  • 2,339
  • 1
  • 11
  • 28
  • 1
    Thanks, Pramod that really helped me ;) – Cobie Fisher Jul 29 '17 at 20:05
  • Actually, if you still have it, it would be great if you can send me the xcode file at cobiefisher@gmail.com. If not that's fine, I'm just having some difficulties figuring out which row names correspond to which views, etc. – Cobie Fisher Jul 30 '17 at 20:59