在移动端开发过程中，可视化的搭建UI效率是非常高的，苹果官方也是强力推荐。我们现在来学一学如何利用系统自带的故事版（storyboard）来搭建UI。可视化搭建UI除了可以使用storyboard也可以使用xib。其实使用它们也是非常容易的，只需要在xcode的右下角处搜索控件的名字，然后拖拽到故事板上即可，如图
（为了方便观看，我们先随便给它设个背景色）
拖拽完之后。就是根据需求去设置控件的大小，以及屏幕的适配（iphone4~iPhone 6s plus、或者各种ipad型号）等。在这个设置大小的点，我们就要用到约束。以前用代码也是要用到约束去限制每个控件的大小的。因此约束的概念在这里也就不展开讲了。（假如你实在不想用约束的话，其实也是可以实现屏幕的适配的。可以用比例的大小去设置，类似于h5，用屏幕比例的方法，具体细节可以私聊）。现在主要讲讲如何实现给控件加上约束。
（现在先拖拉一个UIView来设置一个距离顶部的约束）
这样设置完顶部的约束之后就会出现如下的现象
出现红色说明还有欠缺的约束没有加完。顶部那个线就是我们添加的约束。假如我们先写距离顶部的距离是201。那么我们不论切换到哪个屏幕的大小View距离顶部的距离都是201。我们再往左边添加一个约束，然后设置它的宽高为100。即如图
约束完之后就可以了（如果出现的约束是蓝色的，说明约束正常）
这样约束完之后的那个UIView的大小和位置就是固定的了。以后不论修改成哪个屏幕都是一样的。
不过这样有个缺点，它的距离的位置和大小是绝对的而不是相对的。假如你用iphone4s展示出这个界面，就觉得刚刚好的话，那么用iphone6就会显得有点偏，用例子看看，如图
所以，我们应该得用相对位置和相对大小。用相对位置和相对大小的话，它是根据屏幕的大小去自动适配控件的位置和大小，这样子就可以比较符合开发员的预期需求。那么我们如何来做呢？我们来试试！
假如我们想让它水平居中，那么我们把原来的左边约束给删除，添加一个水平居中的约束点击View，然后点到约束的控制面板，找到左边的约束，选中，按delete删除
（ps如果选不中约束按delete的话，会把整个View都删除掉的，不过不用担心，按command+Z撤销回来即可，然后再选中约束，把它删除掉）
删除完约束之后约束会爆红是正常现象，不管它，我们来添加水平居中的约束，先点击View，然后点击约束约束，horizantally（水平）打上勾，选择update然后add上去，如图
这样不论是在哪个屏幕上,我们的控件都水平居中了。
这样就水平居中了。既然是相对约束，当然不止仅仅只能水平居中了，比如说我要偏左一点怎么办？偏右一点怎么办？改水平居中系数！看图说话
点击那个edit出现后修改那个Multiplier，那个就是系数值，比1小就是往左，比1大就是往右，我们来设置一下0.6和1.8的效果看看
（ps按command和-可以缩小故事版的视图，方便查看，按command和+就是放大，值得注意一点的是，至少要原故事版大小或者比原故事板大小的大才能在上面修改控件，不然顶多只能移动一下视图的位置而已。双击视图就可以恢复原大小了）
这样看是不是很明显？那么这样就可以根据实际需求设定我们需要的位置了。垂直居中也是这样设置。就是选中水平约束下面那个（vertically）
写完相对位置之后，我们应该要来想想怎么设置相对大小了。为了方便演示，先把原来那个删除了，重新拉一个UIView。把它的大小和屏幕设置成等高等宽。
先选中当前控件和要等高等宽的父控件，把equal widths和equal heights打上勾就可以，add上去就可以了。
（ps这里要注意选择当前控件和要等高等宽的父控件按住command用鼠标点击左边的控件名就可以了，就是框起来的那两个）
添加完之后约束那里还是爆红，是因为我们还没有加位置约束，我们给它左边和上边都是0.0，这样就可以了
接下来点中View，选择约束，添加左、上为0
OK，到这里就可以实现相对大小了。
根据那个相对位置的设置，同理的，我们想修改它不是满屏大小，也可以使用系数
我们把宽度修改成0.4试试
这样子View的宽度不论是切换到哪个屏幕都是占屏幕总宽的0.4大小了。宽高同理，想学习的自己慢慢尝试。
学到这里，我们就已经学会了加绝对值的约束以及加相对值的约束。接下来的各种组合就看项目的实际需求以及你们的各种发挥各种想象力了。加油！
