Autolayout

UI

iPhone4之前

• 没有适配
• 经常会出现坐标值写死的代码

//#define ScreenW 320
//#define ScreenH 480
#define ScreenW [UIScreen mainScreen].bounds.size.width
#define ScreenH [UIScreen mainScreen].bounds.size.height
// 创建一个显示在屏幕右下角的按钮
CGFloat buttonW = 100;
CGFloat buttonH = 50;
button.frame = CGRectMake(ScreenW - buttonW, ScreenH - buttonH, buttonW, buttonH);

iPad出现以后

• 需要横竖屏适配
• 出现了一种方便的屏幕适配技术：Autoresizing
  
  • 局限性：仅仅能解决子控件和父控件之间的相对关系问题
  • iOS6开始（Xcode4开始）
• 出现了一种新的屏幕适配技术：Autolayout
  
  • 解决任何控件之间的相对关系问题
  • iOS8开始（Xcode6开始）
• VFL全称是Visual Format Language，翻译过来是“可视化格式语言”
• VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
• 使用VFL来创建约束数组

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

* format ：VFL语句
* opts ：约束类型
* metrics ：VFL语句中用到的具体数值
* views ：VFL语句中用到的控件

* 出现了一种新的屏幕适配技术：Sizeclass

Autoresizing

• UIViewAutoresizingFlexibleLeftMargin = 1 << 0,
  
  • 距离父控件左边的间距是伸缩的
• UIViewAutoresizingFlexibleRightMargin = 1 << 2,
  
  • 距离父控件右边的间距是伸缩的
• UIViewAutoresizingFlexibleTopMargin = 1 << 3,
  
  • 距离父控件上边的间距是伸缩的
• UIViewAutoresizingFlexibleBottomMargin = 1 << 5
  
  • 距离父控件下边的间距是伸缩的
• UIViewAutoresizingFlexibleWidth = 1 << 1,
  
  • 宽度跟随父控件宽度进行伸缩
• UIViewAutoresizingFlexibleHeight = 1 << 4,
  
  • 高度跟随父控件高度进行伸缩

Autolayout

• 2个核心概念
  
  • 约束
    
    • 尺寸约束
      
      • width约束
      • height约束
    • 位置约束
      
      • 间距约束（上下左右间距）
  • 参照
    
    • 所添加的约束跟哪个控件有关（相对于哪个控件来说）

• 常见单词

  • Leading -> Left -> 左边
  • Trailing -> Right -> 右边

• 代码实现Autolayout的步骤

  • 利用NSLayoutConstraint类创建具体的约束对象
  • 添加约束对象到相应的view上

- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

• 代码实现Autolayout的注意点
  
  • 要先禁止autoresizing功能，设置view的下面属性为NO

view.translatesAutoresizingMaskIntoConstraints = NO;

* 添加约束之前，一定要保证相关控件都已经在各自的父控件上
* 不用再给view设置frame

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

+(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 ：常量

• 添加约束的规则
  
  • 对于两个同层级view之间的约束关系，添加到它们的父view上
  • 对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
  • 对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上