解析xcode6 autolayout

 

 

我们知道，一款iOS应用，其主要UI组件是由一个个相对独立的可视单元构成，这些可视单元有的主要负责向用户输出有用的信息，有些则负责信息的输 入（交互），交互的过程中往往还伴随有动画的效果，已达到整个信息传递的连贯性以及用户体验的细腻感。可视单元，在实际开发中主要是view、 button等，那么这些可视单元的关系由两个基本的关系构成：兄弟关系和父子关系，整个视图单元就是一个树形结构：

在iOS8中，新增了Size Classes特性，它是对当前所有iOS设备尺寸的一个抽象，也是该抽象了，想想现在多少种iOS尺寸的设备吧：iPhone4-5-6-6plus、 iPad、iPad mini、iWatch，如何还是按照以前那针对种特定设备来编写不同的布局的话，一定是很糟糕的一件事情。

现在有了sizeclass，事情就好办多了：你不是设备多吗，那我们就只把屏幕的宽和高分别分成三种情况：（Compact, Regular, Any），也即紧凑、正常和任意。这样宽和高三三一整合，一共9中情况。如下图所示，针对每一种情况，如果需要的话，我们可以单独在storyboard 或xib中设置UIView的自动布局约束，甚至某一个button是否显示都是能轻松实现。

假设，我们想实现下面这个效果：横屏和竖屏头像和label都能正常的现实，且在“比较恰当”的位置：显然横屏的时候，高度处于压缩的状态， （height: compact），我们需要先对正常的布局之外，还要添加一种（wAny, hCompact）size class的布局：

 

首先，我们对默认的sizeclass进行布局，确定头像和label的位置和尺寸：

 

设置完（wAny hAny）之后，点击wAny hAny文字（上图底部），选择（wAny hCompact）：注意点击后弹出一个九宫格浮框，拖动鼠标即可选择响应的size class，注意在右下角（红色方框表示），还可以选择是否install，如果取消勾选，则这个头像在当前size class下就不会被加载（自然也就不显示出来）。

 

在新的size class下我们开始添加新的布局，注意，这里并没有覆盖上一种size class我们定义好了得布局，知识针对当前的size class添加新的、独立的布局信息，狡兔三窟，Xcode6这下子一口气给了我们九个窟窿，爽！

 

布局完毕，运行起来，即可达到我们想要的效果！

Awesome, isn't it ?