自動布局－Masonry

一、簡介

Masonry是NSLayoutConstraint的一種簡易書寫版本，沒有更多的封裝功能

二、系統(tǒng)AutoLayout更新布局的幾個方法

  • setNeedsLayout：告知頁面需要更新，但是不會立刻開始更新。執(zhí)行后會立刻調(diào)用layoutSubviews。
  • layoutIfNeeded：告知頁面布局立刻更新。所以一般都會和setNeedsLayout一起使用。如果希望立刻生成新的frame需要調(diào)用此方法，利用這點一般布局動畫可以在更新布局后直接使用這個方法讓動畫生效。
  • layoutSubviews：系統(tǒng)重寫布局，重載這個方法實現(xiàn)自定義布局，這個方法官方不建議顯示調(diào)用，建議依次調(diào)用setNeedsLayout和layoutIfNeeded即會自動調(diào)用該方法
  • setNeedsUpdateConstraints：告知需要更新約束，但是不會立即開始
  • updateConstrainsIfNeed：告知立即更新約束
  • updateConstraints：系統(tǒng)更新約束，重載次方法進行自定義約束，不建議顯示調(diào)用，依次調(diào)用setNeedsUpdateConstraints和updateConstrainsIfNeed即會觸發(fā)該方法

三、使用

  • mas_makeContraints：添加約束，不能對同一個對象設置兩個不同的約束
  • mas_updateConstraints：更新約束，對已有約束的對象，只能更新其右設置約束的屬性，且參照物要和原先保持一致，否則會異常；對不存在約束的對象，效果和mas_makeContraints一樣
  • mas_remakeContraints：清除之前的所有約束，添加新約束
  • multipliedBy：屬性約束值為約束對象的倍數(shù),比如下面代碼設置topInnerView的寬度是其高度的3倍
[self.topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
           make.width.equalTo(self.topInnerView.mas_height).multipliedBy(3);
           
           make.width.and.height.lessThanOrEqualTo(self.topView);
           make.width.and.height.equalTo(self.topView).with.priorityLow();
           
           make.center.equalTo(self.topView);
       }];
  • dividedBy：屬性約束值是約束對象的幾分之一
  • priorityLow：設置約束優(yōu)先級大于MASLayoutPriorityLow
  • #define MAS_SHORTHAND_GLOBALS：使用全局宏定義，可以使equalTo等效于mas_equalTo
    #define MAS_SHORTHAND：可以在調(diào)用masonry方法的時候不使用mas_前綴,一般在#import "Masonry.h"前加入這兩個宏
  • insets:動態(tài)修改試圖約束
// 創(chuàng)建視圖約束
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
      self.animatableConstraint = make.edges.equalTo(superview).insets(paddingInsets).priorityLow();
]];
// 更改約束 （另一處方法中）
UIEdgeInsets paddingInsets = UIEdgeInsetsMake(padding, padding, padding, padding);
self.animatableConstraint.insets = paddingInsets；
[self layoutIfNeeded]; //通過UIView animateWithDuration可以實現(xiàn)動畫
  • debug模式：可以將對應的控件指針替換為你寫的key
/ 對某個view添加key值
greenView.mas_key = @"greenView";
// 或者如下順序
MASAttachKeys(greenView, redView, blueView, superview);
// 同樣的對每條約束亦可以添加key，key可以是任何對象
make.height.greaterThanOrEqualTo(@5000).key(@"ConstantConstraint2");
make.height.equalTo(redView.mas_height).key(@340954); //anything can be a key
  • preferredMaxLayoutWidth: label多行約束
- (void)layoutSubviews {
    [super layoutSubviews];

    //多行l(wèi)abel設置preferredMaxLayoutWidth需要在[super layoutSubviews];之后
    self.longLabel.preferredMaxLayoutWidth = width;
    //preferredMaxLayoutWidth設置完后需要重新計算，因此需重新調(diào)用[super layoutSubviews];
    [super layoutSubviews];
}
  • scrollview自動計算contenSize 
    UIView* contentView = UIView.new;
    [self.scrollView addSubview:contentView];
    
    [contentView makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.scrollView);
        make.width.equalTo(self.scrollView);
    }];
    
    UIView *lastView;
    CGFloat height = 25;
    
    for (int i = 0; i < 10; i++) {
        UIView *view = UIView.new;
        view.backgroundColor = [self randomColor];
        [contentView addSubview:view];

        [view mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(lastView ? lastView.bottom : @0);
            make.left.equalTo(@0);
            make.width.equalTo(contentView.width);
            make.height.equalTo(@(height));
        }];
        
        height += 25;
        lastView = view;
    }
    
    [contentView makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(lastView.bottom);
    }];
  • 更新一組控件的約束
