首页投稿(暂停使用,暂停投稿)iOS DeveloperIos@IONIC

Masonry和PureLayout使用比较

2016-08-03  本文已影响1055人  Bryan5137

首先看下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
上一篇下一篇

猜你喜欢

热点阅读