Xcode6-AutoLayout、Size Classes使用初探

　　突然抽了，发现Xcode6的适配真好用，那叫一个爽歪歪，可是毕竟原来用的不多，所以此博客技术不深入，有错误的还希望大家积极指正！小弟先谢过啦。。

　　可能比较啰嗦，并有点难懂，因为只写了一个大致方向，详细的很多细节请参看大牛的博客。

　　尾部链接的几个博文写的非常给力，建议看一下。。。

　　话不多说，如题：

---

　　一、AutoLayout、Size Classes基本概念此处不再赘述，详细请参看尾部。

　　二、怎么用？

　　　　先说Size Classes （以下简称SC）。Xcode6创建的工程是不是很神奇？那个Xib、SB文件怎么那么抽象，还是正方形的！其实不用怕，简单的测试就知道了。

　　　　－－不扯了，太话痨。。

　　　　　　看一下大多数朋友曾经关闭的那个按钮的地方：

　　　　　　先打开这两个选项，然后开始使用自动布局部署各种设备吧！

　　　　仔细观察你会发现这个东东：

　　　　然后仔细观察发现和原来有不一样的地方，那就是多了个“wAny hAny”这个东东点开之后会有这么个九宫格：

　　　　　　　　此九宫格拖拽以下看看，还不错吧！有说明，还能改变后面的屏幕的大小。这就是SC。根据不同的选择会出来不同的尺寸，但是这个都是有规则的，简单来说左侧第一排或者第一行是一个叫Compacth(紧凑)的尺寸，中间是个叫any的尺寸，最后那个是Regular(正常)这么一个尺寸，然后重点来了！这几种东东怎么对应设备的尺寸？

　　　　拖一个Label测试一下，或者测试一下结果如下：

iPhone4S,iPhone 5/5s,iPhone 6

竖屏：(w:Compacth:Regular)

横屏：(w:Compacth:Compact)

iPhone6Plus

竖屏：(w:Compacth:Regular)

横屏：(w:Regularh:Compact)

iPad

竖屏：(w:Regularh:Regular)

横屏：(w:Regularh:Regular)

AppleWatch(猜测)

竖屏：(w:Compacth:Compact)

横屏：(w:Compacth:Compact)

　　　　如果你是自己测试的你会发现，其实有时候你再这里拖拽了控件，当你改变之后你会发现它神奇的莫名的消失了！！这是因为他们之间有一个继承关系。简单点来说就是这样的：

w:Compact  h:Compact继承(w:Anyh:Compact,w:Compacth:Any,w:Anyh:Any)
w:Regular    h:Compact继承(w:Anyh:Compact,w:Regularh:Any,w:Anyh:Any)
w:Compact  h:Regular继承(w:Anyh:Regular,w:Compacth:Any,w:Anyh:Any)
w:Regular    h:Regular继承(w:Anyh:Regular,w:Regularh:Any,w:Anyh:Any)

　　是不是看不大懂？没事，记住简单的这么一个规律：如果出现C/R那么这个布局就继承自该属性为Any的布局。这么一推倒，那么最开始创建时候那个方方的布局（wAny hAny）就是一个通用的布局，就是说不管你怎么改变设备屏幕的尺寸，所读的布局都继承于这个布局。

---

 

　　现在有了上面的基本知识，就可以动手创建一个试试了！ 

　　　　如果试一下你会发现这就是坑人的！拖控件靠边时候就出屏幕了！确实如此。。其实如果你设置九宫格错误的话，有的设备根本就不会出来你拖拽的控件！如果出现这种问题，那么就对着设备尺寸再看看吧！

　　　　控件不消失的可以跳过该段！如果你还没有成功！那么来这里吧：

看设备尺寸，你会发现一个现象：
        手机：
                竖屏：w:Compact  h:Regular

    呵呵，你懂的。。。对的就是你想的那样，如果说我的布局设置成w:Compact  h:Regular格式，那么该布局在手机的竖屏上总能显示！（只是显示，，是否错位是否超出屏幕，未知）

    但是这样写有好处也有弊端。。。如果你只做竖屏手机应用，这就是好的，如果其他的就不行了。。。


   另外一种方法：灵活使用Any！！比如一下：

        手机竖屏：w:Compact    h:Regular
        iPad竖屏：w:Regular      h:Regular

        我知道你又懂了。。。是的！
            如果在九宫格为w:Any   h:Regular  中进行布局的话，那么手机、iPad的竖屏都会显示里面的控件。只是显示，如果正常需要加约束，下面说。


    总体上来说就是这样的，如果说你在W:Any  H:Any 中设置，则所有的屏幕尺寸均会得到这个布局里面的控件。具体的自己耍着玩吧。。。

---

　　　　然后开始AutoLayout（AL）

　　首先你应该现弄明白上面的东西。然后保证在某些设备上控件不会消失！然后在进行下面的操作。。。

 名词解释：

　　　　约束：就是一种布局的表述。比如：A和B上对齐。

---

 

 重点来了：

