Masonry Studying

What is Masonry?

Masonry is a kind of third part framework to implement auto-layout easiliy. We can also use xib and NSLayout on iOS project for autolayout, but in my opinion, Masonry is a good way to achieve the same goal programaticlly.

Masonry is a light-weight layout framework which wraps AutoLayout with a nicer syntax. Masonry has its own layout DSL which provides a chainable way of describing your NSLayoutConstraints which results in layout code that is more concise and readable. Masonry supports iOS and Mac OS X.
--From Masonry Officially

How to use Masonry?

The grammar of Masonry is very easy, we don't need a lot of time to study it. By the way, Masony is still based on Autolayout API, but it offers more easily understand grammar for developers.

1. Vist the largest Same-Gender social networking site--Github.
2. Integrate Masonry to your project by Cocoapods.
3. Import "Masonry.h"
4. Use it follow its grammar.
5. Start driving!

One more step look into Masonry

1. We can use Masonry function easily like this:

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
    make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
    make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];

From above coding, we just make padding constrains of view1 which can be read easily and just define all of constains in the block.

2. We can define all of constrains attributs like following table:

MASViewAttribute	NSLayoutAttribute
view.mas_left	NSLayoutAttributeLeft
view.mas_right	NSLayoutAttributeRight
view.mas_top	NSLayoutAttributeTop
view.mas_bottom	NSLayoutAttributeBottom
view.mas_leading	NSLayoutAttributeLeading
view.mas_trailing	NSLayoutAttributeTrailing
view.mas_width	NSLayoutAttributeWidth
view.mas_height	NSLayoutAttributeHeight
view.mas_centerX	NSLayoutAttributeCenterX
view.mas_centerY	NSLayoutAttributeCenterY
view.mas_baseline	NSLayoutAttributeBaseline

Frome above table we can find Masonry view attributes and NSLayoutAttributes one-to-one corresponding relations. It can help us to understand Masonry attributes easily.Actually, Masonry use dot "." grammar like objective-c, so it is easy to read like nature language, such as English.

3. We can define one attribut relative to another attribut like following codes:
   a. Basic syntax

//let view.left greater or equal to lable.left, actually these two constrains are exactly same
make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);
// let view.width >= 200 && view.width <= 400
make.width.lessThanOrEqualTo(@400);
make.width.greaterThanOrEqualTo(@200);
// let view.letf offset from superview.left
make.left.equalTo(superview).mas_offset(10.0);
// use NSArray 
make.height.equalTo(@[view1.mas_height, view2.mas_height]);

b. Prioritize

.priority allows you to specify an exact priority
.priorityHigh equivalent to UILayoutPriorityDefaultHigh
.priorityMedium is half way between high and low
.priorityLow equivalent to UILayoutPriorityDefaultLow

make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
make.top.equalTo(label.mas_top).with.priority(600);

c.mas_makeConstrains,mas_remakeConstrains,mas_upDateConstrains
1.mas_makeConstrains can add one or more attributes on the view object. It will not affect other attributes wich we have added before.

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top);
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
}];

2.mas_remakeConstrains can add a set of constrains on the view, but in the same time it will reomove all of constrians which we have added before.

[self.button mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(self.buttonSize);

        if (topLeft) {
            make.top.and.left.offset(10);
        } else {
            make.bottom.and.right.offset(-10);
        }
    }];

3.mas_updateConstrains can update constrains on the view

[self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self);
        make.width.equalTo(@(self.buttonSize.width)).priorityLow();
        make.height.equalTo(@(self.buttonSize.height)).priorityLow();
        make.width.lessThanOrEqualTo(self);
        make.height.lessThanOrEqualTo(self);
    }];

The most important part

Masonry is useful and powerful, but we should be careful of some details of it.

1. We cannot get frame value immediately after set constrains by Masonry, if we want to get correct frame, we should use [view setIfNeedLayout] to update the layout.
2. mas_updateConstraints can update constrains, but it can only update the constains which we have set before, and the relative superview must be the same as previouse one.