How to adjust views using auto layout?

Question

I am using AutoLayout in my sample app. I have three views, topView, middleView, bottomView.Following are the constraint I need,

topView:

Always start at x origin 10.
Left and right margin 10.
Height should vary based on screen bounds(or superview).

middleView:

There should be 10 px vertical margin between top and middle view.
Left and right margin 10.
Height should vary based on screen bounds(or superview).

bottomView:

There should be 10 px vertical margin between middle and bottom view.
Left and right margin 10.
Height should be constant, say 30.

I want that based on device screen size, bottom view y origin should change so that middle and top view size will adjust. Problem here is there is no way to find out, what should be the y origin of bottom view and interface is providing permanent constraint like:

Top space to superview for middle view.
Top space to superview for bottom view.

This is because there is no way to find out the height of views. Only difficulty is determining height for top and middle view. enter image description here

The problem you have with this is that the height of top and middle (and therefore the position of bottom) is ambiguous. How do you want them to work? What type of views are these? How does the height of them work? Is the height dependent on the content of them? etc... Also, what type of views are they? UITextViews, UIImageViews? Maybe they work by... middleView height is equal to topView height divided by 2? Or something like this. You need to define the height some how though. — Fogmeister
The beauty of Autolayout is that it is descriptive: you describe what you want and the system takes care of the calculations. However, you need to describe how you want the system to size the height of the top and middle view. "The height should vary" is not really a description that the system can work with. Why don't you try to describe your intent to us and we can help you describe it to the system? (E.g. middle view should be half the height of the top view.) — Maarten
@Maarten you said that so much better than I was trying to :) describe to us how you want them to work and we'll try to work out what constraints will produce this effect. — Fogmeister
There is no relation between top and middle view, so I cannot put down in words. I just want that, I have three views whose position are fixed, and last view height is fixed. Other two views height will vary depending upon device screen size.So whether I run my app on iphone5 or iPhone 4, it should adjust the view.It should not get distorted.So please suggest me how I can specify the constraint so that it will take care of height. — Nuzhat Zari
Seems like you don't have a very clear idea what you want your app to look like... You don't care if the top view is 1 pt high and the middle view is 499 pts? — Maarten

Maarten Maarten · Accepted Answer · 2013-07-18T14:01:32

You don't seem to care what the height of the top and middle view is, so I'm just going to make a decision for you: they will have the same height. Add the following contraints to the common superview of which these three views (_topView,_middleView and _bottomView) are subviews:

NSString *vfl = @"V:|-(10)-[topView]-(10)-[middleView]-(10)-[bottomView(==30)]-(10)-|";
NSDictionary *dict = @{@"topView":_topView,@"middleView":_middleView,@"bottomView":_bottomView};
NSArray *a = [NSLayoutConstraints 
                     constraintsWithVisualFormat: vfl
                                         options: 0
                                         metrics: nil
                                           views: dict];

Make sure you align them horizontally as well:

NSArray *b = [NSLayoutConstraints 
           constraintsWithVisualFormat: @"H:|-(10)-[topView]-(10)-|"
                               options: 0
                               metrics: nil
                                 views: dict];
NSArray *c = [NSLayoutConstraints 
            constraintsWithVisualFormat: @"H:|-(10)-[middleView]-(10)-|"
                                options: 0
                                metrics: nil
                                  views: dict];
NSArray *d = [NSLayoutConstraints 
            constraintsWithVisualFormat: @"H:|-(10)-[bottomView]-(10)-|"
                                options: 0
                                metrics: nil
                                  views: dict];

Edit

The middle view will be a label, as you say. Labels have an intrinsic content size. If you don't set the height of this view, the autolayout system will know what to do instinctively. (Neat, right?) By pinning the top of _topView to the top of the superview and its bottom to the top of the label, its height should be automatically calculated. I have changed the code to reflect this.

Edit 2

In order to add constraints in code, find a common ancestor (superview) of these three views and write [superview addConstraints:a],[superview addConstraints:b], etc... Make sure that autolayout in IB is turned off and that you set the translateResizingMasksToConstraints to NO.

How to adjust views using auto layout?

1 Answers