CODEWITHSUNDEEP
iosautolayout
maksa
maksa

Reputation: 404

Resolution agnostic equally sized elements in Storyboard using Auto-Layout

I have a Storyboard containing view with a navigation bar, my goal is to have another 3 elements below (buttons, views, I suppose it's irrelevant) that stretch so that they all have same height, and stick to each other, i.e. have no gaps between them.

I tried to achieve this using AutoLayout by setting the constraints of the top element to have vertical spacing of 0 with the navigation bar, vertical spacing 0 with the element below, and the bottom element to have the vertical spacing 0 with both superview bottom and the element above. I also added the constraint that all elements have equal height, and everything was fine until I switched from iPhone4 to iPhone5 view in the Storyboard editor when it blew up by InterfaceBuilder removing the "stick to the navigation bar" constraint of the top element and giving it fixed size (that isn't equal to the other two).

Fiddled with it for a while so that no absolute heights exist anywhere in the layout, but switching between iPhone5 and iPhone4 breaks everything I do by either removing some constraint or setting some other to a fixed value.

Does someone know a way to achieve this using AutoLayout, or should I maybe go for UICollectionView with flowlayout?

Or to put it another way - what would be the best way to achieve three elements in a view to stick to each other and retain equal heights across all possible current and future screen sizes, in "UIViewControler + Navigation Bar in a Storyboard" scenario, using InterfceBuilder?

(I'm no stranger to the idea of doing it in code, I'd know how to go about it, but if it's possible with IB I'd go that way.)

Upvotes: 1

Views: 335

Answers (1)

rdelmar
rdelmar

Reputation: 104082

You must have had at least one other constraint in there to start, because what you described wouldn't be sufficient -- either one of those 3 views had its height set (or an intrinsic height), or you had a constraint to the bottom of the screen as well. The latter would cause it to blow up on a screen size change. You do need to have one of the items with a set height, each with a vertical spacing constraint to the one above and below, and their heights all the same. If you have no other constraints (in the vertical direction) that should work.

Upvotes: 2

Related Questions