Autolayout的简单介绍和示例代码

1.Autolayout的2个核心概念

• 1.参照
• 2.约束

2.常见错误

• 1.缺乏必要的约束, 比如
  只约束了宽度和高度, 没有约束具体的位置

• 2.两个约束冲突, 比如
  1个约束控件的宽度为100, 1个约束控件的宽度为110

3.自动布局的核心计算公式

obj1.property1 =（obj2.property2 * multiplier）+ constant value

4.添加约束的规则

• 在创建约束之后，需要将其添加到作用的view上

• 在添加时要注意目标view需要遵循以下规则：

• 1.对于两个同层级view之间的约束关系，添加到它们的父view上

  

• 2.对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
  

• 3.对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上
  

5.核心方法

    /*
     *  这个方法就是万能公式
     *  @param id 被约束控件对象
     *  @param attribute1: 被约束对象属性的那一边(上下左右)
     *  @param relatedBy 被约束对象与约束对象的关系(等于/大于等于/小于等于),比如等于NSLayoutRelationEqual
     *  @param toItem 参照对象
     *  @param attribute2 参照对象属性的那一边(上下左右)
     *  @param multiplier 乘数,相当于倍数;比如1,表示1倍;
     *  @param constant 常量;
     *  @return 约束好的对象的属性
     */
   NSLayoutConstraint *blueViewLeft  =  [NSLayoutConstraint constraintWithItem:(id) attribute:(NSLayoutAttribute) relatedBy:(NSLayoutRelation) toItem:(id) attribute:(NSLayoutAttribute) multiplier:(CGFloat) constant:(CGFloat)];

6.开始代码示例

• 1.创建蓝色的View

    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 禁止Autoresizing转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];

• 2.创建红色的View

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];

    // 禁止Autoresizing转为Autolayout的约束
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];

• 3./*** 添加蓝色控件的约束 ***/

    NSLayoutConstraint *blueLeftLc = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
    [self.view addConstraint:blueLeftLc];

    NSLayoutConstraint *blueBottomLc = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
    [self.view addConstraint:blueBottomLc];

    NSLayoutConstraint *blueRightLc = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:-20];
    [self.view addConstraint:blueRightLc];

    NSLayoutConstraint *blueHeightLc = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:40];

    [blueView addConstraint:blueHeightLc];

    NSLayoutConstraint *blueHeightLc2 = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];

    // 设置约束对象高度2的优先级为50;
    blueHeightLc2.priority = 50;
    [blueView addConstraint:blueHeightLc2];

    NSLayoutConstraint *blueWidthLc = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];
    [self.view addConstraint:blueWidthLc];

• 4./*** 添加红色控件的约束 ***/

    NSLayoutConstraint *redTopLc = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
    [self.view addConstraint:redTopLc];

    NSLayoutConstraint *redBottomLc = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
    [self.view addConstraint:redBottomLc];

    NSLayoutConstraint *redRightLc = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    [self.view addConstraint:redRightLc];

拥抱自动布局,忘掉frame吧!