　　　　首先，需要做的事情是淡化frame！AL是描述性布局，里面的所有的Frame均可以设置为CGRectZero!所以说，如果你创建了一个约束，那么系统就不会为你创建自动布局的默认约束条件，你必须接手全部的布局。否则会发生不可预知的错误。有人该想，系统有自动布局那我不是可以不用添加约束就能达到效果呢？那么你就想错了。只有你自己才知道你的代码需要添加什么样的约束，除非你还没有明白怎么布局你的UI。

　　　　第二步：设计你的UI。运用几何，不使用frame完成你的页面的一个表述。比如说如下布局页面和约束：

　　　　

1.左上角和右上角的视图总是有相等的宽度（也就是pin中第一个widths equally命令）。
2.左上角和右上角的视图水平方向有20点距离（也就是pin中的horizontal spacing）。
3.所有的视图总是有相同的高度（也就是pin中heights equally命令）。
4.上面两个视图和下面那个视图垂直方向上有20点距离（也就是pin中的vertical spacing）。
5.视图和屏幕边缘有20点空间（top，bottom，leading和trailing space相对于父视图的约束）。

大致知道布局的约束是怎么情况了吧？！是不是觉得很复杂？但是如果你觉得复杂的话，去用代码写几个设备的坐标，你会发现其实这个是比较简单的。

　　　　第三步：创建约束。上图中的蓝色线表示已经创建好的约束（有效的约束为蓝色，无效的约束为橙色）。现在开始创建约束。

　　　创建约束的位置：

不要问为什么都是灰色的。。因为我没有选中View。

　　在IB的右下方有这么一行快捷设置的，并效果比较多：

同时还能进行ctr＋点击＋拖拽到相应View ＝ 弹出框会出现约束的设置。

另外还有约束也是一个对象，有对应的属性（优先级等）具体位置如下

 

 

　　大致功能有这么几种，设置宽高、设置横竖控件距离、设置距离父View的四边距离、设置两个View等宽／高。

　　　　　　很显然：有的是需要选中一个就能设置的，比如第一项和第三项。有的是需要选中两个才能进行选择的，比如第二项和第四项。这个不用我再进行翻译了吧？！

 

如果还是不懂的话，建议参看后面的链接。他的比我的详细。

以上是IB的设置自动布局，然后是代码的自动布局。

　　使用代码进行设置约束时候有这么两种设置方式：

　　 

    /**
     *
     *  步骤：
     *
     *      1.添加该视图到父View
     *      2.生成约束对象
     *      3.在对应的视图上添加约束条件
     *          1）有的约束添加在对应的父视图上，有的约束则是添加在自己身上。
     *  ⚠⚠⚠ 4.生成的约束一定要能够保证是有效的，否则会出现不可预知的事，比如：看不到视图、崩溃等
     */
    
    UIView * view = [[UIView alloc] initWithFrame:CGRectZero];
    [view setBackgroundColor:[UIColor orangeColor]];
    [self.view addSubview:view];
    
    CGFloat constant = 20.f;
    
#ifdef itemOrVFL
    NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view
                                                                  attribute:NSLayoutAttributeTop
                                                                  relatedBy:NSLayoutRelationEqual
                                                                     toItem:view.superview
                                                                  attribute:NSLayoutAttributeTop
                                                                 multiplier:1.0f
                                                                   constant:constant];
    [self.view addConstraint:constraint];
#else
    NSArray *vfls = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-constant-[view]"
                                                            options:0
                                                            metrics:@{@"constant":[NSNumber numberWithFloat:constant]}
                                                              views:NSDictionaryOfVariableBindings(view)];
    [self.view addConstraints:vfls];
#endif
    
    /*
    常见的VFL的写法：
    [cancelButton(72)]-12-[acceptButton(50)]
        取消按钮宽72point，accept按钮宽50point，它们之间间距12point
    [wideView(>=60@700)]
        wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）
    V:[redBox][yellowBox(==redBox)]
        竖直布局，先是一个redBox，其下方紧接一个宽度等于redBox宽度的yellowBox
    H:|-[Find]-[FindNext]-[FindField(>=20)]-|
        水平布局，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线'|‘ 表示superview的边缘）
    */

 

---

总结一下：

　　　　自动布局才接触可能会觉得很难，因为其打破了原来的直接设置frame的设计UI的作风，所以刚开始可能会不习惯，但是仔细想，这样做还是比较好的。

　　　　SC的基本布局还是根据AL进行布局的。

 

---

贴出几个学习链接：

　　　　SC的理解和使用 http://www.cnblogs.com/zhw511006/p/3998534.html

　　　　AL教程 http://www.cocoachina.com/industry/20131203/7462.html

　　　　自动布局及VFL写法http://www.360doc.com/content/14/0731/09/11482448_398279878.shtml

　　　　纯代码布局 http://blog.sina.com.cn/s/blog_693de6100102v4sl.html

　　　　自动布局入门VFL的写法和含义 http://blog.csdn.net/sxfcct/article/details/8776928

　　　　VFL详细的写法说明 http://www.cocoachina.com/industry/20131108/7322.html