current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite
3

I am attempting to layout a screen design using constraints (auto-layout) from interface builder and hope to avoid coding constraints, but I would accept an answer for either case I guess.

I have two subviews in a contained in a top level view. I want to fix vertical distance of the first subview to the top of the screen (I was able to accomplish that - common use case for a vertical space constraint). I want the second subview to float (vertically) in the center of the distance between the bottom of first subview and the bottom of the screen. The idea is that the design responds somewhat to iPhone 3.5" vs 4" dimensions.

I am having trouble defining a constraint or set of constraints that would accomplish this.

I have tried setting inequalities on the vertical spacing constraints between the second subview and the top of it's neighbor (the first subview) and the bottom of the superview, and playing with the priorities of those constraints.

An idea that was suggested in a few other related posts on SO is to use a container that is pinned to the bottom of the screen, as well as the pinned to the bottom edge of the first subview, and then center my second subview in the container. I was hoping to avoid complicating the view hierarchy if possible, but maybe that isn't easily avoided.

Any thoughts or suggestions?

share|improve this question
    
In interface builder, you may well have to use the container. If you're willing to fiddle with constraints in code, it's possible to add proportionality constraints, so you could probably set the top and bottom spaces to be equal and that would achieve what you're after. –  sapi Jul 16 '13 at 22:54
    
I just tried for 10mins and couldn't get it done. Maybe it's just me, but so far I've found only two techniques to make auto-layout work in IB: 1) randomly promote, pin and delete things until it accidentally works out to what I want. After a while of this, move on to technique 2) which is to give up and write code. –  danh Jul 17 '13 at 0:27
    
The suggestion you mention in your last paragraph is the easiest way to do this. –  rdelmar Jul 17 '13 at 0:54
add comment

1 Answer 1

up vote 8 down vote accepted

If you want to do this with auto layout, you have to add at least one spacer view. It doesn't have to be the superview of the vertically-centered view (or any other view), so it has a pretty minor effect on your view hierarchy.

I recommend not trying to set up constraints in Interface Builder in Xcode 4.6.3. It's just too painful. But if you really must, this is doable.

  1. Create a spacer (a plain old UIView) from the bottom edge of the top-hugging view to the bottom edge of superview. Set it to hidden. Give it constraints to the top-hugging view and the left and bottom edges of the root view, and pin its width. My spacer width is 10:

    spacer constraints

  2. Add your middle view (here, a button). Give it a “Horizontal Center in Container” constraint. Then select both the middle view and the spacer view and give them a “Vertical Centers” constraint:

    middle view constraints

Note that if you drop the middle view when IB is showing the correct guidelines, it will set these constraints for you.

You can test by enabling resizing for descendents (but not siblings & ancestors) and resizing the root view in IB. The middle view will remain centered between the top-hugging view and the bottom of the superview:

4-inch screen size

short view

share|improve this answer
    
While this does involve an extra view in the hierarchy, it is a bit more elegant than what I thought I had to do. Thanks much. –  jamin schubert Jul 17 '13 at 2:58
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.