Swift自适应布局（Adaptive Layout）教程（一）

通用的Storyboard

通用的stroyboard文件是通向自适应布局光明大道的第一步。在一个storyboard文件中适配iPad和iPhone的布局在iOS8中已再也不是梦想。咱们没必要再为不一样尺寸的Apple移动设备建立不一样的storyboard文件，不用再苦逼的同步若干个storyboard文件中的内容。这真是一件美好的事情。

咱们打开Xcode，新建一个项目：

选择iOS\Application\Single View Application建立一个单视图应用：

设置项目名称AdaptiveWeather，语言选择Swift，设备选择Universal：

建立好项目后，咱们在项目目录结构中能够看到只存在一个storyboard文件：

Main.storyboard文件就是一个通用的storyboard文件，它能够适配目前全部屏幕尺寸的Apple移动设备。打开该文件，同窗们会看到一个View Controller，以及一个咱们不太熟悉的界面尺寸：

同窗们不要吃惊，没错，大家看到的就是一个简单的、有点大的正方形！大伙都知道，在上一个版本的Xcode中，storyboard里的屏幕尺寸都对应着咱们所选的目标设备的尺寸，可是这样没法让咱们达到“用一个storyboard搞定全部设备”的宏伟目标。因此在iOS8中，Apple将storyboard中屏幕的尺寸进行了抽象处理，也就是说咱们看到的这个正方形是一个抽象的屏幕尺寸。

咱们接着往下走，选中Main.storyboard文件，而后在右侧工具栏中选择File Inspector页签，而后勾选Use Size Classes选项：

在新的iOS8项目中，该选项默认是勾选的。但当你使用老版本的项目建立新的storyboard文件时就须要你手动进行勾选了。

设置你的Storyboard文件

首先，咱们打开Main.storyboard文件，从组件库（Object Library）中选择Image View拖拽到View Controller中。选中刚刚拖入的Image View，在右侧工具栏选择Size Inspector页签，设置X坐标为150，Y坐标为20，宽为300，高为265。

而后再拖入一个View组件，设置X坐标为150，Y坐标为315，宽为300，高为265。

选择你刚才拖入的View，在右侧工具栏中选择Identity Inspector页签，在Document面板中的Label属性输入框中输入TextContainer。这个属性的做用就是给View起一个名字，方便咱们辨认。这里要注意一下，Document面板有多是隐藏的，咱们须要点击它后面的 Show按钮来显示它。咱们拖入的这个View最后是显示城市和温度Label的容器。

完成上面的设置后，同窗们可能会发现刚才拖入的View貌似看不到，这是由于它的背景色和View Controller的背景色是相同的，都是白色，因此咱们不太容易辨别。咱们来解决这个问题，选中View Controller的View，而后在右侧工具栏中选择Attribute Inspector页签，设置背景色为 红：74，绿：171，蓝：247。而后再选择TextContainer，就是咱们拖入的View，设置背景色为 红：55，绿：128，蓝：186。此时Main.storyboard文件中应该是这番景象：

到目前为止，咱们在View Controller中添加了两个组件Image View和View，这也是仅有的两个组件，接下来咱们就要给它们添加一些布局约束了。

添加布局约束

选择image view，点击底部自动布局工具栏中的Align按钮，勾选Horizontal Center in Container选项，将后面的值设置为0，点击 Add 1 Constraint按钮添加第一个约束。

这个约束的意思是让image view在它的容器（View Controller的View）中保持居中。

而后再点击底部自动布局工具栏中的Pin按钮，添加一个image view顶部与容器顶部间距的约束，咱们设置为0：

上面这两个约束使image view处于容器居中的位置，而且它的顶部与容器顶部有一个固定的间距。如今咱们须要添加image view和text container view之间的约束。同窗们先选中image view，而后按住Ctrl键和鼠标左键，从image view往text container view移动鼠标：

松开鼠标左键后会弹出一个约束菜单，咱们选择Vertical Spacing：

这个约束决定了image view底部和text container view顶部之间的距离。

如今选中image view而后点击右侧工具栏中的Size Inspector页签，同窗们会发现这里在Xcode6中和以前的Xcode版本有所不一样：

你会看到以前添加的三个布局约束，你能够在Size Inspector中很方便的修改这些布局约束。好比点击Bottom Space To: TextContainer约束后的 Edit按钮，会弹出约束属性编辑框，咱们让Constant的值等于20：

而后点击该弹出框以外的任意地方关闭该弹出框。

你先已经将TextContainer view顶部与image view底部的间距调整到了20，咱们还须要添加TextContainer view另外三个边的间距约束。

继续选择TextContainer view，点击底部的Pin按钮弹出 Add New Constraints窗口，在 Spacing to nearest neighbor面板中设置左、右、底部的约束，将值设置为0，而后点击Add 3 Constraints按钮添加约束。这里要注意的是，在设置约束时要将 Constrain to margins选项的勾去掉，这样能够避免TextContainer view产生内边距：

这三个约束会让TextContainer view的左、右、底部三个边与容器的左、右、底部的间距始终为0。

如今Main.storyboard中应该是这番景象：

此时同窗们应该会注意到在view上有几个橘黄色的约束线，这意味着还有一些约束上的问题须要咱们注意。不过在运行时storyboard会自动更新view的大小来知足它与容器的约束条件。咱们也能够点击底部 Resolve Auto Layout Issues 按钮，在弹出框中选择 All Views in View Controller/Update Frames 来修复提示的约束问题，可是若是咱们这样作，那么image view的尺寸就会压缩成零，也就是会看不到image view。

