不同于XIB的第三方 Masonry 自动布局

作者: Booooooooom | 来源:发表于2016-06-20 22:54 被阅读437次

    这个第三方还是比较好用的,当然你也可以使用XIB,但是在有些场景下,Masonry更为好用,比如说此时你创建的视图并不是全局属性,或者是所添加的视图是在某些情况下才会创建,也就是说这个视图是局部变量,而此时用XIB就很牵强了。所以,Masonry这时候就果断的站出来了,他可以直接进行局部变量的布局,而且布局思路和XIB的约束也是有些类似,但是他是纯代码哦,也比较好懂,用的是链式的简单语言。这里要注意的是 语句中的and 和 with 实际上时无意义的,只是便于我们去理解代码的意思。说了这么多,直接来代码给你们解释Zzzz

    我也是慢慢的学习,所以这篇文章还会一直补充,希望不要断了。。。。

    我就直接上代码了,不解释太多了,代码里面有很多注释,还是比较详细的。

    这个代码是直接写在控制器的ViewDidLoad方法里面的

    说下我遇到的大坑吧,就是在设置布局的时候,一定要进行添加,其实添加到哪个视图上影响的只是视图的层次关系,并不是他的布局,具体的布局还是要看 make.edges.equalTo(view1) 这句,这里是将布局的相对对象设置成view1了

    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.view.backgroundColor = [UIColor whiteColor];
        
        
    #pragma mark ---- 一个视图在另一个视图上的布局 -----
        
        UIView *view1 = [UIView new];
        view1.backgroundColor = [UIColor redColor];
        
        // 要有一个父视图
        [self.view addSubview:view1];
        
        [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
            // 将图形设置居中(在self.view)中
            make.center.equalTo(self.view);
            
            // 设置尺寸
            make.size.mas_equalTo(CGSizeMake(350, 350));
            
        }];
    //
        
        UIView *view2 = [[UIView alloc] init];
        view2.backgroundColor = [UIColor cyanColor];
        
         // 要有一个父视图,这个只是图层的关系,布局还是和make.edges.equalTo(view1) 对象有关
        [view1 addSubview:view2];
        [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
            
            // 这里的make 就相当于调用对象view2
            // equalTo(对象), 这里指的是相对布局对象
            // 注意这里是with 是一种链式的自然语言
            // 上左下右
            make.edges.equalTo(view1).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
            
            // 可以看到 edges 其实就是top,left,bottom,right的一个简化 分开写也可以 一句话更省事
            
             // 等价于
           make.top.equalTo(view1).with.offset(10);
           make.left.equalTo(view1).with.offset(10);
           make.bottom.equalTo(view1).with.offset(-10);
           make.right.equalTo(view1).with.offset(-10);
         
            // 那么为什么bottom和right里的offset是负数呢? 因为这里计算的是绝对的数值 计算的bottom需要小于view1的底部高度 所以要-10 同理用于right
            
            
            // 也等价于
      //make.top.left.bottom.and.right.equalTo(view1).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
        }];
         
        
      
        
    //    - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
    //    - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
    //    - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
        
         
         //mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
         //mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
         //mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
        // 三种函数善加利用 就可以应对各种情况了
         
         
        
    
      
        
        
        
        
        
    #pragma mark ---- 两个视图在另一个视图上的布局,自动调整适应 -----
        
        UIView *view3 = [[UIView alloc] init];
        UIView *view4 = [[UIView alloc] init];
        
        view3.backgroundColor = [UIColor yellowColor];
        view4.backgroundColor = [UIColor yellowColor];
        
        // 要有一个父视图
        [view1 addSubview:view3];
        [view1 addSubview:view4];
        // 设置距离的变量
        int padding = 10;
        // 先对view3布局
        [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
           
            // 这里只是两个视图在同一条水平线上,所以不用center.X
            make.centerY.mas_equalTo(view1.mas_centerY);
            // 这里是相对布局,不需要设置距离底端和上端的距离,直接设置高度
    //        make.top.equalTo(self.view.mas_top).offset(padding);
    //  make.bottom.equalTo(self.view.mas_bottom).with.offset(- padding);
            make.left.equalTo(view1.mas_left).with.offset(padding);
            
            
            make.right.equalTo(view4.mas_left).with.offset(- padding);
            
            // 设置高度的数值
            // mas_equalTo 用来设置数值
            // equalTo 是直接等于某个对象的数值
            make.height.mas_equalTo(150);
            
            // 设置和view4等宽
            make.width.equalTo(view4);
            
            
            
            
        }];
        
        [view4 mas_makeConstraints:^(MASConstraintMaker *make) {
            
            make.centerY.mas_equalTo(view1.mas_centerY);
            make.left.equalTo(view3.mas_right).with.offset(padding);
            make.right.equalTo(view1.mas_right).with.offset(- padding);
            
            make.height.mas_equalTo(150);
            make.width.equalTo(view3);
            
            
        }];
        
    
    

    贴张最后效果图,视图从最下到上一次是view1,view2,view3 +view4

    A9CE0A9D-0339-4C83-8510-42FFE94AE962.png

    OK 就到这里,我看明天有没有空继续补充吧,不定时补充~~~~
    未完待续~~~~~~~~~

    相关文章

      网友评论

      • Flonger:试过iOS10吗?
        Flonger:@Booooooooom 会crash 等更新吧
        Booooooooom:@Flonger 这个还没有尝试过,但第三方库应该也会随着更新的

      本文标题:不同于XIB的第三方 Masonry 自动布局

      本文链接:https://www.haomeiwen.com/subject/uaawdttx.html