- (void)setupUI()
{
    [lowerButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self).with.offset(10.0);
    }];

    [centerButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self);
    }];

    [raiseButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self).with.offset(-10);
    }];
    
    self.buttonViews = @[ raiseButton, lowerButton, centerButton ];
}

- (void)updateConstraints {
    [self.buttonViews updateConstraints:^(MASConstraintMaker *make) {
        make.baseline.equalTo(self.mas_centerY).with.offset(self.offset);
    }];
    
    //according to apple super should be called at end of method
    [super updateConstraints];
}
  • 鏈式寫法
//相當于
//make.top.equalTo(superview).insets(padding);
//make.left.equalTo(superview).insets(padding);  
make.top.and.left.equalTo(superview).insets(padding);
  
//相當于
//make.left.equalTo(superview).insets(padding);
//make.right.equalTo(superview).insets(padding);  
//make.bottom.equalTo(superview).insets(padding); 
make.left.right.and.bottom.equalTo(superview).insets(padding);

make.width.and.height.lessThanOrEqualTo(self.topView);
  • 等間距排列
/**
 *  多個控件固定間隔的等間隔排列，變化的是控件的長度或者寬度值
 *
 *  @param axisType        軸線方向
 *  @param fixedSpacing    間隔大小
 *  @param leadSpacing     頭部間隔
 *  @param tailSpacing     尾部間隔
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType 
                    withFixedSpacing:(CGFloat)fixedSpacing 
                         leadSpacing:(CGFloat)leadSpacing 
                         tailSpacing:(CGFloat)tailSpacing;

/**
 *  多個固定大小的控件的等間隔排列,變化的是間隔的空隙
 *
 *  @param axisType        軸線方向
 *  @param fixedItemLength 每個控件的固定長度或者寬度值
 *  @param leadSpacing     頭部間隔
 *  @param tailSpacing     尾部間隔
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType 
                 withFixedItemLength:(CGFloat)fixedItemLength 
                         leadSpacing:(CGFloat)leadSpacing 
                         tailSpacing:(CGFloat)tailSpacing;
  • mas_topLayoutGuide: 有導航欄的話，緊貼著導航欄，沒有導航欄的話，緊貼self.view
    [topView makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.mas_topLayoutGuide);
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
        make.height.equalTo(@40);
    }];
  • mas_bottomLayoutGuide: 有tabbar的時候，緊貼tabbar，沒有tabbar的話，緊貼self.view
    [bottomView makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(self.mas_bottomLayoutGuide);
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
        make.height.equalTo(@40);
    }];

四、源碼

Github

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • Masonry是對AutoLayout封裝而成的一個輕量級的布局框架。其語法優(yōu)雅、代碼簡潔，可讀性很高，而且同時支...
    蹲瓜閱讀 6,184評論 0贊 12
  • 以上是純手寫代碼所經(jīng)歷的關(guān)于頁面布局的三個時期 在iphone1-iphone3gs時代 window的size固...
    UILabelkell閱讀 587評論 0贊 2
  • 前言 UI布局是整個前端體系里不可或缺的一環(huán)。代碼的布局是設計語言與用戶視覺感受溝通的橋梁，不論它看起來多么簡單或...
    oceanLong閱讀 2,925評論 1贊 2
  • http://www.lxweimin.com/p/yuCytg QQ.png 兩個重要概念：約束、參照 約束：二者...
    Arthur澪閱讀 715評論 0贊 0
  • 需要適配的手機的尺寸 1.iphone4 4s (320 480)2.iphone5 5s (320 568...
    Molary閱讀 2,438評論 0贊 7