Autolayout Tricks - Part 2

Create nested views structure with Autolayout. (Based on the idea and implementation based on iOS - Autolayout Demystified)

While going through Erica Sadun's above mentioned book, I came across interesting problem on how to arrange nested views into each other making beautiful structure.

It was quite a challenge for me as I had never done something like that. But nevertheless it was quite fun to work on.

Here's how I did it:

Say you have 4 views you want to arrange in nested format. Let's say they are superView1, superView2, superView3 and superView4. Where superView1 is a outermost parent view while superView4 is a innerMost child view.

Let's say we are adding them to self.view which acts as an ultimate parent view for all of them.

Instantiate all concerned views before adding them in the view and decorating them with NSLayoutConstraints

 UIView* superView1 = [UIView new];
 UIView* superView2 = [UIView new];
 UIView* superView3 = [UIView new];
 UIView* superView4 = [UIView new];
    
 NSDictionary* views3 = NSDictionaryOfVariableBindings (superView1, superView2, superView3, superView4);   
 NSDictionary* metrics = @{ @"padding" : @(10), @"custompPadding": @(20)};

 [self.view addSubview:superView1];
 [superView1 addSubview:superView2];
 [superView2 addSubview:superView3];
 [superView3 addSubview:superView4];

 superView1.backgroundColor = [UIColor lightGrayColor];
 superView2.backgroundColor = [UIColor blackColor];
 superView3.backgroundColor = [UIColor blueColor];
 superView4.backgroundColor = [UIColor purpleColor];

Now, let's add constraints to superView1 first,

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-300-[superView1(150)]"
                                                                      options:kNilOptions
                                                                      metrics:metrics
                                                                        views:views3]];
    
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-padding-[superView1]-padding-|"
                                                                      options:kNilOptions
                                                                      metrics:metrics
                                                                        views:views3]];

Create a collection of subViews to be added to superView1.

NSArray* viewsCollection = @[@"superView2", @"superView3", @"superView4"];

Now successfully iterate over them adding and constraining them to their respective super views

for (NSString* v in viewsCollection) {
        NSString* hVisualConstraintLayoutString = [NSString stringWithFormat:@"H:|-custompPadding-[%@]-custompPadding-|", v];
        NSString *vVisualConstraintLayoutString = [NSString stringWithFormat:@"V:|-custompPadding-[%@]-custompPadding-|", v];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:hVisualConstraintLayoutString
                                                                          options:kNilOptions
                                                                          metrics:metrics
                                                                            views:views3]];
        
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vVisualConstraintLayoutString
                                                                          options:kNilOptions
                                                                          metrics:metrics
                                                                            views:views3]];
}

And this is how it looks in the final design,

Hope this will help someone who is trying to make complicated deign like or similar to this. Also thanks to Erica Sadun for lucid explanation on the complicated logic.