Masonry介紹與使用實踐:學習Masonry寫Autolayout

參考文章:  http://www.cocoachina.com/ios/20141219/10702.html

1.

 MASViewAttribute屬性

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文本基線


2. UIView/NSView


if you want view.left to be greater than or equal to label.left :


//these two constraints are exactly the same

make.left.greaterThanOrEqualTo(label);

make.left.greaterThanOrEqualTo(label.mas_left);



3. NSNumber


Auto Layout allows width and height to be set to constant values.

if you want to set view to have a minimum and maximum width you could pass a number to the equality blocks:


//width >= 200 && width <= 400

make.width.greaterThanOrEqualTo(@200);

make.width.lessThanOrEqualTo(@400)


4. NSArray


An array of a mixture of any of the previous types


make.height.equalTo(@[view1.mas_height, view2.mas_height]);

make.height.equalTo(@[view1, view2]);

make.left.equalTo(@[view1, @100, view3.right]);



5.Learn to prioritize n. 優先;優先權


 `.priority` allows you to specify an exact priority


 `.priorityHigh` equivalent to **UILayoutPriorityDefaultHigh**


 `.priorityMedium` is half way between high and low


 `.priorityLow` equivalent to **UILayoutPriorityDefaultLow**


Priorities are can be tacked on to the end of a constraint chain like so:


make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();

make.top.equalTo(label.mas_top).with.priority(600);



6.Composition, composition, composition


Masonry also gives you a few convenience methods which create multiple constraints at the same time. These are called MASCompositeConstraints


edges:

// make top, left, bottom, right equal view2

make.edges.equalTo(view2);


// make top = superview.top + 5, left = superview.left + 10,

//      bottom = superview.bottom - 15, right = superview.right - 20

make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))


size:

// make width and height greater than or equal to titleLabel

make.size.greaterThanOrEqualTo(titleLabel)


// make width = superview.width + 100, height = superview.height - 50

make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))


center:

// make centerX and centerY = button1

make.center.equalTo(button1)


// make centerX = superview.centerX - 5, centerY = superview.centerY + 10

make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))


7.

You can chain view attributes for increased readability:

你可以鏈視圖屬性增加可讀性:

// All edges but the top should equal those of the superview 鏈接

make.left.right.and.bottom.equalTo(superview); 

make.top.equalTo(otherView);



8.

Hold on for dear life

Sometimes you need modify existing constraints in order to animate or remove/replace constraints.

In Masonry there are a few different approaches to updating constraints.

有時你需要修改現有的約束.

在Masonry中你有幾個不同的方法來更新約束

8.1. References 參考, 查閱

You can hold on to a reference of a particular constraint by assigning the result of a constraint make expression to a local variable or a class property.

You could also reference multiple constraints by storing them away in an array.


// in public/private interface

@property (nonatomic, strong) MASConstraint *topConstraint;


// when making constraints

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

}];


// then later you can call

[self.topConstraint uninstall];


8.2 mas_updateConstraints

Alternatively if you are only updating the constant value of the constraint you can use the convience method `mas_updateConstraints` instead of `mas_makeConstraints`


// this is Apple's recommended place for adding/updating constraints

// this method can get called multiple times in response to setNeedsUpdateConstraints

// which can be called by UIKit internally or in your code if you need to trigger an update to your constraints

- (void)updateConstraints {

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

    }];

    

    //according to apple super should be called at end of method

    [super updateConstraints];

}


8.3. mas_remakeConstraints

`mas_updateConstraints` is useful for updating a set of constraints, but doing anything beyond updating constant values can get exhausting. That's where `mas_remakeConstraints` comes in.


`mas_remakeConstraints` is similar to `mas_updateConstraints`, but instead of updating constant values, it will remove all of its contraints before installing them again. This lets you provide different constraints without having to keep around references to ones which you want to remove. 在安裝之前會刪除其所有的約束


- (void)changeButtonPosition {

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

        }

    }];

}


