Autolayout Visual Format Language – Objective C Sample Code

 Autolayout Visual Format Language – Objective C Sample Code

Written By: Debasis Das (7-May-2015)

Undoubtedly Autolayout is a powerful tool at the hands of Cocoa & iOS Developers. It has a learning curve but gives immense control over UI resize properties to developers.

In this article we will create a simple cocoa application in objective C to demonstrate the Autolayout Visual Format Language where the constraints will be added to the views programmatically, In the various sample code we will see how to add constraints to ensure all the views are resizing proportionately, how to maintain a fixed size for a view while resizing the others.

Note: In this application, we have switched off the autolayout option from the XIB and the entire constraints are being done programmatically

NSAutolayout Sample

NSAutolayout Sample

Autolayout Visual Format Language Sample Code 1 –  Three views resizes with equal width

All Three View equal widths

autolayout visual format language – 3 Views , Equal Width Constraints

-(void)autoLayoutSampleOne{

    [redView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [greenView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [blueView setTranslatesAutoresizingMaskIntoConstraints:NO];
    NSDictionary *views = NSDictionaryOfVariableBindings(redView, greenView,blueView);

    NSArray *horizontalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView]-20-[greenView]-20-[blueView]-20-|" options:0 metrics:nil views:views];
    NSArray *equalWidthConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"[redView(==greenView)]" options:0 metrics:nil views:views];
    NSArray *equalWidthConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"[greenView(==blueView)]" options:0 metrics:nil views:views];
    NSArray *verticalConstraints1 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[redView]-20-|" options:0 metrics:nil views:views];
    NSArray *verticalConstraints2 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[greenView]-20-|" options:0 metrics:nil views:views];
    NSArray *verticalConstraints3 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView]-20-|" options:0 metrics:nil views:views];
    
    [self.window.contentView addConstraints:horizontalConstraints];
    [self.window.contentView addConstraints:equalWidthConstraints1];
    [self.window.contentView addConstraints:equalWidthConstraints2];
    [self.window.contentView addConstraints:verticalConstraints1];
    [self.window.contentView addConstraints:verticalConstraints2];
    [self.window.contentView addConstraints:verticalConstraints3];
    NSLog(@"%@",[self.window.contentView constraints]);
}

Autolayout Visual Format Language Sample Code 2 –  Three View resizes in ratio 1:2:4

AutoLayout Sample Code

Red Green Blue in 1_2_4 Ratio

autolayout visual format language – Red , Green and Blue in 1:2:4 Ratio

-(void)autoLayoutSampleTwo{

    [redView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [greenView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [blueView setTranslatesAutoresizingMaskIntoConstraints:NO];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(redView, greenView,blueView);
    
    NSArray *horizontalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView]-20-[greenView]-20-[blueView]-20-|"  options:0 metrics:nil views:views];
    NSLayoutConstraint * widthConstraints1 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:greenView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    NSLayoutConstraint * widthConstraints2 = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    NSArray *verticalConstraints1 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[redView]-20-|"  options:0 metrics:nil views:views];
    NSArray *verticalConstraints2 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[greenView]-20-|" options:0 metrics:nil views:views];
    NSArray *verticalConstraints3 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView]-20-|" options:0 metrics:nil views:views];
    
    [self.window.contentView addConstraints:horizontalConstraints];
    [self.window.contentView addConstraint:widthConstraints1];
    [self.window.contentView addConstraint:widthConstraints2];
    [self.window.contentView addConstraints:verticalConstraints1];
    [self.window.contentView addConstraints:verticalConstraints2];
    [self.window.contentView addConstraints:verticalConstraints3];

    NSLog(@"%@",[self.window.contentView constraints]);
}

Autolayout Visual Format Language Sample Code 3 –  Red View is Fixed Size, Green and Blue Resizes with equal width

Red View Constant Size

autolayout visual format language – Fixed Size Constraint for Red, Green and Blue of Equal Width

-(void)autoLayoutSampleThree{
    [redView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [greenView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [blueView setTranslatesAutoresizingMaskIntoConstraints:NO];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(redView, greenView,blueView);
    
    NSArray *horizontalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView(200)]-20-[greenView]-20-[blueView]-20-|" options:0 metrics:nil views:views];
    NSArray *equalWidthConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"[greenView(==blueView)]" options:0 metrics:nil views:views];
    NSArray *verticalConstraints1 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[redView]-20-|" options:0 metrics:nil views:views];
    NSArray *verticalConstraints2 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[greenView]-20-|" options:0 metrics:nil views:views];
    NSArray *verticalConstraints3 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView]-20-|" options:0 metrics:nil views:views];
    
    [self.window.contentView addConstraints:horizontalConstraints];
    [self.window.contentView addConstraints:equalWidthConstraints2];
    [self.window.contentView addConstraints:verticalConstraints1];
    [self.window.contentView addConstraints:verticalConstraints2];
    [self.window.contentView addConstraints:verticalConstraints3];

    NSLog(@"%@",[self.window.contentView constraints]);
}

Autolayout Visual Format Language Sample Code 4 –  2 Fixed View Widths and Center View Resizes with window resize

Only Center View Expland

autolayout visual format language – Green Resizes as the window Resizes, Red and Blue remain of constant width

-(void)autoLayoutSampleFour{

    [redView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [greenView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [blueView setTranslatesAutoresizingMaskIntoConstraints:NO];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(redView, greenView,blueView);
    
    NSArray *horizontalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView(200)]-20-[greenView]-20-[blueView(200)]-20-|" options:0 metrics:nil views:views];
    NSArray *verticalConstraints1 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[redView]-20-|"  options:0 metrics:nil views:views];
    NSArray *verticalConstraints2 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[greenView]-20-|" options:0 metrics:nil views:views];
    NSArray *verticalConstraints3 =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView]-20-|" options:0 metrics:nil views:views];
    
    [self.window.contentView addConstraints:horizontalConstraints];
    [self.window.contentView addConstraints:verticalConstraints1];
    [self.window.contentView addConstraints:verticalConstraints2];
    [self.window.contentView addConstraints:verticalConstraints3];
    NSLog(@"%@",[self.window.contentView constraints]);
}

Download the sample code from here
Also Read the Swift Autolayout Visual Format Language – Sample Code

Posted in Cocoa, Objective C Tagged with: , , ,
One comment on “Autolayout Visual Format Language – Objective C Sample Code
  1. Ramesh says:

    Supreme Article. even iOS Development beginner also can understand easily.

1 Pings/Trackbacks for "Autolayout Visual Format Language – Objective C Sample Code"
  1. […] Autolayout Visual Format Language – Objective C Sample Code Posted in Cocoa, Swift Tagged with: Autolayout Visual Format, NSLayout, NSLayoutConstraint, […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news