iOS笔记UI--使用storyboard添加约束

申明：此为本人学习笔记，若有纰漏错误之处的可留言共同探讨

可视化的搭建UI效率是非常高的，所以官方苹果也是非常推荐的。那么我们来学一学如何利用系统自带的故事版（storyboard）来搭建UI。可视化搭建UI除了可以使用storyboard也可以使用xib。其实使用它们也是非常容易的，只需要在xcode的右下角写处控件的名字，然后拖拽到故事板上即可，如图

拖拽完之后。就是根据需求去设置控件的大小，以及屏幕的适配（iphone4~iPhone 6s plus）等。在这个设置大小的点，我们就要用到约束。以前用代码也是要用到约束去约束每个控件的大小的。所以约束的概念也不展开讲了。（假如你实在不想用约束的话，其实也是可以实现屏幕的适配的。可以用比例的大小去设置，类似于h5）。现在主要说说如何实现，怎么去操作，给控件加上约束。

我现在先拖拉一个UIView来设置一个距离顶部的约束

这样设置完之后就会出现如下的现象

出现红色说明还有欠缺的约束没有加完。顶部那个线就是我们添加的约束。假如我们先写距离顶部的距离是133。那么我们不论切换到哪个屏幕的大小都是133。

我们再往左边添加一个约束，然后设置它的宽高为100。即如图

约束完之后就可以了

这样约束完之后的那个UIView的大小和位置就是固定的了。以后不论修改成哪个屏幕都是一样的。

不过这样有个缺点，它的距离的位置和大小是绝对的而不是相对的。假如你用iphone4展示出这个界面，就觉得偏的话，那么用iphone6s就会显得差不多或者刚刚好，用例子看看，如图

所以，我们应该得用相对位置和相对大小。假如我们想让它水平居中，那么我们把原来的左边约束给删除，添加一个水平居中的约束

这样就水平居中了。再运行看看

这样就水平居中了。既然是相对约束，当然不止仅仅只能水平居中了，比如说我要偏左一点怎么办？偏右一点怎么办？改水平居中系数，如图

点击那个edit出现后修改那个Multiplier，那个就是系数值，比1小就是往左，比1大就是往右，我们来设置一下0.6和1.8的效果看看

这样看是不是很明显？那么这样就可以根据实际需求设定我们需要的位置了。垂直居中也是这样设置。就是选中水平约束下面那个（vertically）

写完相对位置之后，我们应该要来想想怎么设置相对大小了。为了方便演示，先把原来那个删除了，重新拉一个UIView。把它的大小和屏幕设置成等高等宽。

把equal widths 和equal heights打上勾就可以，add上去就可以了。设置完之后就是这样

就是因为我们还没有加位置约束，我们给它左边和上边都是0.0，这样就可以了

OK，到这里就可以实现相对大小了。

同理的，我们想修改它不是满屏大小，也可以使用系数

修改成0.4试试

宽高同理，想学习的慢慢自己搞搞。

学到这里，我们就已经学会了加绝对值的约束以及加相对值的约束。接下来的各种组合就看项目的实际需求以及你们的各种发挥各种想象力了。加油！

上传图片居然不小心没了， 还好在点击打开别的博客里面有备份。 懒得重新再上传一次，就放个链接好了。