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

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

可视化的搭建UI效率是很高的。所以官方苹果也是很推荐的。那么我们来学一学怎样利用系统自带的故事版（storyboard）来搭建UI。可视化搭建UI除了能够使用storyboard也能够使用xib。事实上使用它们也是很easy的，仅仅须要在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试试

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

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

上传图片竟然不小心没了， 还好在点击打开别的博客里面有备份。

懒得又一次再上传一次，就放个链接好了。