iOS Masonry 一些日常使用方法

b10l07發表於2018-09-20

本人喜歡用純程式碼寫佈局,那麼用的最多的肯定是Masonry,那麼現在就把我的一些使用的心得分享給大家.

首先是Masonry基本用法:使用它必須要先把控制元件物件新增到父檢視上,然後再對它進行佈局,不然編譯會報錯.
首先你要包含標頭檔案才能使用它

#import <Masonry/Masonry.h>

如在self.view上新增一個UILabel
下面是錯誤的例子

- (void)xn_initSomeSubViews {
    UILabel *firstLabel = [UILabel new];
    [firstLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(self.view).offset(100);
        make.size.mas_equalTo(CGSizeMake(200, 50));
    }];
    [self.view addSubview:firstLabel];//這樣寫實錯誤的,控制元件必須先新增,把這個放到佈局前面
    firstLabel.backgroundColor = [UIColor greenColor];
}

這個是正確的例子

- (void)xn_initSomeSubViews {
    UILabel *firstLabel = [UILabel new];
    [self.view addSubview:firstLabel];//必須先新增
    [firstLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(self.view).offset(100);
        make.size.mas_equalTo(CGSizeMake(200, 50));
    }];
    firstLabel.backgroundColor = [UIColor greenColor];
}

image.png

這樣一個控制元件的佈局就寫好了!

Masonry的常用方法除了mas_makeConstraints是初始化佈局,還有mas_updateConstraints(更新約束),一般是更新已經存在的約束,注意已經存在的基礎物件不變,只是更新距離尺寸,如果需要重新寫約束可以用mas_remakeConstraints方法,它是把你之前設定的約束移除後重新進行新的約束.

- (void)xn_initSomeSubViews {
    UILabel *firstLabel = [UILabel new];
    UIButton *changgeButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.view addSubview:firstLabel];//必須先新增
    [self.view addSubview:changgeButton];
    [firstLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(self.view).offset(100);
        make.size.mas_equalTo(CGSizeMake(200, 50));
    }];
    
    [changgeButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(firstLabel);
        make.top.equalTo(firstLabel.mas_bottom).offset(100);
        make.size.mas_equalTo(CGSizeMake(200, 50));
    }];
    [changgeButton addTarget:self action:@selector(clickAction_change:) forControlEvents:UIControlEventTouchUpInside];
    changgeButton.backgroundColor = [UIColor yellowColor];
    [changgeButton setTitle:@"更新約束" forState:UIControlStateNormal];
    [changgeButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    changgeButton.titleLabel.font = [UIFont systemFontOfSize:16];
    firstLabel.backgroundColor = [UIColor greenColor];
}

- (void)clickAction_change:(UIButton *)sender {
    //更新約束
    [sender mas_updateConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(100, 100));
    }];
    
    //其實之前寫的兩條約束還是在的就相當於以下程式碼
    /**
     [sender mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(firstLabel);
        make.top.equalTo(firstLabel.mas_bottom).offset(100);
        make.size.mas_equalTo(CGSizeMake(100, 100));;//只是更新了這個約束
     }];
     但是由於在這裡拿不到firstLabel這個物件,所以不能用這個方法
     */
}

初始佈局約束

點選更新後的佈局

如果需要重新設定changgeButton約束,可以使用mas_remakeConstraints方法:

- (void)clickAction_change:(UIButton *)sender {
    
    [sender mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(self.view).offset(200);
        make.size.mas_equalTo(CGSizeMake(100, 100));
    }];
    
}

重新設定約束後

說這些簡單的基礎的應用後,我們們再說一些比較複雜的應用,我們日常使用中也會使用到scrollView,對scrollView使用Masonry就需要注意一些東西了,我們使用frame佈局scrollView時要設定scrollView的frame和contentSize,那麼Masonry佈局scrollView時我們通常要給他加一個相當於contentView的子檢視,然後在這個子檢視上佈局其他的子檢視.