You can find more detailed examples of all three approaches in the **Masonry iOS Examples** project.




(一)

UIView *superview = self;

    int padding = 10;


    //if you want to use Masonry without the mas_ prefix

    //define MAS_SHORTHAND before importing Masonry.h see Masonry iOS Examples-Prefix.pch

    [view1 makeConstraints:^(MASConstraintMaker *make) {

        make.top.greaterThanOrEqualTo(superview.top).offset(padding);

        make.left.equalTo(superview.left).offset(padding);

        make.bottom.equalTo(view3.top).offset(-padding);

        make.right.equalTo(view2.left).offset(-padding);

        make.width.equalTo(view2.width);


        make.height.equalTo(view2.height);

        make.height.equalTo(view3.height);

    }];


    //with is semantic and option

    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(superview.mas_top).with.offset(padding);//with with

        make.left.equalTo(view1.mas_right).offset(padding);//without with

        make.bottom.equalTo(view3.mas_top).offset(-padding);

        make.right.equalTo(superview.mas_right).offset(-padding);

        make.width.equalTo(view1.mas_width);

        

        make.height.equalTo(@[view1, view3]);//can pass array of views

    }];

    

    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(view1.mas_bottom).offset(padding);

        make.left.equalTo(superview.mas_left).offset(padding);

        make.bottom.equalTo(superview.mas_bottom).offset(-padding);

        make.right.equalTo(superview.mas_right).offset(-padding);

        make.height.equalTo(@[view1.mas_height, view2.mas_height]);//can pass array of attributes

    }];



(二): 點擊按鈕增大的效果

- (id)init {

    self = [superinit];

    if (!self)return nil;


    self.growingButton = [UIButtonbuttonWithType:UIButtonTypeSystem];

    [self.growingButtonsetTitle:@"Grow Me!"forState:UIControlStateNormal];

    self.growingButton.layer.borderColor = UIColor.greenColor.CGColor;

    self.growingButton.layer.borderWidth = 3;


    [self.growingButtonaddTarget:selfaction:@selector(didTapGrowButton:)forControlEvents:UIControlEventTouchUpInside];

    [selfaddSubview:self.growingButton];


    self.buttonSize =CGSizeMake(100,100);


    return self;

}


+ (BOOL)requiresConstraintBasedLayout

{

    return YES;

}


// this is Apple's recommended place for adding/updating constraints


- (void)updateConstraints {  


    [self.growingButtonupdateConstraints:^(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);

    }];

    

    //according to apple super should be called at end of method

    [superupdateConstraints];

}


- (void)didTapGrowButton:(UIButton *)button {

    self.buttonSize =CGSizeMake(self.buttonSize.width * 1.3, self.buttonSize.height *1.3);


   // tell constraints they need updating 然後調用updateConstraints方法

    [selfsetNeedsUpdateConstraints];


    // update constraints now so we can animate the change

    [selfupdateConstraintsIfNeeded];


    [UIViewanimateWithDuration:0.4animations:^{

        [selflayoutIfNeeded];

    }];

}


上面用到的UIView的方法UIConstraintBasedLayoutCoreMethods


@interface UIView (UIConstraintBasedLayoutCoreMethods) 

- (void)updateConstraintsIfNeeded NS_AVAILABLE_IOS(6_0); // Updates the constraints from the bottom up for the view hierarchy rooted at the receiver. UIWindow's implementation creates a layout engine if necessary first.

- (void)updateConstraints NS_AVAILABLE_IOS(6_0); // Override this to adjust your special constraints during a constraints update pass

- (BOOL)needsUpdateConstraints NS_AVAILABLE_IOS(6_0);

- (void)setNeedsUpdateConstraints NS_AVAILABLE_IOS(6_0);

@end

// Allows you to perform layout before the drawing cycle happens. -layoutIfNeeded forces layout early

- (void)setNeedsLayout;

- (void)layoutIfNeeded;





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章