浅谈autolayout自动布局

屏幕适配

• 针对不同大小的屏幕尺寸进行适配

• iPhone各型号和系列的尺寸不相同

  • 3.5inch、4.0inch、4.7inch、5.5inch

• 屏幕的方向也会导致适配问题

  • 横屏、竖屏

点和像素

• 在用户眼中

  • 屏幕是由无数个像素组成的
  • 像素越多，屏幕越清晰

• 在开发者眼中

  • 屏幕是由无数个点组成的，点又是由像素组成的
  • 像素越多，屏幕越清晰

• 在非Retina屏中一个点由一个像素组成

• 在Retina屏中一个点由2X2个像素组成

fenbianlv.png

简介(屏幕适配发展史)

• 在以前的iOS程序中，是如何布局UI界面的？
• 写固定值-> autoresizingMask -> autolayout-> sizeClasses
  • iPhone1-iPhone4s时代 屏幕的尺寸固定为(320,480) ,我们只需要简单计算一下相对位置就好了
  • iphone5-iphone5s时代屏幕的尺寸变了(320,568) 这时AutoresizingMask派上了用场(为什么不用Autolayout? 因为还要支持ios5)
  • iphone6时代屏幕的宽度也发生了变化,终于是时候抛弃AutoresizingMask改用Autolayout了(1.不用支持ios5了 2. 相对于屏幕适配的多样性来说autoresizingMask也已经过时了)
  • 直到iphone6发布之后 我知道使用Autolayout势在必行了

autoresizingMask

• 使用autoresizingmarsk时要禁用autolayout，因为二者不兼容

• 在storyboard中使用

autoerisizingMarsk.png

• 在代码中的使用

//控件尺寸随屏幕变化拉伸
self.scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    //控件的位置固定在右下角
    self.pageControl.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin;
    UIViewAutoresizingFlexibleLeftMargin 距离父控件的左边是可以伸缩的
     UIViewAutoresizingFlexibleBottomMargin 距离父控件的底部是可以伸缩的
     UIViewAutoresizingFlexibleRightMargin 距离父控件的右边是可以伸缩的
     UIViewAutoresizingFlexibleTopMargin 距离父控件的顶部是可以伸缩的
     UIViewAutoresizingFlexibleHeight 高度跟随父控件的高度进行伸缩
     UIViewAutoresizingFlexibleWidth 宽度跟随父控件的宽度进行伸缩

• 但是Autoresizing的局限性很大，不能处理同级控件之间的关系

Autolayout

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

Autolayout的2个核心概念

• 约束:通过给控件添加约束,来决定控件的位置和尺寸
• 参照:在添加约束时,是依照谁来添加(可以是父控件或者兄弟控件)

自动布局的核心计算公式

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

添加约束的规则

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

在storyboard中添加约束

![Upload yuesu.png failed. Please try again.]

在代码中实现约束

• 代码实现Autolayout的步骤
  利用NSLayoutConstraint类创建具体的约束对象
  添加约束对象到相应的view上

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

• 代码实现Autolayout的注意点

  • 要先禁止autoresizing功能，设置view的下面属性为NO

   view.translatesAutoresizingMaskIntoConstraints = NO;
  

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

• 一个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 ：常量

• 例如：

 // 左边约束
    NSLayoutConstraint *leftlc_b = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30];
    [self.view addConstraint:leftlc_b];

• 在Autolayout中，UILabel的bounds默认会自动包住所有的文字内容，顶部和底部不再会有空缺区域

基于Autolayout的动画

• 在修改了约束之后，只要执行下面代码，就能做动画效果

 [UIView animateWithDuration:1.0 animations:^{
    [添加了约束的view的父控件 layoutIfNeeded];
}];

VFL语言

• 由于autolayout的编码过于繁琐，苹果公司为了简化Autolayout的编码而推出VFL抽象语言，全称为“Visual Format Language”
• 示例：

 H:[cancelButton(72)]-12-[acceptButton(50)]
//canelButton宽72，acceptButton宽50，它们之间间距12

Masonry

• 目前最流行的Autolayout第三方框架
• 用优雅的代码方式编写Autolayout
• 省去了苹果官方恶心的Autolayout代码
• 大大提高了开发效率