autolayout 使用(系统方法)

(一) 简单介绍

autoLayout的使用

1. autolayout的核心公式
   被约束view的.width = 参照view.width * 系数 + 常量
2. 通过代码实现 autolayout 的时候, 不要忘记把 autoresizing 给关闭掉
   • redView.translatesAutoresizingMaskIntoConstraints = NO;
   • blueView.translatesAutoresizingMaskIntoConstraints = NO;
3. 代码实现
   NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];

• 添加约束的规则:
  1. 如果是同层级之间的子view, 约束要添加到他们共同的父view上
  2. 如果是不同层级之间的子view, 约束要添加到离他们最近的共同的父view上
  3. 如果是父 子 关系的view, 约束要添加到 父view上
  4. 如果设置约束的时候和别的控件没有关系(没有参照的view), 那么这个约束可以添加到自身上

---

(二)代码实现

-(void)viewDidLoad {
[super viewDidLoad];

// 实例化两个view
// redView
UIView *redView = [UIView new];

redView.backgroundColor = [UIColor redColor];

[self.view addSubview:redView];


// blueView
UIView *blueView = [UIView new];

blueView.backgroundColor = [UIColor blueColor];

[self.view addSubview:blueView];

warning 不要忘记, 把 autoresizing 给禁用掉

// 关闭了view 的  autoresizing功能
redView.translatesAutoresizingMaskIntoConstraints = NO;
blueView.translatesAutoresizingMaskIntoConstraints = NO;

// 添加红色view的约束
/**
 relatedBy: 
 
 NSLayoutRelationLessThanOrEqual = -1,
 NSLayoutRelationEqual = 0,
 NSLayoutRelationGreaterThanOrEqual = 1,
 */
// 红色view 顶部
NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
// 把约束添加到view上
[self.view addConstraint:redTop];

// 红色view 左侧
NSLayoutConstraint *redLeft = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];

// 把约束添加到view上
[self.view addConstraint:redLeft];

// 红色view 右侧
NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];

[self.view addConstraint:redRight];

// 红色view 高度
/**
 如果没有参照的view , 可以 传递为nil
 没有参照的view , 也就没有参照的属性 : NSLayoutAttributeNotAnAttribute
 */
NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];

// [self.view addConstraint:redHeight];
[redView addConstraint:redHeight];

// 蓝色view
// 顶部约束

NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeBottom multiplier:1 constant:20];

[self.view addConstraint:blueTop];

// 右侧约束
NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeTrailing multiplier:1 constant:0];

[self.view addConstraint:blueRight];


// 高度约束
NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];

[self.view addConstraint:blueHeight];

// 宽度约束
NSLayoutConstraint *blueWidth = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];

[self.view addConstraint:blueWidth];

}