Use topLayoutGuide and bottomLayoutGuide in Masonry

Masonry is a quite handy framework that you can use code to control constraints flexibly. Here are the link of its github public page.

https://github.com/SnapKit/Masonry

Sometimes, we need to render view on the 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.

View 1 (black) right under Status Bar

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.

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):

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); 

Like what you read? Give Yang Liu (Ben) a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.