90

How to set up autolayout in Interface Builder to arrange views vertically as shown on image:

scheme

Top view pinned to top screen edge, Bottom view pinned to bottom screen edge. My view should be centered between top and bottom views (so distance to Top view equals to distance to Bottom view)

Community
  • 1
  • 1
brigadir
  • 6,874
  • 6
  • 46
  • 81

3 Answers3

114

The way to do this is to have 2 invisible "spacer" views between you visible views.

You can't make spaces have equal height. But you use the "spacer" views and place them between your views (with 0 gap to the surrounding views).

Then you give these views equal heights and they will push your views around to centre the My View with equal gap to the Bottom View and Top View.

i.e. like this...

V:|[Top View][spacer1][My View][spacer2(==spacer1)][Bottom View]|

EDIT - Another way

I just thought of another way of doing this. You could have an invisible container UIView that is between Top View and Bottom View with no gap.

Then you place My View inside this invisible view and centre it vertically.

Fogmeister
  • 76,236
  • 42
  • 207
  • 306
  • 1
    Why not just keeping equals top and bottom views' height and centering the middle view in the parent? – Antonio E. Jan 09 '14 at 16:03
  • 6
    Well that would work. Except that isn't what the question is. The image in the question clearly shows the top and bottom views with different heights. Also, it asks about centering a view exactly between two views. It doesn't ask about centering a view in its superview. – Fogmeister Jan 09 '14 at 16:05
  • Ops, you're totally right didn't notice the difference in height between the views – Antonio E. Jan 09 '14 at 16:06
  • Fogmeister, thanks. At last, could you suggest how to adjust view position when I already set correct constraint values (Interface Builder proposes me to adjust constraints to match view position but I want conversely)? – brigadir Jan 09 '14 at 16:10
  • 1
    @brigadir Yeah, in one of the buttons in the bottom right of Interface Builder it has options for "Update frames to match constraints" and also "Update Constraints to Frames". You want this second one. – Fogmeister Jan 09 '14 at 16:11
  • another way is the best i think – João Nunes Nov 10 '14 at 15:09
  • 1
    I think he was saying that "Another way" was better than the original answer, not that there was a third way that was better. :) – James Richard Nov 10 '14 at 19:28
  • That's a very clever solution. Thanks! – Ahmet Ardal Dec 24 '15 at 19:13
  • 2
    I just used your Another Way, incredibly easy to setup thank you! – user3344977 Feb 01 '16 at 21:56
55

One more solution is to add an invisible view between top view and botom view and place my view in center of this view:

Centered UIView

anatoliy_v
  • 1,782
  • 15
  • 24
23

(5 years later) I've found the most canonical solution:

UILayoutGuide is specially introduced to solve this kind of tasks (since iOS 9).

Use layout guides to replace the dummy views you may have created to represent inter-view spaces or encapsulation in your user interface - Ref docs

It works pretty fine in code, but unfortunately Interface Builder doesn't support custom layout guides.

brigadir
  • 6,874
  • 6
  • 46
  • 81