iOS autolayout to center my view between two views

ios interface-builder autolayout
brigadir picture brigadir · Jan 9, 2014 · Viewed 21.5k times · Source

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)

Answer

Fogmeister picture Fogmeister · Jan 9, 2014

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.

Related questions

UIScrollView Scrollable Content Size Ambiguity

Fellow devs, I am having trouble with AutoLayout in Interface Builder (Xcode 5 / iOS 7). It's very basic and important so I think everyone should know how this properly works. If this is a bug in Xcode, it is a critical one! …

Read More
How to use auto-layout to move other views when a view is hidden?

I have designed my custom Cell in IB, subclassed it and connected my outlets to my custom class. I have three subviews in cell content which are: UIView (cdView) and two labels (titleLabel and emailLabel). Depending on data available for …

Read More
AutoLayout to keep view sizes proportional

I'm trying to achieve the following: I have 2 views in my xib that need to stay 20 pixels off the edge (both sides and top) The 2 views that need to resize aren't the same size They have to be 20 pixels apart …

Read More