Align two uiviews below each other using autoloayout - ios

Question

I am trying desperately to align two views below each other with autolayout hoping to animate them in the future and with a relative position this makes it more rigid than just setting frames and updating etc...
So the code:
// create two views
UIView *one = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
UIView *two = [[UIView alloc] initWithFrame:CGRectMake(0, 150, 50, 50)];
// add some color
[one setBackgroundColor:[UIColor whiteColor]];
[two setBackgroundColor:[UIColor redColor]];
// add them to self ( self = uiview )
[self addSubview:one];
[self addSubview:two];
// make dict
NSDictionary *views = NSDictionaryOfVariableBindings(one, two);
// add constraints to make the views as wide as the container ( self )
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[one]|"
options:0
metrics:nil
views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[two]|"
options:0
metrics:nil
views:views]];
// add constraint to make the second ( two ) item 10px below the first ( one )
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[one]-10-[two]"
options:0
metrics:nil
views:views]];
```
<-- the result
<-- the goal
What am i doing wrong?
Thanks in advance!

Answer 1

These two lines explain it all:
UIView *one = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
UIView *two = [[UIView alloc] initWithFrame:CGRectMake(0, 150, 50, 50)];
This is exactly what you are seeing as a result: both views are 50x50 in size, and view two is placed at x=0 and y=150.
When working with autolayout, you need to forget everything about frames and rects. State what constraints you want, for each view and between views, and let autolayout create the frames behind the scenes.
Declare views for autolayout like this:
UIView *one = [[UIView alloc] init];
one.translatesAutoresizingMaskIntoConstraints = NO;
UIView *two = [[UIView alloc] init];
two.translatesAutoresizingMaskIntoConstraints = NO;

Answer 2

You should not set frames while using constraints. That's what constraints are for. Constraints are the cause, frame is the effect
// create two views
UIView *one = [[UIView alloc] init];
UIView *two = [[UIView alloc] init];
one.translatesAutoresizingMaskIntoConstraints = NO;
two.translatesAutoresizingMaskIntoConstraints = NO;
// add some color
[one setBackgroundColor:[UIColor whiteColor]];
[two setBackgroundColor:[UIColor redColor]];
// add them to self ( self = uiview )
[self addSubview:one];
[self addSubview:two];
// make dict
NSDictionary *views = NSDictionaryOfVariableBindings(one, two);
// add constraints to make the views as wide as the container ( self )
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[one]|"
options:0
metrics:nil
views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[two]|"
options:0
metrics:nil
views:views]];
// add constraint to make the second ( two ) item 10px below the first ( one )
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[one]-10-[two]|"
options:0
metrics:nil
views:views]];
Note: I have changed a constraint in the last line. Your constraints did not specify the height of view two. It would have given you an "AMBIGUOUS" layout.