iOS 布局第三方: Masonry(OC) && SnapKit(Swift)

Masonry(OC)

1、iOS中自动布局 github 流行的就那么几个,而Masonry比较突出

2、Swift出来之后, Masonry团队又写出了 SnapKit广受大家使用

这篇文章只写 Masonry ,而 'SnapKit'与它十分相似,代码几乎差不多

一、简单融入

1.首先第一步:将 Masonry导入到项目中(建议用 cocospads) ,强烈建议在项目的 pch文件中 写入 #import "Masonry.h"

2.关于 masonry中的block,如果 block中引用了 self, 是否会产生强引用?
答案 : 不会

// block中有一个  self.view , 但是 不会产生强引用
[self.labelView mas_makeConstraints:^(MASConstraintMaker *make) {      
    make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];

3.通用方法 :

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

4.切记有点 : Masonry有效布局的前提: 必须 让当前控件添加到父控件之后,再用Masonry进行布局

二、基本用法

1.设置图片 距离四边的 边距都是 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.设置 图片 距离顶部 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(); // 这个控件 控制在 >= self.view.width - 80 这个点
}];

4.一个数组中有多个按钮,水平排列

// 如果数组中的元素个数 < 2, 则给出错误信息,并返回
if (self.count < 2) {
    NSAssert(self.count>1,@"views to distribute need to bigger than one");
    return;
}

// mas_distributeViewsAlongAxis的使用 --> NSArray 中有很多个控件才可以使用
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];
}

// 设置 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.一个数组中有多个按钮,竖直排列

// 如果数组中的元素个数 < 2, 则给出错误信息,并返回
if (self.count < 2) {
    NSAssert(self.count>1,@"views to distribute need to bigger than one");
    return;
}

// mas_distributeViewsAlongAxis的使用 --> NSArray 中有很多个控件才可以使用
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];
}
    
// 设置 竖直 方向 间距 :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.设置一个 多行文字的label

UILabel *label = [[UILabel alloc] init];
label.textColor = [UIColor orangeColor];
label.backgroundColor = [UIColor whiteColor];
label.numberOfLines = 0;
label.lineBreakMode = NSLineBreakByTruncatingTail;
label.text = @"有的人,没事时喜欢在朋友圈里到处点赞,东评论一句西评论一句,比谁都有存在感。等你有事找他了,他就立刻变得很忙,让你再也找不着。真正的朋友,平常很少联系。可一旦你遇上了难处,他会立刻回复你的消息,第一时间站出来帮你。所谓的存在感,不是你有没有出现,而是你的出现有没有价值。存在感,不是刷出来的,也不是说出来的。有存在感,未必是要个性锋芒毕露、甚至锋利扎人。翩翩君子,温润如玉,真正有存在感的人,反而不会刻意去强调他的存在感。他的出现,永远都恰到好处。我所欣赏的存在感,不是长袖善舞巧言令色,而是对他人的真心关照;不是锋芒毕露计较胜负,而是让人相处得舒服;不是时时刻刻聒噪不休,而是关键时刻能挺身而出。别总急着出风头,希望你能有恰到好处的存在感。";
[self addSubview:label];

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

// preferredMaxLayoutWidth 这一行是 UILabel的属性,网上说是 : 为了最大布局宽度 而做出的条件 ,  设置完了记得 更新 layout : [super layoutSubviews] (如果在 封装的View中编写代码的话);
label.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 40;

7.持续更新中.....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容