CODEWITHSUNDEEP
iphoneobjective-cautolayout
Nuzhat Zari
Nuzhat Zari

Reputation: 3408

How to adjust views using auto layout?

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

topView:

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

middleView:

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

bottomView:

  1. There should be 10 px vertical margin between middle and bottom view.
  2. Left and right margin 10.
  3. 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:

  1. Top space to superview for middle view.
  2. 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

Upvotes: 0

Views: 137

Answers (1)

Maarten
Maarten

Reputation: 1873

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.

Upvotes: 2

Related Questions