上节分享了用纯代码方式进行UI开发。但纯代码UI开发有个缺点，就是不够直观，UI修改后不能马上看到效果，需要在App编译运行后才能看到UI效果，这明显影响开发效率。
这节介绍一下，苹果公司推荐的一种UI开发方式：storyboard，即故事板。使用storyboard开发的优点就是比较直观，页面效果以及页面之间的跳转关系一目了然。
但是storyboard也有一个问题：协作问题。比如一个多人协作项目，多人同时修改了同一个storyboard，那么在项目合并时会有很大问题，所以实际多人协作项目中，很多公司开发依然是使用纯代码方式。一种解决这种冲突的方案是：UI模块化。将整个App的UI页面按照功能划分为若干模块，不同UI模块对应不同的storyboard，每个人只能修改自己所负责的storyboard，如果要越界修改，必须事先沟通，这样可以避免冲突出现。
一、创建项目
打开Xcode软件，创建一个"Single View App"项目，项目命名为：Storyboard,不清楚怎么创建工程的人，请参看 。
二、storyboard界面简介
点击项目界面左侧目录里的Main.storyboard文件，可以看到storyboard的编辑界面，分为三个大的区域(红色方框），分别介绍一下：
1.区域1(左侧)：用目录层次结构的方式，显示storyboard中包含的页面及其子视图。从这里，我们可以看到storyboard中包含多少个页面，每个页面上包含多少个子视图，子视图又包含多少自己的子视图...。我们可以看到，工程创建后storyboard就已经包含了一个默认的页面，名字叫：View Controller。这个名字是不是很眼熟，没错的，就是对应到ViewController.swift文件中定义的ViewController类。你肯定要问我：你怎么确定就是ViewController.swift里的那个 ViewController类? 按照下图红色方块标示的顺序点击，你就可以看到，方框3的左侧class(类)名称就是ViewController。就是在这个地方，ViewController类被绑定到storyboard上。
上一节介绍的纯代码UI编程，就是在页面(ViewController类)里面通过代码方式添加各种UI视图。这节我们将介绍通过storyboard，在页面里添加UI视图。你会发现通过storyboard来添加UI视图，要简单直观的多。
2.区域2(中间)：用来展示storyboard中各个页面呈现给用户的实际效果，上图显示的就是ViewController这个页面。
3.区域3(右侧)：是属性面板，主要用于显示和设置页面及其所含视图的各种参数，比如设置按钮的颜色、字体、尺寸、约束等参数。
三、添加Label视图
接下来，我们在ViewController这个页面中添加一个Label视图，Label视图是用来显示一段文字的视图。如下图所示：
1. 首先点击开发界面右上角红色方框1，会打开一个选择视图的对话框。
2. 然后用鼠标左键按住红色方框2有“Label”字眼的这个视图，拖动到中间的空白页面上然后松开鼠标左键，如下图中的箭头所示。注意：要按住鼠标左键拖动，中途不要松开，拖到目标位置后再松开。这时我们已经在页面中添加了一个Label视图。
这时你可以点击编译运行App后，在手机模拟器就可以看到App页面中间多了"Label"这行字
四、修改视图属性
我们接着修改Label的一些属性，点击一下左侧红色方框1位置，选中这个Label这个视图，然后再点击右上角红色方框2，打开属性面板，在红色方框3这个位置可以修改要显示的文字内容，接着在红色方框4点击最右侧的蓝色上下箭头在弹出的框中选择红色颜色，最后将红色方框5的两个数值修改为-3，这时就可以看到，文字产生了重影效果，影子是红色。其他还有很多属性，在此不一一做介绍了。
设置后的效果如下图所示：
五、视图约束
1. 添加约束
接下来我们来关心一下视图的位置问题。其实上面的视图在页面上已经占有一个位置了，我们可以通过下面方式查看：首先点击红色方框1，选中这个Label视图；然后点击红色方框2，打开布局参数卡片；红色方框群3有四个参数：x、y分别是Label视图左上角顶点相对于整个页面的x坐标和y坐标（整个页面的坐标是以整个页面左上角为坐标原点，向右为x轴的正方向，向下为y轴的正方向），width和height分别对应Label视图的宽度和高度。
但是，上述这些Label视图的尺寸都是固定值。这种固定位置明显不能满足不同尺寸手机屏幕的要求。假设我们目的是让Label视图显示在屏幕正中间，我们通过调整上面x、y、width、height参数，让Label视图在4英寸屏幕上显示在屏幕中间。但是，当我们把App再安装到手机屏幕尺寸5英寸上看，Label视图就会跑到手机屏幕偏左上角的位置，这是我们不想看到的。因此，iOS提供了一套布局方法：约束。
下面我们通过约束让我们的Label视图达到如下的期望位置：Label视图在页面中水平居中，并且距离页面的上边的距离固定为50。为了达到这个目的，我们需要用到两类约束：
1.第一类就是上面那样，设置目标视图到某个参照物的距离以及视图本身的尺寸。
2.第二类是对齐约束，比如视图的左边与某个参照物的左边对齐，或者视图的中心点与参照物的中心点对齐等。
先设置水平居中，要用到第二类约束，如下图所示，点击红色方框1选中这个Label视图，再点击红色方框2弹出对齐约束页面，在红色方框3处打勾，这个选项就是设置水平居中的，最后点击红色方框4确认添加这个约束。
设置后的效果如下图，可以看到已经水平居中了。
接着，我们再设置到页面上边的距离为50，用到第一类约束。如下图所示点击红色方框1的图标，弹出添加约束对话框，然后在红色方框2处的输入框里输入50，输入后我们可以看到输入框底下的那个象"工"字的红色线变成实线，其他相邻的几个没有设置的依然还是虚线，这表示已经设置了这个约束，最后还要点击一下红色方框3，确认设置这个约束。至于其他的选项用猜应该也能猜个大概，在这里就不做介绍了。
设置后的效果如下图所示：
这样设置后，不论屏幕是大是小，这个视图（标题）就始终处于屏幕的水平中央，并且距离上边距为50。就不会出现位置跑偏这种尴尬的事情。
2. 清除约束
如果不小心设置了不想要的约束，要怎么清除掉呢？如下图所示，先点击红色方框1，弹出对话框。如果点击红色方框2，代表要清除掉当前选中视图的所有约束。如果点击红色方框3，代表要清除当前页面上所有视图的所有约束，所以红色方框3点击操作要慎重。
3.修改约束
如下图所示，点击右上角红色方框1那个类似尺子的图标，打开Label视图尺寸设置面板，这个面板很长，有一部分可能会被遮住看不见，滚动条往下拉就可以了。可以看到红色方框2就是我们上面刚设置的两个约束。我们要将第二个约束的值改为距离上边10，双击（注意是双击）下面那个红色方框。
如下图所示，这时尺寸面板切换到了约束编辑界面，红色方框中的值就是我们要修改的，可以看到当前值为50，就是我们添加约束时设置的值，将其改为10，然后键盘回车。下图左侧页面可以看到Label视图距离页面上边距变小了。
注意：在添加约束、清除约束、修改约束之前，都要确认一下当前选中的是哪个视图，否则很容易改错视图，造成不必要的麻烦。
本系列会持续更新，有兴趣的同学，请关注我。
閱讀更多 移動大電猿 的文章
