Can't get Auto Layout and Stack Views to Auto-Adjust Properly (Swift 3, Xcode 8)

Question

I'm new to iOS development so naturally I'm having some issues with my stack views and auto layout constraints in Xcode. Originally I had used just constraints and the pin menu to align everything but I'm really trying to get stack views down so I went back and implemented them.

If you look at my images above you'll see that in my app I created a couple of stack views:

• Status Bar vertical stack
• Section 1 vertical stack
• 1st divider (which is just a view with a height of 0.5 and is not inside of a stack)
• Section 2 which contains 2 horizontal stacks inside of the main vertical stack view
• 2nd divider (exact same thing as 1st divider just between Sections 2 & 3)
• Section 3 contains a vertical stack and horizontal stack inside of the main vertical stack

And all of these stacks plus the 2 dividers are grouped together in 1 super vertical stack called User Interface.

One of my problems is that I can't set top and bottom constraints between my stacks and dividers. As it stands, there is too much space for my liking between the sections and dividers. If you look at image 1 I tried to set a top constraint of 15 between Section 1 and Status bar. I also tried to set a top constraint of 15 between my 1st divider and Section 1, and so on and so forth. I'm getting conflicting constraints and I just can't figure out why. All they say is Section1.top = Status Bar.bottom + 15 , 1st Divider.top = Section1.bottom + 15 , etc. Any ideas on how to resolve the conflicts? Every time I try to move a divider it snaps back in its original place and adjusting the constraint numbers give me the same errors.

My second issue is that I can't get User Interface to fit inside of it's super view. I want my app to fit in all iPhone screen sizes and to auto adjust accordingly. What I tried doing is using the pin menu and pinning each side of my User Interface stack with a constraint of 0 (Constrain to margins unchecked). User Interface is aligned and without any conflicts but then all of my stacks get squished as seen in image 2. This results in a couple of errors saying that some of the heights and vertical positions of my labels are ambiguous:

• Height and vertical position are ambiguous for "Bill Amount Text Field".
• Height is ambiguous for "BILL AMOUNT".
• Height and vertical position are ambiguous for "Tip Percent Segment Control".

As you go down the screen sizes there are more errors as more labels are being squished. And I already set individual top and bottom constraints for each label. Even when I implement a set height for each label, the error messages go away but not all of my labels appear within their stack. I tried messing around with the Alignment and Distribution menus and selecting different ones for my stacks but none of them seem to fix the issue.

Any help would be greatly appreciated or if I'm going about this all wrong please let me know. I'm using Xcode 8 beta 4 and wrote the app in Swift 3.0.

Answer 1

Refer to this documentation - there are pretty clear explanation of all auto-layout concepts.
I presume that your problem is that you use one big stack view, where each element fills proportionally to others. Try to fix this out.

One little advice, stacks are really good thing, but you should not abuse it :)

Answer 2

TL;DR;

From my experience. Stop using Interface Builder and create all views in code. With new anchor system or frameworks like SnapKit it's very easy. The benefits you get:

• Faster development (after some time of practicing)
• No stupid warnings from Interface Builder
• Easier to merge when you work in a team
• XCode almost never crashes

I was fighting with IB for few months and now I'm totally happy. Good luck.