Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS autolayout to center my view between two views

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)

like image 280
brigadir Avatar asked Jan 09 '14 15:01

brigadir


People also ask

How do you center a label in view?

Use NSTextAlignmentCenter if what you have is the label already set and you want to center its content. This is the best answer, having the label frame is centered is not enough for centering the text, very useful if your labels are localized!

How do I use stack view auto layout?

Views and Constraints Begin by laying out the name rows in Interface Builder. Position the label and text field in their correct relative positions, select them both, and then click the Editor > Embed In > Stack View menu item. This creates a horizontal stack view for the row.

How do I center an image in Xcode?

Select your image view and apply width and height constraints via the pin dialogue box (screenshot below), then open your alignment constraints and select center horizontally and center vertically. Then just apply your constraints and voila!

What is layout guide iOS?

Use layout guides to replace the placeholder views you may have created to represent inter-view spaces or encapsulation in your user interface. Traditionally, there were a number of Auto Layout techniques that required placeholder views.


3 Answers

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.

like image 146
Fogmeister Avatar answered Sep 20 '22 11:09

Fogmeister


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

like image 54
anatoliy_v Avatar answered Sep 20 '22 11:09

anatoliy_v


(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.

like image 21
brigadir Avatar answered Sep 22 '22 11:09

brigadir