约束VFL,Masonry

系统方法添加约束

// 1.创建控件
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];

// 2.创建约束
/*
 Item == first item
 attribute == first item需要设置的约束类型
 relatedBy == Relatio(等于)
 toItem ==  Second item
 attribute == Second item的约束类型
 multiplier == 乘以
 constant == 加上多少
 */

warning 注意点: 如果通过代码来设置Autolayout约束, 那么必须先禁用Autoresizing

redView.translatesAutoresizingMaskIntoConstraints = NO;

// 2.1宽度
NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0 constant:100.0];
// 将约束添加给自己
[redView addConstraint:width];

// 2.2高度
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0 constant:100.0];
// 将约束添加给自己
[redView addConstraint:height];

// 2.3水平居中
NSLayoutConstraint *xCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
// 将约束添加到层次较高的父view上
[self.view addConstraint:xCos];

// 2.4垂直居中
NSLayoutConstraint *yCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0];
// 将约束添加到层次较高的父view上
[self.view addConstraint:yCos];

warning 注意: 通过代码添加Autolayout约束, 添加约束之前必须保证控件已经在父控件上了

//    [self.view addSubview:redView];

}

VFL

• (void)viewDidLoad {
  [super viewDidLoad];
  // 1.创建一个红色View, 并且添加到父控件
  UIView *blueVeiw = [[UIView alloc] init];
  blueVeiw.backgroundColor = [UIColor blueColor];
  [self.view addSubview:blueVeiw];

  UIView *redVeiw = [[UIView alloc] init];
  redVeiw.backgroundColor = [UIColor redColor];
  [self.view addSubview:redVeiw];

// 2.禁止红色View的Autgoresizing
blueVeiw.translatesAutoresizingMaskIntoConstraints = NO;
redVeiw.translatesAutoresizingMaskIntoConstraints = NO;

// 3.利用VFL添加约束
/*
 VisualFormat: VFL语句
 options: 对齐方式等
 metrics: VFL语句中使用到的一些变量
 views: VFL语句中使用到的一些控件
 */
// 3.1设置蓝色
// 3.1.1水平方向
NSArray *blueHCos = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueVeiw]-20-|" options:kNilOptions metrics:nil views:@{@"blueVeiw":blueVeiw}];
[self.view addConstraints:blueHCos];

// 3.1.2垂直方向
NSArray *blueVCos = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueVeiw(==50)]" options:kNilOptions metrics:nil views:@{@"blueVeiw":blueVeiw}];
 [self.view addConstraints:blueVCos];

// 3.2设置红色
// 3.2.1垂直方向
NSArray *redVCos = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueVeiw]-20-[redVeiw(==50)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueVeiw":blueVeiw, @"redVeiw":redVeiw}];
[self.view addConstraints:redVCos];

// 3.2.2水平方向

// NSArray *redHCos = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redVeiw(==blueVeiw * 0.5)]" options:kNilOptions metrics:nil views:@{@"blueVeiw":blueVeiw, @"redVeiw":redVeiw}];
// [self.view addConstraints:redHCos];

warning VFL不支持乘除法

NSLayoutConstraint *redHCos =[NSLayoutConstraint constraintWithItem:redVeiw attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueVeiw attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
[self.view addConstraint:redHCos];

}

Masonry

define MAS_SHORTHAND

// 只要添加这个宏, 就可以去掉Masonry框架中对象访问对象属性前面的mas_属性, 和方法前的mas_前缀

define MAS_SHORTHAND_GLOBALS

// 只要添加上这个宏, 给equalTo传递参数的时候, 就可以直接传递基本数据类型 ,系统会自动包装

• (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view, typically from a nib.
  // 1.创建两个View, 并且添加到父控件
  UIView *blueVeiw = [[UIView alloc] init];
  blueVeiw.backgroundColor = [UIColor blueColor];
  [self.view addSubview:blueVeiw];
  self.blueVeiw = blueVeiw;

  UIView *redVeiw = [[UIView alloc] init];
  redVeiw.backgroundColor = [UIColor redColor];
  [self.view addSubview:redVeiw];

  // 2.禁止红色View的Autgoresizing
  blueVeiw.translatesAutoresizingMaskIntoConstraints = NO;
  redVeiw.translatesAutoresizingMaskIntoConstraints = NO;

  // 3.添加蓝色的约束
  [blueVeiw makeConstraints:^(MASConstraintMaker *make) {
  make.left.equalTo(self.view.left).offset(20);
  make.right.equalTo(self.view.right).offset(-20);
  make.top.equalTo(self.view.top).offset(20);
  make.height.equalTo(50);
  }];

  // 4.添加红色的约束
  [redVeiw makeConstraints:^(MASConstraintMaker *make) {
  make.top.equalTo(blueVeiw.bottom).offset(20);
  make.height.equalTo(blueVeiw.height);
  make.right.equalTo(blueVeiw.right);
  make.width.equalTo(blueVeiw.width).multipliedBy(0.5);
  }];

// 注意: 在Storyboard中约束是可以重复添加的, 通过Masonry添加约束也是可以重复的, 要注意重复添加导致的错误和冲突

}