在這裡要介紹一個不怎麼使用的方法,但是偶爾也會用它,多個檢視(最少三個)需要等比佈局時可以將需要佈局的檢視加入到陣列中進行統一佈局
[array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:5 tailSpacing:5];

- (void)xn_initScorllViewSubViews {
    
    UIButton *changgeButton = [UIButton buttonWithType:UIButtonTypeCustom];
    UIView *contentView = [UIView new];//加個子檢視作為內容檢視
    UIView *firstView = [UIView new];
    UIView *secondView = [UIView new];
    UIView *ThirdView = [UIView new];
    UIView *forthView = [UIView new];
    UIView *fifthView = [UIView new];
    NSArray *array = [NSArray arrayWithObjects:ThirdView, forthView, fifthView, nil];//加入到陣列中
    
    [self.view addSubview:self.scrollView];
    [self.scrollView addSubview:contentView];
    [contentView addSubview:firstView];
    [contentView addSubview:secondView];
    [contentView addSubview:ThirdView];
    [contentView addSubview:forthView];
    [contentView addSubview:fifthView];
    [contentView addSubview:changgeButton];
    
    [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view);
    }];
    [contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.scrollView);
        make.width.equalTo(self.scrollView);
        make.height.equalTo(self.scrollView);
    }];
    [firstView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(contentView);
        make.top.equalTo(contentView).offset(100);
        make.size.mas_equalTo(CGSizeMake(200, 50));
    }];
    [secondView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(contentView);
        make.top.equalTo(contentView).offset(200);
        make.width.equalTo(firstView).multipliedBy(0.33);
        make.height.equalTo(firstView).multipliedBy(0.88);
    }];
    [changgeButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(contentView);
        make.top.equalTo(contentView).offset(740);
        make.size.mas_equalTo(CGSizeMake(200, 50));
    }];
    /**
     *  多個控制元件固定間隔的等間隔排列，變化的是控制元件的長度或者寬度值
     *
     *  @param axisType        軸線方向
     *  @param fixedSpacing    間隔大小
     *  @param leadSpacing     頭部間隔
     *  @param tailSpacing     尾部間隔
     */
    //橫向排列 間隔距離固定 array中的元素必須最少要三個
    [array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:5 tailSpacing:5];
    
    //橫向排列 控制元件長度固定
//    [array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:100 leadSpacing:5 tailSpacing:5];
    [array mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(contentView).offset(300);
        make.height.mas_equalTo(50);
    }];
    
    //縱向排列
//    [array mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:50 leadSpacing:280 tailSpacing:200];
//    [array mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.centerX.equalTo(contentView);
//        make.width.mas_equalTo(100);
//    }];

    
    contentView.backgroundColor = [UIColor lightGrayColor];
    firstView.backgroundColor = [UIColor greenColor];
    secondView.backgroundColor = [UIColor orangeColor];
    ThirdView.backgroundColor = [UIColor redColor];
    forthView.backgroundColor = [UIColor cyanColor];
    fifthView.backgroundColor = [UIColor blueColor];
    [changgeButton addTarget:self action:@selector(clickAction_change:) forControlEvents:UIControlEventTouchUpInside];
    changgeButton.backgroundColor = [UIColor yellowColor];
    [changgeButton setTitle:@"更新約束" forState:UIControlStateNormal];
    [changgeButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    changgeButton.titleLabel.font = [UIFont systemFontOfSize:16];
}

- (UIScrollView *)scrollView {
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc]init];
        _scrollView.pagingEnabled = YES;
        _scrollView.showsVerticalScrollIndicator = NO;
        _scrollView.showsHorizontalScrollIndicator = NO;
    }
    return _scrollView;
}

橫向排列控制元件長度固定

橫向排列控制元件長度固定

[橫向排列間隔距離固定

橫向排列間隔距離固定

縱向排列間隔距離固定

縱向排列間隔距離固定

有必要說下這一段程式碼

[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.scrollView);
        make.width.equalTo(self.scrollView);
        make.height.equalTo(self.scrollView);
    }];

如果你想要self.scrollView的contentsize顯示的內容與子檢視內容多少有關比如你想以最後一個檢視的底部距離一些距離

