iosiphoneobjective-cautolayoutnslayoutconstraint
Error in programmatically Auto-layout vertically ios
I am creating view programmatically, In it there is two sub views, I have set height and width constraint for that, what I want is like this,
UIView (variable height)
[10px gap]
UIView (fix height 40)
but I got:
My code is:
- (void)viewDidLoad
{
[super viewDidLoad];
UIView *button1, *button2 ;
button1=[UIView new];
button2=[UIView new];
button1.backgroundColor=[UIColor redColor];
button2.backgroundColor=[UIColor yellowColor];
button1.translatesAutoresizingMaskIntoConstraints=button2.translatesAutoresizingMaskIntoConstraints=NO;
[self.view addSubview:button1];
[self.view addSubview:button2];
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(button1,button2);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1]-|"
options:0
metrics:nil
views:viewsDictionary];
[self.view addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[button1]-10-[button2]-|"
options: NSLayoutFormatAlignAllLeft
metrics:nil
views:viewsDictionary];
[self.view addConstraints:constraints];
}
Edit Second Try
- (void)viewDidLoad
{
[super viewDidLoad];
UIView *button1, *button2 ;
button1=[UIView new];
button2=[UIView new];
button1.backgroundColor=[UIColor redColor];
button2.backgroundColor=[UIColor yellowColor];
button1.translatesAutoresizingMaskIntoConstraints=button2.translatesAutoresizingMaskIntoConstraints=NO;
[self.view addSubview:button1];
[self.view addSubview:button2];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button1
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:25.0]];
// [self.view addConstraint:[NSLayoutConstraint constraintWithItem:button1
// attribute:NSLayoutAttributeWidth
// relatedBy:NSLayoutRelationEqual
// toItem:nil
// attribute:NSLayoutAttributeNotAnAttribute
// multiplier:1.0
// constant:100]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button1
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:-25.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:30]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:button2
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-30.0]];
//// Yellow
/// Left
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button2
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:25.0]];
//Right
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button2
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:-50.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button2
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:button1
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:30]];
// [self.view addConstraint:[NSLayoutConstraint constraintWithItem:button2
// attribute:NSLayoutAttributeBottom
// relatedBy:NSLayoutRelationEqual
// toItem:self.view
// attribute:NSLayoutAttributeBottom
// multiplier:1.0
// constant:-30.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button2
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:100]];
}
In this I got:
Solution
Regular views don't have any intrinsic size, and you've given the system no hints about how big the views should be, so button 1 gets laid out first with at least 10 points to spare, and view 2 ends up being 0 points high and 0 points wide.
To correct this, make sure that you give both views some horizontal rules, not just one of the views. Secondly, make sure you give the system some idea about height. If you want the views to be equal sizes, you need to tell the system that. Add another horizontal constraint for button 2:
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button2]-|" options:0 metrics:0 views:viewsDictionary];
[[self view] addConstraints:constraints];
Then add a height constraint for the view, in this case, adjust your vertical constraints to make the views equal heights by adding the (==button1) size information:
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[button1]-10-[button2(==button1)]-|"
options:0
metrics:nil
views:viewsDictionary];
Now you should see two views, red on top, yellow on bottom, that take up an equal amount of vertical space, have 10p space between and stretch to 20 points of each side of the container view.
To create these same constraints manually (which I don't recommend), you would do something like this:
UIView* view = [self view]; // for brevity
NSMutableArray* manualConstraints = [NSMutableArray array];
NSLayoutConstraint* b1_top = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
[manualConstraints addObject:b1_top];
NSLayoutConstraint* b1_left = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeLeading multiplier:1 constant:20];
[manualConstraints addObject:b1_left];
NSLayoutConstraint* b1_right = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-20];
[manualConstraints addObject:b1_right];
NSLayoutConstraint* b1_bottom = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:button2 attribute:NSLayoutAttributeTop multiplier:1 constant:-10];
[manualConstraints addObject:b1_bottom];
NSLayoutConstraint* b2_left = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeLeading multiplier:1 constant:20];
[manualConstraints addObject:b2_left];
NSLayoutConstraint* b2_right = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-20];
[manualConstraints addObject:b2_right];
NSLayoutConstraint* b2_bottom = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeBottom multiplier:1 constant:-20];
[manualConstraints addObject:b2_bottom];
NSLayoutConstraint* b2_height = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];
[manualConstraints addObject:b2_height];
// Add all constraints
[view addConstraints:manualConstraints];