How do I programatically use AutoLayout to set a UIView to the same width as its SuperView?

Question

I have a simple UIView that I want to make the same width as the containing View's width. I want to do this programatically.

I can add a constraint in the containing View that makes the SubView's Width equal to the width of container. The C# is because i am using Xamarin iOS but this AutoLayout question is not specific to that.

View.AddConstraint(NSLayoutConstraint.Create(subView, 
                                             NSLayoutAttribute.Width, 
                                             NSLayoutRelation.Equal, 
                                             this.View, 
                                             NSLayoutAttribute.Width, 
                                             1.0f, 0.0f));

However it feels more natural to control this from within the SubView as it view will always be full width. How would I do that?

When I try and create the constraint from within the SubView I use this.SuperView as the Relation but it does not work. It throws the following Exception

NSInternalInconsistencyException Reason: Unexpected use of internal layout attribute.

I find it a real hard thing to define constraints in the code behind. If you are able to, then I would suggest to use the designer for this. In Visual Studio (and probably also Xamarin Studio on Mac) you should open the Storyboard or Xib, then select the element by clicking once on it. Then you click on it for the second time, causing the circles on the sides to become anchors. These can then be linked to e.g. the views bounds... More info at http://developer.xamarin.com/guides/ios/user_interface/designer/designer_auto_layout/ — Hutjepower, Jan 14 '15 at 14:08

Kasia K. · Answer 1 · 2015-02-28T16:10:17.143

3

I got the same NSInternalInconsistencyException when trying to add a constraint involving the superview to which I wasn't attached yet. So maybe make sure that you attach first to the superview.

edited Feb 28 '15 at 16:10

answered Feb 27 '15 at 15:59

Kasia K.

151
1
9

Dhaivat Vyas · Answer 2 · 2015-12-08T06:09:21.103

As per your question about how to set UIView size similar to superView. You can set constraints by using two different ways. I’ve created view and added it subview to superView.

UIView *redView;
redView = [UIView new];
[redView setBackgroundColor:[UIColor redColor]];
[redView setAlpha:0.75f];
[redView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:redView];
[self.view setBackgroundColor:[UIColor blackColor]];

1.) By using visual format.

NSDictionary *dictViews = @{@"red":redView};
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[red]-0-|" options:0 metrics:0 views:dictViews]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[red]-0-|" options:0 metrics:0 views:dictViews]];

2.) By using layout attributes. Here constraintWithItem:redView - is subview to which we want to set constraints and toItem:self.view - is out superview according to which we need to set constraints.

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:1.0 constant:1.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1.0 constant:1.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:1.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:1.0]];

Hope this will be helpful to you. Happy Coding.

How do I programatically use AutoLayout to set a UIView to the same width as its SuperView?

2 Answers2