Masonry(OC)

1、iOS中自動(dòng)布局 github 流行的就那么幾個(gè),而Masonry比較突出

2、Swift出來之后, Masonry團(tuán)隊(duì)又寫出了 SnapKit廣受大家使用

這篇文章只寫 Masonry ,而 'SnapKit'與它十分相似,代碼幾乎差不多

一、簡(jiǎn)單融入

1.首先第一步:將 Masonry導(dǎo)入到項(xiàng)目中(建議用 cocospads) ,強(qiáng)烈建議在項(xiàng)目的 pch文件中 寫入 #import "Masonry.h"

2.關(guān)于 masonry中的block,如果 block中引用了 self, 是否會(huì)產(chǎn)生強(qiáng)引用?
答案 : 不會(huì)

// block中有一個(gè)  self.view , 但是 不會(huì)產(chǎn)生強(qiáng)引用
[self.labelView mas_makeConstraints:^(MASConstraintMaker *make) {      
    make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];

3.通用方法 :

 // 增加 約束
 [label mas_makeConstraints:^(MASConstraintMaker *make)  {
 
 }];
 
 // 移除掉當(dāng)前控件所有的約束, 并增加新的約束
 [label mas_remakeConstraints:^(MASConstraintMaker *make) {
 
 }];
 
 // 更新當(dāng)前控件的約束
 [label mas_updateConstraints:^(MASConstraintMaker *make) {
 
 }];
 

4.切記有點(diǎn) : Masonry有效布局的前提: 必須 讓當(dāng)前控件添加到父控件之后,再用Masonry進(jìn)行布局

二、基本用法

1.設(shè)置圖片 距離四邊的 邊距都是 10

UIImageView *iconView = [[UIImageView alloc] init];
iconView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:iconView];
    
[iconView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(10, 10, 10, 10)); // 或者下面代碼
//        make.edges.mas_equalTo(UIEdgeInsetsMake(10, 10, 10, 10));
}];

2.設(shè)置 圖片 距離頂部 30, 右邊 30, 大小為 : 100;

UIImageView *iconView = [[UIImageView alloc] init];
iconView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:iconView];
    
[iconView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(30);
    make.right.mas_equalTo(-30);
//        make.size.mas_equalTo(@(100)); // 或者下面代碼
    make.width.and.height.mas_equalTo(@100);
}];

3.文字很多的情況

UILabel *label = [[UILabel alloc] init];
label.backgroundColor = [UIColor orangeColor];
label.numberOfLines = 0;
label.text = @"文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多";
[self.view addSubview:label];
    
[label mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(30);
    make.left.mas_equalTo(0);
//        make.right.mas_lessThanOrEqualTo(-80).priorityHigh();
    make.right.mas_greaterThanOrEqualTo(-80).priorityHigh(); // 這個(gè)控件 控制在 >= self.view.width - 80 這個(gè)點(diǎn)
}];

4.一個(gè)數(shù)組中有多個(gè)按鈕,水平排列

// 如果數(shù)組中的元素個(gè)數(shù) < 2, 則給出錯(cuò)誤信息,并返回
if (self.count < 2) {
    NSAssert(self.count>1,@"views to distribute need to bigger than one");
    return;
}

// mas_distributeViewsAlongAxis的使用 --> NSArray 中有很多個(gè)控件才可以使用
NSMutableArray *arr = [NSMutableArray array];
for (NSInteger i = 0; i < 3; i++) {
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setTitle:[NSString stringWithFormat:@"Btn:%zd",i] forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btn setBackgroundColor:[UIColor orangeColor]];
    [self.view addSubview:btn];
    [arr addObject:btn];
}

// 設(shè)置 MASAxisTypeHorizontal : 水平 方向 間距 :20 , 左邊為 5  右邊為 5
[arr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:5 tailSpacing:5];
[arr mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(@90);
    make.height.mas_equalTo(@60);
}];

5.一個(gè)數(shù)組中有多個(gè)按鈕,豎直排列

// 如果數(shù)組中的元素個(gè)數(shù) < 2, 則給出錯(cuò)誤信息,并返回
if (self.count < 2) {
    NSAssert(self.count>1,@"views to distribute need to bigger than one");
    return;
}

// mas_distributeViewsAlongAxis的使用 --> NSArray 中有很多個(gè)控件才可以使用
NSMutableArray *arr = [NSMutableArray array];
for (NSInteger i = 0; i < 3; i++) {
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setTitle:[NSString stringWithFormat:@"Btn:%zd",i] forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btn setBackgroundColor:[UIColor orangeColor]];
    [self.view addSubview:btn];
    [arr addObject:btn];
}
    
// 設(shè)置 豎直 方向 間距 :20 , 左邊為 5  右邊為 5
[arr mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:20 leadSpacing:5 tailSpacing:5];
[arr mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(50);
    make.right.mas_equalTo(-30);
}];

6.設(shè)置一個(gè) 多行文字的label

UILabel *label = [[UILabel alloc] init];
label.textColor = [UIColor orangeColor];
label.backgroundColor = [UIColor whiteColor];
label.numberOfLines = 0;
label.lineBreakMode = NSLineBreakByTruncatingTail;
label.text = @"有的人，沒事時(shí)喜歡在朋友圈里到處點(diǎn)贊，東評(píng)論一句西評(píng)論一句，比誰都有存在感。等你有事找他了，他就立刻變得很忙，讓你再也找不著。真正的朋友，平常很少聯(lián)系?？梢坏┠阌錾狭穗y處，他會(huì)立刻回復(fù)你的消息，第一時(shí)間站出來幫你。所謂的存在感，不是你有沒有出現(xiàn)，而是你的出現(xiàn)有沒有價(jià)值。存在感，不是刷出來的，也不是說出來的。有存在感，未必是要個(gè)性鋒芒畢露、甚至鋒利扎人。翩翩君子，溫潤(rùn)如玉，真正有存在感的人，反而不會(huì)刻意去強(qiáng)調(diào)他的存在感。他的出現(xiàn)，永遠(yuǎn)都恰到好處。我所欣賞的存在感，不是長(zhǎng)袖善舞巧言令色，而是對(duì)他人的真心關(guān)照；不是鋒芒畢露計(jì)較勝負(fù)，而是讓人相處得舒服；不是時(shí)時(shí)刻刻聒噪不休，而是關(guān)鍵時(shí)刻能挺身而出。別總急著出風(fēng)頭，希望你能有恰到好處的存在感。";
[self addSubview:label];

[label mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.top.equalTo(@10);
    make.right.equalTo(@(-10));
}];

// preferredMaxLayoutWidth 這一行是 UILabel的屬性,網(wǎng)上說是 : 為了最大布局寬度 而做出的條件 ,  設(shè)置完了記得 更新 layout : [super layoutSubviews] (如果在 封裝的View中編寫代碼的話);
label.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 40;

7.持續(xù)更新中.....