布局（Layout）与约束

1.布局（Layout）

1.1 什么是布局？
        是指在一个视图中，如何摆放它的子视图（设置子视图的位置和大小—frame）

1.2 为什么要布局？
        屏幕的尺寸经常会发生变化，使得屏幕可显示区域也发生变化，于是最开始添加子视图的frame在新的区域下就不再适用了，需要进行调整，也就是需要重新布局

1.3 可能导致屏幕大小发生变化的原因
        a。设备不同（3.5寸下的横竖屏 4寸下的横竖屏  4.7寸下的横竖屏  5.5寸下的横竖屏 ）

        b。屏幕方向不同

        c。状态栏

                隐藏
                特殊的状态栏：
                来电时   绿色的状态栏
                录音时   红色的状态栏
                开启个人热点时   蓝色状态栏

        d。各种bar
                NavigationBar ： 竖屏时 64个点高 横屏时 52个点高 
                ToolBar： 44/32 个点
                TabBar： 49个点

        e。键盘

1.4如何布局？
    方法一：纯代码布局（古老的方法）
                理念：当屏幕发生变化时，自动执行一段代码，在代码中根据新的屏幕大小重新计算各个视图的frame，从而达到了重新定位的目的
                特点：功能强大，非常繁琐

    方法二：Auto Resizing以前的一种自动布局技巧
                理念： 根据屏幕的等比变化，同样等比的调整视图距离上左下右边缘的距离，或等比调整视图的大小
                特点：简单 易用  但是有很大的缺陷

    方法三：Auto Layout 最新的自动布局方法
                理念：将视图所在的位置使用多个约束条件描述出来，当屏幕大小发生变化时，系统会自动根据设定的多个约束，由系统计算出 不违背所有条件的一个合适的frame

    注意：方法一和方法二可以混合使用，但必须关闭AutoLayout功能；
             一旦开启了Auto layout功能，则不能再使用方法一或方法二

2.纯代码布局
2.1 理念：在屏幕大小发生变化时，自己手动重新计算各个视图的frame

2.2如何实现？
        重写控制器中的方法： viewDidLayoutSubViews:即可
        此方法的执行时机：
            1》当控制器管理的那个视图要被显示前就会自动执行该方法
            2》当屏幕大小发生变化时，如屏幕旋转，则此方法也会自动执行

    注意：使用纯代码计算frame时，一定要关闭Auto Layout

    2.3 布局对状态栏和各种Bar的处理
    使用属性：
        topLayoutGuide.length 屏幕上方当前被占据的高度
        bottomLayoutGuide.length 屏幕下方当前被占据的高度

    2.4视图自身的布局方法
        UIView对自身内部的子视图也可以进行布局，典型：UITableViewCell对内部的子视图可以进行布局

        如何实现？
            step1：自定义视图  继承自UIView
            step2：重写layoutSubViews方法即可

      布局方法的执行顺序:

            step1: 控制器的 viewWillLayoutSubViews
            step2：各个子视图的 layoutSubViews方法
            step3：控制器的viewDidLayoutSubViews方法

3.Auto Resizing 布局
3.1 是什么？
iOS5之前的自动布局技术，操作简单，API简单，功能也简单，有一定的局限性，很久以前叫 struts/spring(架构/弹簧)技术

3.2 核心理念
        当界面大小发生变化时，对子视图进行同比例的变化

3.3 如何实现
        step1:关闭Auto layout
        step2：选中需要布局的子视图
        step3：打开第5个检查器
        step4：点亮需要的红线
            外框（4个）红线负责限定子视图到父视图的边缘距离是否可变
            内框（2个）红线负责子视图内部的大小是否可变


3.4编写代码实现Auto Resizing
    设置视图的 autoresizingMask属性即可，代码设置时，规则的描述与在检查器中点亮红线的描述要相反，如，在检查器中点亮左、上为固定距离时，那么用代码描述就要说 视图的 右、下为长度可变

4.Auto Layout (自动布局)

4.1是什么？
        从iOS6开始的一个新的布局技术，功能强大，操作复杂，从xcode5开始，慢慢好用，在xcode6中，又配合Size Classes技术完成屏幕适配工作

4.2 工作原理
        1）通过一系列的“约束constraint”来描述视图的展示位置
        2）什么是约束？代表一个条件，只需要设定一些约束，则系统就会根据这一堆约束，自动计算出符合约束的frame

        3）如何创建约束？
            方式一：在故事板中可视化配置


            方式二：用代码创建

        4）约束的两个原则
            1）描述清楚（如果不清楚，约束变成橙色）
            2）互不冲突（如果冲突，会显示红色）
            如果满足以上两个原则，则线条变成蓝色

1.使用代码创建Auto Layout约束

1.1什么时候用？
    子视图使用代码创建时，或者需要使用代码修改已有约束时

1.2 怎么实现

    step1：创建约束对象NSLayoutConstraint
    step2：将约束对象加入到视图的父视图中

1.3 创建一个约束对象

    方法一：万能公式法
    任何一个视图的约束都可以由下面的等式描述出来，就是要把文字性的描述变成等式中的参数

    view1.attr1 <relation> view2.attr2 × multiplier   + constant

    文字性描述：按钮1距离视图的左边为20个点
    公式描述：button1.left = self.view.left *1 + 20

    文字性描述：按钮1的宽度是按钮2的宽度的一半儿
    公式描述：button1.width=button2.width*0.5+0

    文字性描述：按钮1的右边缘与按钮2的左边缘距离10个点
    公式描述：button1.right = button2.left * 1 - 10
                 button2.left = button1.right *1 + 10

    约束中的等号左边，代表描述的主体，一般也叫firstitem
    约束中的等号右边，代表参照的视图，一般也叫seconditem
    multiplier和constant都是为了使等式成立的系数以及偏移量


    方法二： VFL法 （Visual Format Language）
        是什么？一个字符串，具有一定的格式，不同的格式代表不同的约束，并且，一个字符串往往能一次性表达出多个约束
        好处：使用VFL描述完约束，并转化为一组约束，会比万能公式法，节省大量的代码，并实现多个约束的添加

        如何写VFL字符串？

        1》 button1和button2之间的间距为30
            VFL：[button1]-30-[button2]

        2》button1的宽度为50
            VFL：[button1(==50)]或[button1(50)]

        3》button1水平方向离父视图的左右边距为50
            VFL：|-50-[button1]-50-|

        4》button1与竖直方向上的button2 间距为10
            VFL ：V:[button1]-10-[button2]

        5》button1与视图的顶端距离为20
                VFL ：V:|-20-[button1]

    VFL特殊符号的含义：
        |                代表父视图的边缘
        H：|        代表父视图的左边
        V：|          代表父视图的上边缘
        [ ]              代表一个子视图（控件）
        ( )             代表宽度的条件
        -                 代表标准间距  为 8
        -x-              代表间距是x


    文字：button1,2,3 等宽，间距为10，button1左边距与view为20，button3的右边距与view为20
    VFL:  |-20-[button1]-10-[button2(button1)]-10-[button3(button1)]-20-|

2.Size Classes

    2.1 是什么？
        为了适配越来越多的不同尺寸的屏幕。

    2.2 核心理念
        将8块屏，进行分类，然后，设计界面时，针对这一个类别，进行设计，然后，等到程序运行时，系统会根据当前实际的设备，判断出当前屏幕属于哪一个类别，然后，就加载针对这一个类别设计的那个界面即可