Beginning Adaptive Layout - Adaptive Layout初阶

在Adaptive Layout初阶这一部分，我们写一个关于weather的小app，一句代码都不用写（这么好-_-|||），Let's begin!

1 - Universal storyboards

Universal storyboards好处就不多说了（一样的storyboard，跑遍各种iOS设备），先建立一个工程尝试下下：

打开Xcode（这里用的时Xcode 6），选Create a new Xcode project：

选iOS\Application\Single View Application，再点Next：

给你的Product取个名字叫AdaptiveWeather，语言选Swift，Device设成Universal：

打开工程，就能在Project Inspector中看到你的Main.storyboard：

现如今的Main.storyboard已经是one for all的神器了，不管iOS设备屏幕尺寸，你就需要这么一个Main.storyboard。打开这storyboard，一个孤零零的view controller映入眼帘：

从Object Library里，选Image View拉到view controller的convas里面。并且在Size Inspector里，把X position设成150，Y position设成20，Width为300，Height为265：

接着再从Object Library里拽一个View放到刚刚加入的image view下面，在Size Inspector里，把X position设成150，Y position设成315，Width为300，Height为265：

选择刚刚加入的View，打开Identity Inspector，在Document pane下地Label中输入TextContainer，并在Attributes Inspector中把它的background color设置成Red：55，Green：128，Blue：186.

最后选择这个view controller的view，并在Attributes Inspector中把它的background color设置成Red：74，Green：171，Blue：247：

然后，来给这两个views加点layout constraints。

（1）Adding layout constraints

选image view，点击下auto layout工具栏里的Align，然后把Horizontal Center in Container给check上，并且一定一定把它的值设成0：

接着点Align右边的Pin，给它加一个top spacing to nearest neighbor constant，值为0：

接着，为了确定image view和下放的text container的间距，从image view开始Crtl+drag到下面的container view：

在紧接着出现的constraint context menu中，选择Vertical Spacing：

选择image view，打开Size Inspector：

点击Bottom Space To：TextContainer后面的Edit，把Constant设成20：

选择TextContainer view，然后点Pin，先勾选掉Constrain to margins，然后在Spacing to nearest neighbor中，将left，right，bottom都设成0，最后点Add 3 Constraints：

现在得到这样一个东西：

还没完事儿，接下来加图。

在Project Navigator里打开Images.xcassets（不要说你不知道在哪），点击左下角+号，选择New Image Set：

点击下新建Image Set左上角的Image字样，改成cloud：

把图片素材拖放到相应位置（你可能没有素材……）。

回到Main.storyboard，选择image view，切换到Attributes Inspector，在image后的输入框中输入cloud，并在View\Mode的下拉列表中选择Aspect Fit：

橘黄色的constraints说明还有活要干，所以，首先选择view controller的view，然后点击底部的Resolve Auto Layout Issues（位于Pin右边），点击All Views\Update Frames，Xcode帮你全部自动搞定，厉害了：

（2）The Preview Assistant Editor

Xcode中得全新Preview Assistant Editor貌似挺给力，现在来尝试下下。

打开Main.storyboard，点击菜单上的Assistant Editor：

接下来……但愿你能找到：

点击Main.storyboard(Preview)：

点击最下方的旋转按钮，转转更舒爽~：

这个云貌似太大了（其实也还好），改一下。

从image view上Ctrl-drag到view controller的view上，这样进来一个新的constraint，在冒出来的菜单列表中选择Equal Heights：

然后就冒出来一堆红呼呼的constants：

选在这多白云右边那条红色的constraint，打开Attributes Inspector，设置成如下值：

云朵就这么被搞定了，红呼呼消失：

（3）Adding content to the TextContainer（To be continued）

拽两个label到TextContainer上：

选中第一个label，调整Align和Pin的设置如下：

接着选中Attributes Inspector，设置Text为Guangzhou，颜色为White，字体为Helvetica Nenu，Thin，Size为150。

第二个Label的Align值设置的与第一个Label相同。Pin中设置Bottom space to nearest neighbor为10，Text为26C，颜色为White，字体为Helvetica Nenu，Thin，Size为250。

最后Resolve Auto Layout Issues，点击All Views\Update Frames，最终效果如下：

这字体，明显大了……

不过，夜深了，睡了……