那麼就要這麼寫了,不要設定高度,等到最後一個子檢視設定完後再設一遍距離底部的約束

[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.scrollView);
        make.width.equalTo(self.scrollView);
    }];
..........
//最後設定底部距離第五個檢視的底部100距離
[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(fifthView.mas_bottom).offset(100);
    }];
contentView.backgroundColor = [UIColor lightGrayColor];
    firstView.backgroundColor = [UIColor greenColor];
    secondView.backgroundColor = [UIColor orangeColor];
    ThirdView.backgroundColor = [UIColor redColor];
    forthView.backgroundColor = [UIColor cyanColor];
    fifthView.backgroundColor = [UIColor blueColor];
    [changgeButton addTarget:self action:@selector(clickAction_change:) forControlEvents:UIControlEventTouchUpInside];
    changgeButton.backgroundColor = [UIColor yellowColor];
    [changgeButton setTitle:@"更新約束" forState:UIControlStateNormal];
    [changgeButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    changgeButton.titleLabel.font = [UIFont systemFontOfSize:16];

灰色部分是self.scrollView的內容部分

不設定高度佈局

好了,這次關於Masonry的日常使用分享就到這,喜歡的小夥伴點個贊哦!

IOS基礎-Masonry 練習
2018-03-30
iOS
vue3 瀑布流 vue-masonry使用方法
2024-03-14
Vue
關於 Masonry 的一些思考（下）
2018-06-11
iOS自動佈局——Masonry詳解
2018-10-30
iOS
iOS開發之原始碼解析 - Masonry
2017-12-25
iOS原始碼
iOS開發-Masonry約束寬高比
2019-04-11
iOS
iOS 自動佈局框架 – Masonry 詳解
2017-01-10
iOS框架
iOS自動佈局框架 - Masonry詳解
2017-01-08
iOS框架
mongodb 的一些日常操作
2014-11-26
MongoDB
iOS進階之masonry細緻入微_MASUtilities.h
2019-01-15
iOS
iOS學習之Masonry第三方框架
2016-10-27
iOS框架
【iOS】Masonry 和 FDTemplateLayoutCell 搭配使用「UITableview 自適應內容高度」
2017-03-07
iOSUIView
Masonry進階
2015-12-10
Masonry學習
2015-09-18
axios baseURL 的使用方法
2020-06-23
iOS
iOS Masonry 等間隔或等寬高排列多個控制元件
2017-09-22
iOS控制元件
記錄一些日常的小問題（前端）
2018-11-28
前端
一些MongoDB基本命令及使用方法
2021-02-25
MongoDB
iOS-日常開發常用巨集定義
2019-03-05
iOS
移動開發—iOS日常面試問題
2021-05-18
移動開發iOS面試
axios 攔截器的使用方法
2020-07-01
iOS
[IOS開發教程] NSfileManager的使用方法
2015-12-26
iOS
Masonry原始碼解讀
2018-12-28
原始碼
三、日常運維指令碼編寫一些技巧
2018-08-15
運維指令碼
IOS日常開發中遇到的小問題
2016-09-01
iOS
axios常見的使用方法（精選）
2020-12-29
iOS
日常工作最常用的一些DOS命令總結
2018-05-25
Masonry 原始碼學習整理
2019-03-04
原始碼
Masonry 原始碼解讀（上）
2018-04-28
原始碼
Masonry 原始碼解讀（下）
2018-05-04
原始碼
Masonry自動佈局使用
2015-12-18
開發日常適配iOS11和iPhone X
2017-12-13
iOSiPhone
【總結】日常遇到的一些問題相關知識
2017-03-10
Masonry 關於ScrollView的使用
2016-08-01
View
iOS中一些程式碼
2014-03-30
iOS
iOS開發UI中懶載入的使用方法
2015-10-30
iOSUI
日常遇到的一些問題或知識的筆記（二）
2019-01-09
筆記
日常遇到的一些問題或知識的筆記（一）
2018-12-10
筆記

iOS Masonry 一些日常使用方法

相關文章