iOS 自动布局注意事项

使用 Autoresizing 进行屏幕适配

随着 iPad 的发布, 屏幕的物理尺寸发生了变化
并且苹果建议，在 iPad 上运行的程序如果没有特殊原因，应该支持横竖屏切换
因此：不能把控件的 frame 都写死了，需要进行屏幕适配
为了解决屏幕适配需求，苹果同时推出了第一个屏幕适配解决方案：Autoresizing

Autoresizing 的核心思想就是：参照父容器来设置子控件的 frame
不再写死 frame, 而是参照父容器
举例：在竖屏下有一个按钮要占据整个屏幕宽度, 当切换到横屏以后同样要占据整个屏幕的宽度

Autoresizing 只能设置当前控件与父控件之间的相对关系

iOS 6 —— Auto Layout（自动布局）

随着 iPhone5 \ iPhone5s 等的发布苹果设备不同尺寸的屏幕变得越来越多, 不仅要求能根据控件父子
关系来设置相对位置，也要求能根据任意控件之间的关系来设置位置因为 Autoresizing 只能设置当前控件
与父控件之间的相对关系，当遇到要设置兄弟控件之间的关系的时候 Autoresizing 就无能为力了
举例: 在竖屏下, 屏幕底部有两个按钮，这两个按钮的间距为一个固定的值（宽度不指定）
当切换为横屏的时候要求这两个按钮还显示在屏幕底部
并且按钮间的间距不变, 按钮可以随之变宽

Auto Layout 技术主要解决的问题：控件位置的参照关系不再局限于父控件

iOS 8 —— Size Classes + Auto Layout

使用 Size Classes + Auto Layout 进行屏幕适配
当 iPhone6 发布以后，苹果设备的屏幕越来越多(以后也可能出现更多不同大小的屏幕)，为了能更容易的适配不同
的屏幕，苹果推出了 Size Classes 技术
通过 Auto Layout 设置的约束，约束一旦添加就会应用于各种屏幕（也就是说在
各种不同的屏幕下都使用相同的约束）
通过 Size Classes + Auto Layout 的方式, 可以为不同尺寸的屏幕设置不同的约束 
举例: iPhone 下的计算器，在横屏、竖屏下的不同表现

Size Classes 技术主要解决的问题:"主要解决了iPhone横竖屏适配及iPhone和iPad开发时共用一个SB的问题"

iOS 9 —— Size Classes + Auto Layout + StackView

StackView 的核心便是方便垂直或水平排布多个 subview
类似于 android 的 LinearLayout
StackView 最有用的就是它会自动为每个 subview 创建和添加 Auto Layout 约束，程序员可以
通过选项配置subview的大小、排布以及彼此间的间距
使用 stackview 主要简化在线性方向上，重复设置控件布局约束的问题

Autoresizing

• 除了很老的项目,目前没有使用 Autoresizing的了，都用 Auto Layout
• 在一个视图中 Autoresizing 和 Auto Layout 只能用其一,通过 Autoresizing 解决布局问题，首先取消掉 Auto Layout
• Autoresizing 取消AutoLayout代码
  
  • 谁约束,谁禁用,如:myView就是调用者
    
    • myView.translatesAutoresizingMaskIntoConstraints = NO;
  • 手动创建的视图默认的会开启外面四条边,下面是手动开启里面的两条边
    
    • View.AutoresizingMask=UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;

Autoresizing-外面四根线

• 外面四根线的含义?
  
  • 外面的四根线：子控件距离父控件的四周边距是否固定,如果子控件的尺寸固定,那么子控件的右下间距就无法固定”默认左上角间距优先四周的线选上固定反之不固定

Autoresizing-里面两根线

• 里面两根线的含义?
  
  • 子控件的宽高是否随着父控件的宽高变化 内部两根线选上宽高不固定反之固定

Autoresizing-局中

• 需求:
  
  • 在界面上放置一个红色的 View 100 * 100
  • 在任何设备上始终保持屏幕居中
• 步骤:
  
  • 把所有的线都去掉(留个印象,防止接手很古老的项目)

Autoresizing-全屏

• 手动创建代码后,加上如下代码,遍可以横竖都全屏
  
  • 横竖屏都全屏
  • myView.AutoresizingMask=UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

自动布局的间距介绍

• constrain to margins一般不勾选,因为涉及到计算.
• 代码中view的layoutMargin属性含义?
  
  • 可以更改view的margin,用来批量减少边距,调整子控件的位置.
• 控制器的根视图是不能修改layoutMargin的,其他的视图可以.
• top layout guide和bottom layout guide,默认控件的上下是参考这两根线,因为可能涉及到UITabBar 和 UINavgiationBar的问题.(了解)
• 一部分控件可以不需要设置宽高的约束,和内容一样.(label,button,swtich,有图片的imageView)

* AutoLayout核心公式: *

* firstItem.firstAttribute {==,<=,>=} secondItem.secondAttribute * multiplier + constant *

注意:如果firstItem.firstAttribute和secondItem.secondAttribute调换位置后注意multiplier和constant值的变化

例:redW = 300   blueW = 200
300  == 200  *  2   + -100
200  == 300  * 0.5  +  50;

自动布局动画

• 约束可以连线,既我们自定义的宽高距离约束.
• 更改约束后,在block动画中调用layoutIfNeeded

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *myViewTop;
self.myViewTop.constant += 400;

自动布局动画原理

• 修改约束数值并不会让视图的位置及大小立即发生变化
• 自动布局系统 会在一次用户交互活动中，收集所有控件的约束变化
• 如果有约束变化，会在收集完成之后，统一计算所有控件变化后的 frame 并且设置
• layoutIfNeeded 方法就是通知视图，如果当前存在变化的约束，先更新一下

代码中使用AutoLayout的注意点:

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

约束添加规则

1.如果添加的约束和其它控件没有关系, 要添加到自己身上"也可以添加在父控件上"
2.如果是父子关系, 设置子控件的约束, 约束要添加到父控件上
3.如果是兄弟关系, 设置两兄弟的约束, 约束要添加到它们最近的共同父控件上

Xcode版本信息

Xcode版本	正式版发布时间	支持系统及设置
Xcode4.2	2011年10月13日	iOS5-iPhone4s
Xcode4.5	2012年9月20日	iOS6-iPhone5
Xcode5.0	2013年9月18日	iOS7-iPhone5s
Xcode6.0	2014年9月17日	iOS8-iPhone6
Xcode7.0	2015年9月28日	iOS9-iPhone6s)