这是由于咱们的image view还有没有任何内容，可是它有一个缺省的高和宽，而且值为0。进行自动布局的时候，若是被约束的view没有实际的高和宽，那么会依照缺省的高和宽来知足约束条件。

咱们接着学习，在项目结构中打开 Images.xcassets ，而后点击左下角的 +号，在弹出菜单中选择 New Image Set：

双击左上角的 Image 标题将其改成 cloud ：

咱们刚才新建的这个image set其实就是若干图片文件的一个集合，其中的每个图片都会对应一个特定的应用场景，也就是针对与不一样分辨率的Apple移动设备。好比说，一个图片集合可能会包含针对非视网膜、视网膜、视网膜高清三种分辨率的图片。自从Xcode中的资源库与UIKit完美结合后，在代码中引入图片时咱们只须要写图片的名称，程序在运行时会根据当前运行的设备自动选择对应分辨率的图片。

注意：若是你之前使用过经过资源库管理图片，那么你可能会发如今Xcode6中会有所不一样。那就是3x图片是怎么回事？

这个新的分片率是专为iPhone 6 Plus提供的。这意味着每个点是由3个像素点组成，也就是说3x的图片比1x图片的像素多9倍。

目前你的图片集合中仍是空的，同窗们能够在这里下载须要的图片cloud_images.zip ，而后将图片拖入刚才建立的名为cloud的图片集合中，将 cloud_small.png图片拖到 1x图片区域：

因为咱们的图片背景颜色是透明的，因此在图片集合中看到的都是白色的图片。你能够选中某一个图片，而后按下空格键来预览图片。好比选中 1x 图片，按下空格：

如今将 cloud_small@2x.png 图片拖至 2x 图片区域，将 cloud_small@3x.png 图片拖至 3x 图片区域。和以前状况同样，咱们看到的只是白色的图片，但咱们能够经过空格键来预览图片集合中的图片。

如今你就能够在image view中设置图片了。咱们回到 Main.storyboard 中，选中image view，在右侧工具栏中选择 Attribute Inspector 页签，将 Image View 面板中的 Image 属性设置为 cloud，而后将 View 面板中的 Mode 属性设置为 Aspect Fit ：

如今你的Main.storyboard中应该是这番景象：

咱们看到storyboard中一直有橘黄色的约束提示，是时候让咱们来修复它们了。首先选中view controller的view：

而后点击底部的 Resolve Auto Layout Issues 按钮，在弹出菜单的 All Views in View Controller 面板中选择 Update Frames ：

这时，storyboard会自动根据约束条件从新计算view的大小以知足约束：

预览助手编辑器（Preview Assistant Editor）

通常状况下，在这个时候咱们应该会在iPad、iPhone4s、iPhone5s、iPhone六、iPhone6 Plus这几个不一样尺寸的设备上编译运行程序，以便测试通用的storyboard是否能在不一样尺寸的设备上正确的自适应。但这确实是个体力活，一遍一遍的更改设备、编译、运行，多么苦逼。但上天老是会眷顾咱们这些苦逼的程序员，Xcode6提供了Preview Assistant Editor，能在一个界面上显示出不一样尺寸设备的程序运行状况，是否有问题一目了然。

咱们打开 Main.storyboard ，而后选择 View\Assistant Editor\Show Assistant Editor ，这时编辑区会分隔为两部分。再点击顶部导航栏中的 Automatic ，在弹出菜单中选择 Preview ，最后选择 Main.storyboard (Preview) ：

如今在 Assistant Editor 区域会显示一个4寸的界面：

咱们还能够点击预览界面底部，名字（好比图中的iPhone 4-inch）旁边的地方让屏幕翻转为横屏：

这无疑是针对检查不一样尺寸设备的自适应状况的一项重大改进，但还远远不止于此！点击预览界面左下角的 + 按钮，会弹出当前storyboard文件支持的各类尺寸的设备，可供咱们预览：

分别选择iPhone 5.5-inch和iPad，此时咱们在预览界面就能够同时显示三种尺寸的屏幕：

此时同窗们是否注意到4寸的横屏显示有点别扭呢？没错，它的那朵元太大了，咱们能够经过对image view添加其余的约束条件来改善这个问题。

回到 Main.storyboard ，选择image view，而后按住 Ctrl建和鼠标左键，拖动鼠标到View Controller的View上，松开鼠标后会弹出一个菜单，咱们选择 Equal Heights ：

这时会出现一些红色的约束提示，这是由于咱们刚才加的这个约束条件与以前加过的约束条件有冲突。由于以前咱们添加过image view和TextContainer view之间的垂直间距（Vertical Margins）约束，因此image view的高度不可能等于它容器（View Controller的View）的高度。

让咱们来修复该问题，首先在storyboard的结构目录中选择咱们刚才添加的 Equal Heights 约束，而后选择右侧工具栏中的 Attribute Inspect 页签，若是 First Item 属性不是 cloud.Height ，那么在下拉菜单中选择 Reverse First and Second Item 这一项让 First Item 的值成为 cloud.Height ：

接下来将 Relation 属性的值设置为 Less Than or Equal ，将 Multiplier 的值设置为 0.4 ：

这一系列设置的做用是让cloud这张图片的高度要么等于它自身的高度，要么等于屏幕高度的40%，最后呈现的效果选择这二者中较小的一个高度。

如今你应该注意到了在预览面板中，4寸的横屏显示即时的对你刚才的约束改动作出了响应：

你看看其余尺寸的预览自动更新了么？答案那是必须的，因此说 Preview Assistant Editor 确实是一项重大改进，是程序员和设计人员的福音！

因为本文的示例是一个天气应用，因此光有天气图标不行，咱们还得加上城市和温度才行。

本文首发地址：Swift自适应布局（Adaptive Layout）教程（一）