Multiple labels and segment views in Auto Layout

1
votes

i'm having some issues with auto layout. I'm making an exercise app and i've built this display to configure the users units settings but i'm struggling with laying out the constraints. Here's how i want it to look...

enter image description here

But here's what i get when i run on a different device (iPhone 5)...

enter image description here

These are the constraints i'm using:

(Units) - Align center X to Superview, Width Equals: 91, Bottom space to: Weight, Top space to top layout guide: 31

(Weight) - Align center X to Superview, Width Equals: 69, BottomSpace to weightSegment: 13, Top space to units: 22

(WeightSegment) - Align center X to Superview, Width equals: 260, Bottom space to Distance: 23, Top space to Weight: 13

(Distance) - Align center x to Superview, Top space to weight segment: 23, Bottom space to distance segment: 13

(DistanceSegment) - Align center X to Superview, Width equals: 260, Bottom space to Height: 23, Top space to Distance: 13

(Height) - Align center x to Superview, Top space to distance segment: 23, Bottom space to height segment: 13

(HeightSegment) - Align center X to Superview, Width equals: 260, Bottom space to Scale: 23, Top space to Height: 13

(Scale) - Align center x to Superview, Top space to height segment: 23, Bottom space to ScaleSegment segment: 13

(ScaleSegment) - Align center X to Superview, Width equals: 260, Top space to Scale: 13

(Done) - Align center X to Superview, Width equals: 295, Height equals: 53, Bottom space to BottomLayoutGuide: 67 .

1
iosswiftxcodeautolayout

1 Answers

1
votes

Debugging this, it appears that your horizontal constraints are good, so let's remove all the center X alignments and widths. That leaves the vertical constraints. My instincts immediately thought something and it appears to be the issue. You've constrained everything from top to bottom...Units, Weight, WeightSegment, etc. except one - the Done button. You have three options:

Easiest:

Redo the constraint on the done button by aligning the top to the bottom of the ScaleSegment. The issue here is on large devices you'll have a large amount of "white space" on the bottom. Still, this is preferable to....

Plan B:

Keep the Done button constraints and redo the other controls, working from the bottom up (align their bottoms to the top of the last contained control). I personally don't like this because it's more changes and you'll still have "white space" on large devices, except it's now at the top. There's better option though. It more work that either of these options though....

The Best Option:

Use layoutGuides. Be aware, I only know how to do them in code. They may not be available in IB! But if you insert a layoutGuide between each "set" of elements (UILabel and UISegmentedControl) and then make their vertical height be equal to each other, you can then control the exact amount of spacing you want at the top and bottom, and let auto layout decide how much equal vertical spacing is left for the rest, depending on the device size.

Of course, if you are using IB and layoutGuides aren't available, go with the Easiest Option.