iOS学习--老菜鸟的storyboard学习之路

 作为一个老菜鸟，对于Xcode7的storyboard感到既熟悉又陌生，今天小小的尝试了一番，顿感汗颜，于是小记以自勉！

一、为什么使用storyboard＋autolayout

       1.当你要展示的内容很多并且尺寸不固定；

        2.屏幕需要适配旋转，尤其是ipad；

        3.程序需要同时适配iphone和iPad。

但storyboard中使用autolayout有利有弊，好处当然是可视化，实现简单功能很节省时间，但也有弊端，例如不小心移动一个控件就会让弄乱那些约束。抛开storyboard而使用autolayout，就需要代码定义约束了，而且代码量也不是很大。当app中一些view的出现时根据网络数据来决定的时候，代码方式可能更合适。

二、逐步了解各个选项卡及其功能

      

最上面选项卡栏：从左到右依次为

   1.File inspector   2.help inspector   3.Identity inspector   4.Attributes inspector   5.  size inspector    6.connections inspector

主storyboard界面右下角有4个按钮，从左到右分别为：

   1.stack  2.align  3.Pin  4.resolve auto layout issues

Q1:如何设置一个控件的名字？

   打开3选项卡，在Document面板中的Label属性输入框中输入 自定义的控件名字，eg：label01

Q2:如何设置控件的frame以及相对于父试图的约束？

   打开5选项卡，在View面板可以设置frame；

点击Align按钮，发现只有最后2个是可选的  Horizontal 是水平方向居中，Verical 是垂直方向居中；

点击Align按钮，可约束控件相对于父试图边界的约束， constrain to margins勾选是左右边界相等，不勾选时可自定义边界大小；

Width ：固定控件本身的宽度

Height：固定控件本身的高度

单独选中一个控件时 Equal Widths和Equal Heights不可选；

Aspect Ratio：保证控件的宽高比

设置好之后，点击 add Constraint 即可完成这部分约束。

Q3:如何设置2个同级控件的相对约束？

先选中view1，然后按住Ctrl键和鼠标左键，从view1往view2移动鼠标，松开鼠标左键后会弹出一个约束菜单，如下图：

 xcode7&ios8下 有所改变，从上到下依次为：

Horizontal Spacing      水平方向间距

Vertical Spacing           垂直方向间距

Top

Center Vertically

Baseline

Bottom

leading

center Horizontally

Trailing

Equal Widths               等宽

Equal Heights               等高

Aspect Ratio                 等宽高比

Hold Shift to select multiple   不可选

Hold Option for alternates      不可选

Tip：添加约束后 为 view1.xxx ＝ view2.xxxx

即view1随view2而定，即  鼠标出发控件 随 鼠标到达控件 而定

Q4:如何更改约束的first item和second item 的位置，即上面tip说的 等号左右换边？

选中具体某一个约束，选中右边栏第5个选项卡size选项卡，下拉菜单中点击First item或者Second item的最右边的下拉图标，勾选最后一个选项Reverse First And Second Item 即可

三、Size Classes

通用的storyboard文件固然很好，但是你想真正把它玩转还是得花功夫去研究它，这是一件很有挑战性的工作，当然我们也要懂得运用一些现有的工具来帮助我们。Xcode6就为我们提供了一些工具和技巧，帮助我们更好的实现自适应布局。

自适应布局有一个很重要的概念就是 Size Classes。它并不代表真正的尺寸，而是我们从感官上感觉尺寸的种类，通过这种种类的组合，表示出不同屏幕尺寸设备的横屏及竖屏。

Xcode6为我们提供了两个种类：普通（Regular）和紧凑（Compact）。虽然它们涉及到视图的物理尺寸，但一般它们只代表视图的语义尺寸，即不是真正的尺寸，而是我们从感官上分出的尺寸种类。

下面这个表格向同学们展示了size classes和各个尺寸设备竖屏、横屏之间的关系：

 

上表中的这些size classes组合都是我们在开发应用中经常碰到的。然而你也可以在视图的任何一个层级中覆盖这些size classes。当以后我们开发Apple Watch应用时显得尤其有用。

