Masonry和PureLayout使用比较

作者: Bryan5137 | 来源:发表于2016-08-03 15:47 被阅读1055次

    首先看下Masonry和PureLayout的区别:

    Masonry PureLayout
    重量级,需学习成本 轻量级,语法更偏向Objective-C
    添加约束 mas_makeConstraints 使用了 block 模块 没有 block
    更新约束 mas_updateConstraints 保证不会导致出现两个相同约束的情况 开发者控制
    删除约束 mas_remakeConstraints ,没有针对 IOS 8 使用 Active 属性 针对 IOS 8 使用 Active 属性

    Massonry的用法:

        lable = [UILabel new];
        [self.view addSubview:lable];
        #prama mark  左右边距20  距离顶部20 高度40的Label
        [lable mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(@20);
            make.right.equalTo(@(-20));
            make.top.equalTo(@20);
            make.height.equalTo(@40);
        }];
        lable.backgroundColor = [UIColor redColor];
        lable.textAlignment = NSTextAlignmentCenter;
        lable.text = @"masonry测试Label";
        #prama mark 顶部距离label底部20 左右边距20  高度40的TextField
        UITextField* textField = [UITextField new];
        [self.view addSubview:textField];
        [textField mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(lable.mas_bottom).with.offset(20);
            make.left.equalTo(@20);
            make.right.equalTo(@(-20));
            make.height.equalTo(@40);
        }];
        textField.backgroundColor = [UIColor redColor];
        textField.placeholder = @"masonry测试textField";
        textField.textAlignment = NSTextAlignmentCenter;
        #prama mark 顶部距离textfield底部20  左右边距20   等宽、等高(40) 间距20的2个button
         button1 =[UIButton buttonWithType:UIButtonTypeCustom];
        [self.view addSubview:button1];
        button2 =[UIButton buttonWithType:UIButtonTypeCustom];
        [self.view addSubview:button2];
        [button1 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(textField.mas_bottom).with.offset(20);
            make.left.equalTo(@20);
            make.height.equalTo(@40);
            make.width.equalTo(button2.mas_width);
            make.right.equalTo(button2.mas_left).with.offset(-20);
        }];
        [button2 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(button1.mas_top);
            make.right.equalTo(@(-20));
            make.height.equalTo(button1.mas_height);
        }];
        [button1 setTitle:@"button1" forState:UIControlStateNormal];
        [button1 setBackgroundColor:[UIColor redColor]];
        [button1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        button1.selected = NO;
        [button1 addTarget:self action:@selector(changeSmall:) forControlEvents:UIControlEventTouchUpInside];
        
        [button2 setTitle:@"button2" forState:UIControlStateNormal];
        [button2 setBackgroundColor:[UIColor redColor]];
        [button2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        #prama mark  顶部距离button底部20  相对于self.view X方向居中 宽300 高100的imageView
        imageView =[UIImageView new];
        imageView.backgroundColor = [UIColor redColor];
        [self.view addSubview:imageView];
        [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(button1.mas_bottom).with.offset(20);
            make.centerX.equalTo(self.view);
            make.height.equalTo(@100);
            make.width.equalTo(@300);
        }];
    

    再来看看PureLayout的用法

        self.label = [[UILabel alloc] init];
        self.label.backgroundColor = [UIColor redColor];
        self.textField = [[UITextField alloc] init];
        self.textField.backgroundColor = [UIColor redColor];
        self.button1 = [UIButton buttonWithType:UIButtonTypeCustom];
        self.button1.backgroundColor = [UIColor redColor];
        self.button2 = [UIButton buttonWithType:UIButtonTypeCustom];
        self.button2.backgroundColor = [UIColor redColor];
        self.imageView = [[UIImageView alloc] init];
        self.imageView.backgroundColor = [UIColor redColor];
        [self.view addSubview:self.label];
        [self.view addSubview:self.textField];
        [self.view addSubview:self.button1];
        [self.view addSubview:self.button2];
        [self.view addSubview:self.imageView];
    
        [self.label autoPinEdge:ALEdgeLeft toEdge:ALEdgeLeft ofView:self.view withOffset:20.0f];
        [self.label autoPinEdge:ALEdgeRight toEdge:ALEdgeRight ofView:self.view withOffset:-20.0f];
        [self.label autoPinEdge:ALEdgeTop toEdge:ALEdgeTop ofView:self.view withOffset:20.0f];
        [self.label autoSetDimension:ALDimensionHeight toSize:40.0f];
        
        
        [self.textField autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.label withOffset:20.0f];
        [self.textField autoPinEdge:ALEdgeLeft toEdge:ALEdgeLeft ofView:self.view withOffset:20.0f];
        [self.textField autoPinEdge:ALEdgeRight toEdge:ALEdgeRight ofView:self.view withOffset:-20.0f];
        [self.textField autoSetDimension:ALDimensionHeight toSize:40.0f];
        
        [self.button1 autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.textField withOffset:20.0f];
        [self.button1 autoPinEdge:ALEdgeLeft toEdge:ALEdgeLeft ofView:self.view withOffset:20.0f];
        [self.button1 autoSetDimension:ALDimensionHeight toSize:40.0f];
        [self.button1 autoMatchDimension:ALDimensionWidth toDimension:ALDimensionWidth ofView:self.button2];
        
        [self.button2 autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.textField withOffset:20.0f];
        [self.button2 autoPinEdge:ALEdgeRight toEdge:ALEdgeRight ofView:self.view withOffset:-20.0f];
        [self.button2 autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:self.button1 withOffset:20.0f];
        [self.button2 autoMatchDimension:ALDimensionHeight toDimension:ALDimensionHeight ofView:self.button1];
        
        [self.imageView autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.button1 withOffset:20.0f];
        [self.imageView autoSetDimension:ALDimensionWidth toSize:300.0f];
        [self.imageView autoSetDimension:ALDimensionHeight toSize:100.0f];
        [self.imageView autoAlignAxisToSuperviewAxis:ALAxisVertical];
    

    效果图如下:

    Paste_Image.png

    相关文章

      网友评论

        本文标题:Masonry和PureLayout使用比较

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