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.持续更新中.....