Use topLayoutGuide and bottomLayoutGuide in Masonry

Introduction

Masonry is a quite handy framework that you can use code to control constraints with a range of fexibility. Here is the link of its github public page:

https://github.com/SnapKit/Masonry

Sometimes, we need to render view under the status bar or navigation bar. In this tutorial there will be two examples on this:

Example 1: Put the view right under the status bar

Use the attribute [UIApplication sharedApplication] statusBarFrame].size.height to get the height of the status bar.

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    UIView *sv= self.view;
    UIView *view1= [[UIView alloc] init];
    [sv addSubview:view1];
    view1.backgroundColor= [UIColor colorWithRed:0 green:0 blue:0 alpha:1.0];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@([[UIApplication sharedApplication] statusBarFrame].size.height));
        make.left.equalTo(sv).with.offset(20);
        make.right.equalTo(sv).with.offset(-20);
        make.height.equalTo(sv.mas_height).with.multipliedBy(0.5);
    }];
}

Example 2: put the view right under the navigation bar

You will see part of the top view 1 (black) is overlapped with navigation bar.

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    UIView *sv= self.view;
    UIView *view1= [[UIView alloc] init];
    [sv addSubview:view1];
    view1.backgroundColor= [UIColor colorWithRed:0 green:0 blue:0 alpha:1.0];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(sv);
        make.left.equalTo(sv).with.offset(20);
        make.right.equalTo(sv).with.offset(-20);
        make.height.equalTo(sv.mas_height).with.multipliedBy(0.5);
    }];
}

You will see part of the top view 1 (black) is overlapped with navigation bar. Why? That is because we put the view1 to the sv (super view).s top. So how do we fix this?In order to make the view 1 right under the navigation bar, we can use mas_topLayoutGuide which is a new attribute coming along with the new version of the Masonry (another one is mas_bottomLayoutGuide):

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    UIView *sv= self.view;
    UIView *view1= [[UIView alloc] init];
    [sv addSubview:view1];
    view1.backgroundColor= [UIColor colorWithRed:0 green:0 blue:0 alpha:1.0];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.mas_topLayoutGuide);
        make.left.equalTo(sv).with.offset(20);
        make.right.equalTo(sv).with.offset(-20);
        make.height.equalTo(sv.mas_height).with.multipliedBy(0.5);
    }];
}

So you can see our view 1 is right under the navigation bar.There is also another way of doing this, we can directly use the length of the topLayoutGuide:

make.top.equalTo(self.view.mas_top).with.offset(self.topLayoutGuide.length);