Size Classes与开发者

何为设计应用的UI？虽然现在你们的应用已经知道要使用Size Classes，并且你们在storyboard文件中设计应用界面时已经抛开了具体尺寸大小的束缚。但是你们难道没有发现在所有尺寸的设备中，不管是竖屏还是横屏，应用的界面布局都是一致的吗？只是自适应了尺寸大小而已。这还远远不是设计。

当你们决心要设计自适应的界面并已经开始设计的时候，有一点很关键。那就是要知道界面在不同的Size Classes要有继承的关系。你们应该首先设计一个基础的界面，然后根据不同尺寸的横竖屏在基础的界面上进行自定义。千万不要把不同的Size Classes当做独立的屏幕尺寸去设计UI。应该在你们的脑海中建立起界面的一个继承关系的思想，也就是大多数的设备使用基础界面，然后特别的尺寸及横竖屏再根据情况基于基础界面修改。

在本文中，一直没有像大家介绍过如何设置特殊设备的布局，那是应为自适应布局的核心概念Size Classes本身就是由各种特殊设备的特点抽象而来的。也就是说一个Size Classes就意味着一种特殊设备的布局特点，其实普通情况也是特殊情况中的一种。所以说我们可以组合不同的Size Classes来满足各种特殊的布局情况，比如一个支持自适应的视图，它可以在应用的父视图控制器中自适应，也可以在某一个功能的视图控制器容器中自适应。但是两者自适应后的布局却不相同。

这种改进对Apple本身也是有益的，因为他们不断的改变移动设备的尺寸，但从来没有强迫开发者和设计者重新开发和设计他们的应用以适应新尺寸的设备。这就不会让开发者和设计者对Apple不断改变设备尺寸这件事有抗拒心理。

接下来，我们将自定义Size Classes以适应iPhone横屏的时候，因为现在的布局在横屏时用户体验很糟糕。

使用Size Classes

回到 Main.storyboard，点击底部的 w Any h Any，你就可以看到Size Classes的选择器了：

 

在这个由9个方格组成的网格中，你就可以选择你想在storyboard中显示的Size Class。一共有9种组合方式：3种垂直的也就是竖屏的（任意尺寸（Any），普通（regular），紧凑（compact））选择和3种水平的也就是横屏（任意尺寸（Any），普通（regular），紧凑（compact））的选择。

注意：这里有一点需要大家注意。在Size Classes中，有两个重要的概念叫做水平（Horizontal）和垂直（Vertical）。但是在IB中叫做 宽（Width）和高（Height）。但他们是等价的，所以大家记住这个概念有两种叫法就可以了。

目前我们的布局在紧凑高度（Compact Height）时显示的很糟糕，也就是iPhone横屏时。我们来解决这个问题，在Size Classes选择器中选择 Any Width | Compact Height 的组合：

 

这时你会发现在storyboard中会立即出现2个变化：

 

1. storyboard中的view controller变成了我们刚才设置的size class。
2. storyboard底部会出现蓝色的长条区域，并显示出当前我们正在使用的size class。

为了在该size class下改变布局，我们要临时改变一些之前设置好的约束。在自动布局中这种操作有个术语叫做 装配（installing） 和 卸载（uninstalling） 约束。当一个约束在当前的size class中是适用的，我们就将该约束装配在当前的size class中，如果不适用，我们就卸载它。

选择image view，在右侧工具栏中选择 Size Inspector。你可以看到在image view上添加的所有约束：

 

单击鼠标左键选择 Align Center X to: Superview 约束，然后按下键盘上的 Delete 键来卸载该约束。这时我们可以看到在storyboard中这个约束就立即消失了，并且在storyboard的结构目中和 Size Inspector中该约束都变成了灰色：

 


 

注意：你可以在Size Inspector中点击 All 来查看当前size class卸载掉的约束。

鼠标双击刚才卸载的那条约束，我们可以看到在约束编辑界面的底部出现了额外的2个选项：

 

这两个选项的意思就是这条约束在基础布局中是可用的，但在当前的 Any Width | Compact Height 布局中是不可用的。

PS：偶有所得，会持续更新