iOS - Masonry

Masonry就是为屏幕适配而生的三方框架.我的理解是Masonry来进行布局可以使视图在不同的模拟机上的位置基本保持相同,使用Masonry要先配置CocoaPods。

• 基本知识点

mas_makeConstraints()    添加约束
mas_remakeConstraints()  移除之前的约束，重新添加新的约束
mas_updateConstraints()  更新约束，写哪条更新哪条，其他约束不变

• 实例演示
  设置内边距
  • equalTo
  • mas_equalTo
  • offset
    这三种方法其实大同小异，都是表示到上下左右的距离，然而它们应用的环境有时候不一样，我的经验是看报错，如果错了，就换一个。
  • width/height是指宽和高
  • right/bottom右侧和底部

[twoimage mas_makeConstraints:^(MASConstraintMaker *make) {
        //2. 左上右下边距
//        make.left.equalTo(self.view).with.mas_equalTo(30);
//        make.top.equalTo(self.view).with.offset(50);
//        make.right.equalTo(self.view).with.offset(-20);
//        make.bottom.equalTo(self.view).with.offset(-30);

        //1.普通视图，上左宽长offset和equalTo（列成宽度的几分之几在其他视图中也有相同的显现）
        make.left.mas_equalTo(self.view.frame.size.width * 0.03);
        make.top.mas_equalTo(self.view.frame.size.height * 0.07);
        make.right.offset(self.view.frame.size.width * -0.51);
        //make.width.mas_offset(self.view.frame.size.width * 0.45);
        //make.height.mas_offset(self.view.frame.size.height * 0.25);
        make.bottom.mas_equalTo(self.view.frame.size.height * -0.68);

		 //设置当前约束值乘以多少，例如这个例子是redView的宽度是self.view宽度的0.5倍。
//        make.height.equalTo(self.view).multipliedBy(0.35);
               //后两句等同于
                //make.height.and.width.equalTo(@50);
        
//        //2. 普通视图，用equalto (第二种如果有条件会覆盖之前的）
//        make.left.mas_equalTo(200);
//        make.top.mas_equalTo(30);
//        make.bottom.mas_equalTo(-20);
//        make.right.mas_equalTo(-20);

//另外的表达方法
//	make.left.equalTo(fimage.mas_right).offset(10);
    }];

• 子视图居中练习（中间视图）

CGFloat padding = 10;

UIImageView *oneimage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"图片1"]];
    [self.view insertSubview:oneimage atIndex:0];

    UIImageView *fourimage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"图片4"]];
    [self.view insertSubview:fourimage atIndex:0];

  //子视图居中练习
    [oneimage mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.view);
        make.left.equalTo(self.view).mas_offset(padding);
        make.right.equalTo(fourimage.mas_left).mas_offset(-padding);
        make.height.mas_equalTo(150);
    }];

    [fourimage mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.view);
        make.right.equalTo(self.view).mas_offset(-padding);
        //  这句是错的   make.left.equalTo(redView.mas_right).mas_offset(padding);
        //make.width.equalTo(@100);
        make.width.equalTo(oneimage);
        make.height.mas_equalTo(150);
    }];