iOS StoryBoard自适应布局

原文地址：点击打开链接

通用的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：