自动布局autolayout与sizeclass

屏幕适配发展：

1. 通过代码计算frame

2. Autoresizing（设置控件与父控件的相对关系,从而实现间接设置frame，ios系统在运行时会根据设置的规则, 计算出对应的frame,无需手动计算frame）

通过设置子控件与父控件的关系来决定如何显示控件

3. autolayout

通过设置某控件与任意其他控件间的关系来决定如何显示这个控件,不仅仅局限与父子控件

4. size classes

通过 size classes +autolayout实现针对不同屏幕为控件设置不同的约束

注意: 无论是通过 autoresizing 还是 autolayout 其实只是间接设置了控件的 frame, 所以一旦使用了 autoreszing 或者 autolayout 那么就不要在直接设置 frame 了, 否者可能产生混乱。

并且： autoresizing 和autolayout 二者是互斥的，同时只能使用其中一种，当使用autoresizing的时候必须禁用autolayout, 当使用autolayout的时候就无法使用Autoresizing了。

设置左右边距的时候16的 原因：在 iPhone6 Plus 上怕手误触摸屏幕（单手握手机）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

自动布局所使用的按钮:

示例：

1、

需求：设置一个宽 150 ，高 40 的按钮始终显示在屏幕的正中央（水平居中对齐、垂直居中对齐）

思路：设置水平居中约束、垂直居中约束、高和宽的约束

 

最终效果：

2、

设置一个 UIView 无论在任何屏幕下距离上下左右四个边的距离都是 50 。思路：设置距离四周的 margin 为 50.

3、

距离左右 20, 两个 View之间间隔始终是20, 两个 View 的高度都是50。宽度不定。 （演示使用多种方式都可以实现）

注意：设置右边相对于某个控件的 margin （间距）的时候 , 如果当前控件的右边没有那个控件，则无法选择。

红View                 绿View

                                

按住command选中两个View设置等宽

最终效果：

4、

在控制器 view 顶部添加 2 个 view ， 1 个蓝色， 1 个红色

2 个 view 高度永远相 等 , 50

红色 view 和蓝色 view 右边对齐

蓝色 view 距离父控件左边、右边、上边间距相 等， 30

蓝色 view 距离红色 view 间距 固定， 3 0

红色 view 的左边和父控 件的中点对齐 ( 或者红色 View 的宽度是蓝色 View 的一半 )

先设置蓝色view的上、左、右为30，高度为50

然后设置红色与蓝色view等高，设置红色view距蓝色view间距30 ，设置红色view与蓝色view右边对齐；

设置红色view水平居中对齐，然后在约束中设置红色view的左边与父容器水平中线对齐

最终效果：

5、效果图:

以红色为例：

固定红色view的上边、左边距离父控件的距离为0，设置水平，垂直居中，然后选中水平居中的约束

红色view的bottom等于父控件的中心点的y

 这样红色控件的约束就设置好了，其他控件类似

6、伪屏幕适配

因为我们这里只有4寸的应用图片，所以我们就用启动图限制控制器的大小不能超过4寸

然后设置图片：水平居中显示，垂直居中显示

思路：如果是3.5寸的，我就让你显示中间的主要部分                  效果：

如果比4寸大，就把图片拉伸（不管多大，你横着还得给我显示320个点，竖着568个点）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

代码创建约束：

添加约束的规则：

如果添加的约束和其它控件没有关系, 会添加到自己身上

如果是父子关系, 设置子控件的约束, 约束会添加到父控件上

如果是兄弟关系, 设置两兄弟的约束, 约束会添加到第一个共同的父控件上

    

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

创建约束对象的常用方法

+(id)constraintWithItem:(id)view1  要约束的控件

attribute:(NSLayoutAttribute)attr1  约束的类型（做怎样的约束）

      relatedBy:(NSLayoutRelation)relation   与参照控件之间的关系

   toItem:(id)view2    参照的控件

attribute:(NSLayoutAttribute)attr2   约束的类型（做怎样的约束）

         multiplier:(CGFloat)multiplier  乘数

constant:(CGFloat)c;  常量

自动布局有个核心公式

