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的日常使用分享就到這,喜歡的小夥伴點個贊哦!

Masonry 使用方法整理
2018-05-09
IOS基礎-Masonry 練習
2018-03-30
iOS
vue3 瀑布流 vue-masonry使用方法
2024-03-14
Vue
iOS自動佈局——Masonry詳解
2018-10-30
iOS
關於 Masonry 的一些思考（下）
2018-06-11
iOS開發-Masonry約束寬高比
2019-04-11
iOS
iOS進階之masonry細緻入微_MASUtilities.h
2019-01-15
iOS
Stream流的一些使用方法
2024-08-17
iOS-日常開發常用巨集定義
2019-03-05
iOS
一些MongoDB基本命令及使用方法
2021-02-25
MongoDB
記錄一些日常的小問題（前端）
2018-11-28
前端
Masonry原始碼解讀
2018-12-28
原始碼
移動開發—iOS日常面試問題
2021-05-18
移動開發iOS面試
三、日常運維指令碼編寫一些技巧
2018-08-15
運維指令碼
Masonry 原始碼解讀（下）
2018-05-04
原始碼
Masonry 原始碼解讀（上）
2018-04-28
原始碼
Masonry 原始碼學習整理
2019-03-04
原始碼
Masonry動畫更新約束
2018-03-06
動畫
日常工作最常用的一些DOS命令總結
2018-05-25
iOS-UITableViewCell的一些事
2019-01-25
iOSUIView
Masonry佈局簡單朋友圈
2018-07-12
日常遇到的一些問題或知識的筆記（二）
2019-01-09
筆記
日常遇到的一些問題或知識的筆記（一）
2018-12-10
筆記
iOS框架·Masonry原始碼深度解析及學習啟示:設計模式與鏈式程式設計思想
2019-03-04
iOS框架原始碼設計模式程式設計
iOS開發者的一些前端感悟
2019-03-01
iOS前端
iOS-UI佈局是約束(Masonry)還是frame？雖各有優缺點，但使用frame真心沒前途
2018-10-07
iOSUI
看完 `Masonry` 原始碼後的幾點思考？
2019-03-04
原始碼
原始碼閱讀：Masonry（一）——從使用入手
2018-08-03
原始碼
python3切片使用方法及一些技巧介紹+leetcode題例
2019-05-07
PythonLeetCode
日常犯錯記錄：資料轉json後加了一些轉義符
2021-01-20
JSON
iOS H5容器的一些探究（二）：iOS下的黑魔法NSURLProto
2021-09-09
iOSH5
Masonry佈局控制元件，自動換行
2018-05-16
控制元件
PDF編輯器怎樣使用？分享一些PDF編輯器使用方法
2020-03-16
MUI在Android與IOS上的一些小問題以及一些框架的用法
2018-11-07
UIAndroidiOS框架
iOS 元件化實現的一些思路總結
2019-04-04
iOS元件化
日常的問題也是日常的修行
2023-11-12
同時使用 IB 和 Masonry 時，如何刪除 NSIBPrototypingLayoutConstraint
2019-01-03
AI
日常散文
2018-11-30

iOS Masonry 一些日常使用方法

相關文章