三 2. 自动布局之Autoresizing、Autolayout(二)

5. Autolayout简介

(1)Autolayout是一种“自动布局”技术，专门用来布局UI界面的
(2)Autolayout自iOS 6开始引入，由于Xcode 4的不给力，当时并没有得到很大推广
(3)自iOS 7（Xcode 5）开始，Autolayout的开发效率得到很大的提升
(4)苹果官方也推荐开发者尽量使用Autolayout来布局UI界面Autolayout能很轻松地解决屏幕适配的问题

1. Autolayout的2个核心概念
   • 参照
   • 约束

xib实现

1. align对齐 -- 排版的

   如图：Autolayout常用面板01-对齐

2. pin -- 设置约束的

   如图：Autolayout常用面板02-相对

   注意：修改约束的正确方式：在属性面板中可以修改【还可以选中一个约束，属性面板就只显示这一个约束，然后进行修改】

   按住Command，同时选中两个控件，可以设置他们宽高相同

   如图：

   选中control，选中一个控件，拖向相对的控件，设置约束：

   如图：

   注意：把Constrain to margins复选框取消【就是相对于控制器的view】

3. Autolayout常用面板03-约束处理

   如图：

4. 重点：注意事项

   • 还可以设置约束为《= 大于等于，=，>= 小于等于 这样的值[uilabel练习]，如图：有了Autolayout的UILabel

     l在没有Autolayout之前，UILabel的文字内容总是居中显示，导致顶部和底部会有一大片空缺区域图1

             图2：

     l有Autolayout之后，UILabel的bounds默认会自动包住所有的文字内容，顶部和底部不再会有空缺区域图2；

   • 如图练习思路：

     图：

     思路一：设置uilabel的bottom距离父控件bottom为20，父控件不用设置高度，他是自动适应的

     思路二：父控件的底部相对于uilabel的底部加上20.

   • 约束也是类：他也能脱线。 约束的原则：约束添加到那个View上，就能找到对应的约束脱线了。约束的属性进行修改。

6.Autolayout的警告和错误

• 警告 黄色圈

  控件的frame不匹配所添加的约束, 比如 比如约束控件的宽度为100, 而控件现在的宽度是110

• 错误 红色圈

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

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

• 注意

  在xib或者storybord中点击红色圈或者黄色圈，也可以直接进行修改。

代码实现Autolayout

1. 代码实现Autolayout的步骤

1. 利用NSLayoutConstraint类创建具体的约束对象

2. 添加约束对象到相应的view上

   -(void)addConstraint:(NSLayoutConstraint *)constraint;

   -(void)addConstraints:(NSArray *)constraints;

2. 代码实现Autolayout的注意点

1. 要先禁止autoresizing功能，设置view的下面属性为NO, view.translatesAutoresizingMaskIntoConstraints = NO;
2. 添加约束之前，一定要保证相关控件都已经在各自的父控件上
3. 不用再给view设置frame

3. NSLayoutConstraint

• 一个NSLayoutConstraint对象就代表一个约束

• 创建约束对象的常用方法

  +(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

  view1 ：要约束的控件

  attr1 ：约束的类型（做怎样的约束）

  relation ：与参照控件之间的关系

  view2 ：参照的控件

  attr2 ：约束的类型（做怎样的约束）

  multiplier ：乘数

  c ：常量

• 自动布局的核心计算公式

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

代码示例：

{
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 作用：不要将AutoresizingMask转为Autolayout的约束 [blueview的AutoresizingMask默认会有一些约束，会和Autolayout约束冲突]
    //如果用stroyboard设置约束的时候，这个属性就自动设置为no了
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    
    //重点：设置相对约束的时候  必须添加到父控件上，否者会崩溃
    [self.view addSubview:blueView];
    
    // 添加宽度约束:100
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];
    [blueView addConstraint:widthConstraint];
    
    // 添加高度约束:100
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];
    [blueView addConstraint:heightConstraint];
    
    // 添加右边约束：blueView的右边距离父控件右边有10的间距
    NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];
    [self.view addConstraint:rightConstraint];
    
    // 添加顶部约束：blueView的顶部距离父控件顶部有10的间距
    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:10];
    [self.view addConstraint:topConstraint];
}

添加约束的原则：

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

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

  1. 对于两个同层级view之间的约束关系，添加到它们的父view上, 如图：
  2. 对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上 如图：
  3. 对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上 如图：

  4. 注意点：重点：设置相对约束的时候，必须添加到父控件上，否者会崩溃

     约束到底添加几个，没有说，只是说把他固定了