obj1.property1 =（obj2.property2* multiplier）+constantvalue

 typedef NS_ENUM(NSInteger,NSLayoutAttribute) {

     NSLayoutAttributeLeft =1,                     //左侧

     NSLayoutAttributeRight,                        //右侧

     NSLayoutAttributeTop,                          //上方

     NSLayoutAttributeBottom,                       //下方

     NSLayoutAttributeLeading,                      //首部

     NSLayoutAttributeTrailing,                     //尾部

     NSLayoutAttributeWidth,                        //宽度

     NSLayoutAttributeHeight,                       //高度

     NSLayoutAttributeCenterX,                      //X轴中心

     NSLayoutAttributeCenterY,                      //Y轴中心

     NSLayoutAttributeBaseline,                     //文本底标线

     NSLayoutAttributeNotAnAttribute =0            //没有属性

     };

 typedef NS_ENUM(NSInteger,NSLayoutRelation) {

     NSLayoutRelationLessThanOrEqual =-1,          //小于等于

     NSLayoutRelationEqual =0,                     //等于

     NSLayoutRelationGreaterThanOrEqual =1,        //大于等于

     };

步骤：

1》创建控件并添加到其父控件上

 // 创建蓝色View
    UIView *blueView = [[UIView alloc] init];
    // 设置背景色
    blueView.backgroundColor = [UIColor blueColor];
    // 设置frame
    //blueView.frame = CGRectMake(0, 0, 100, 100);
    // 把蓝色view加到self.view中
    [self.view addSubview:blueView];

2》禁用autoresizing功能

blueView.translatesAutoresizingMaskIntoConstraints =NO;

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

//1. 创建蓝色view的约束
    // 1.1 创建蓝色view高度的约束
    // A对象  的  某属性 等于 B对象 的 某属性 乘以 multiplier 加 constant
    NSLayoutConstraint *blueHC = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:50];
    // 把约束添加到控件上
    [blueView addConstraint:blueHC];
    
    
    
    // 1.2 距离左边30
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:blueView.superview  attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30];
    [self.view addConstraint:blueLeft];
    
    
    
    // 1.3 距离上边30 (self.topLayoutGuide 状态栏)
    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:30];
   [self.view addConstraint:blueTop];
    
    // 1.4 距离右边30
    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView.superview attribute:NSLayoutAttributeRight multiplier:1.0 constant:-30];
    [self.view addConstraint:blueRight];

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

基于Autolayout的动画

思路：通过添加约束后，在修改约束的值，来实现动画

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Size Classes介绍

从 iOS8 开始才支持 size classes 。

size classes 本质就是对所有的屏幕进行了分类 , 我们可以为不同类型的屏幕设置不同的约束

把 宽度 和 高度 各分为 3 种情况

1 > compact( 紧凑 , 小 ),        一般用 - 表示

2 > regular ( 正常 , 大 ),           一般用 + 表示

3> any( 任意 , 表示既可以是 compact, 也可以是 regular),   一般用 * 表示

注意：

sizeclass:仅仅是对屏幕进行了分类

autolayout:对屏幕中各种元素进行约束(位置\尺寸)

一般不要在 wAny 和 hAny下设置约束,否则当在 wAny 和 hAny下设置约束后,在其他尺寸的屏幕再设置约束会产生冲突。因为约束会被继承下来。

示例：

1、在所有竖屏的 iPhone上左上角有一个开关,在所有 iPad上,右下角显示开关

1 > 现在 wAny 和 hAny 下拽一个开关。

2 >   选中开关安装（ Install ）一个 wCompact 和 hRegular （所有的 iPhone 竖屏）

3 > 选择 size classes 为 wCompact 和 hRegular ，然后设置约束为水平、垂直居中对齐。

4 > 选中开关 , 安装（ In stall ）一个 wRegular 和 hCompact (5.5 inch 横屏 ) 。

5 > 选择 size classes 为 wRegular 和 hCompact , 然后设置约束 然后设置约束为水平、垂直居中对齐 。

6 > 选中开关，取消 wAny 和 hAny 的 Install 。

2、 设置 Label 的字体在不同屏幕下显示不同的字体大小。

在 i Phone 竖屏下显示一种字体，在 iPhone 横屏下显示另一种字体

思路：查看 Label 的字体属性旁边的 ”+” 号。

步骤：

1 > 在 wAny 和 hAny 下拖拽一个 Label

2 > 选中 Label ，查看右侧的属性窗口，找到字体属性旁边的 ”+” 来设置不同屏幕下显示不同的字体。