How ensure a clean stacking of several dynamic UIView with Autolayout

Question

Several times, I need to stack views which height that expect to change.

I code this https://github.com/damienromito/UIView-AutoYPositioning

stack dynamic views http://romito.fr/public/images/UIView+AutoYPositioning.jpg

But I think a best solution with NSLayoutConstraint. Someone knows?

EDIT

Solution programmatically with autolayout:

UIView *one = [[UIView alloc]init];
one.backgroundColor = [UIColor redColor];
one.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:one];

UIView *two = [[UIView alloc]init];
two.backgroundColor = [UIColor blueColor];
two.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:two];

UIView *three = [[UIView alloc]init];
three.backgroundColor = [UIColor yellowColor];
three.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:three];

NSDictionary *metrics = @{@"height":@50.0};
NSDictionary *views = NSDictionaryOfVariableBindings(one,two,three);

[self.view addConstraints:[NSLayoutConstraint
                           constraintsWithVisualFormat:@"|-[one]-|"
                           options: 0
                           metrics:metrics
                           views:views]];


[self.view addConstraints:[NSLayoutConstraint
                           constraintsWithVisualFormat:@"V:|-[one]-[two(300)]-[three(100)]-|"
                           options:NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight
                           metrics:metrics
                           views:views]];

Refer you to this tutorial (http://commandshift.co.uk/blog/2013/01/31/visual-format-language-for-autolayout/) as explanation

Answer 1

Solution programmatically with autolayout:

UIView *one = [[UIView alloc]init];
one.backgroundColor = [UIColor redColor];
one.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:one];

UIView *two = [[UIView alloc]init];
two.backgroundColor = [UIColor blueColor];
two.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:two];

UIView *three = [[UIView alloc]init];
three.backgroundColor = [UIColor yellowColor];
three.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:three];

NSDictionary *metrics = @{@"height":@50.0};
NSDictionary *views = NSDictionaryOfVariableBindings(one,two,three);

[self.view addConstraints:[NSLayoutConstraint
                           constraintsWithVisualFormat:@"|-[one]-|"
                           options: 0
                           metrics:metrics
                           views:views]];


[self.view addConstraints:[NSLayoutConstraint
                           constraintsWithVisualFormat:@"V:|-[one]-[two(300)]-[three(100)]-|"
                           options:NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight
                           metrics:metrics
                           views:views]];

Refer you to this tutorial (http://commandshift.co.uk/blog/2013/01/31/visual-format-language-for-autolayout/) as explanation

To help me, I developed a Category for UIView : https://github.com/damienromito/UIView-UpdateAutoLayoutConstraints (able to hide/show autolayout view)

Answer 2

Here is some tutorials on auto layout. Raywenderlinch-1, Raywenderlinch-2,