(作业)使用autolayout和约束实现简单的界面布局

感觉好久没有写博客了，最近博主在复习java web准备考试，顺便为后面使用UIWebKit做铺垫吧。
今天就用xcode中的stroyboard实现自动布局，我们不用写一句代码，就能实现一些基本的布局。

第一套布局

这儿有两套布局，我们先来看看简单的那一套。


看这套布局特别简单，只需要创建三个UIView，然后让他们总的宽度等于屏幕的宽度，然后各自的长宽相等就可以了。接下来看一步一步的操作吧。
首先创建一个工程，然后在Main.stroyboard中向界面拖三个UIView并设置各自的背景颜色即可。(大小和位置不用在意)

接下来就是一步一步的操作了，先选中三个视图，然后点击Embed In Stack，将三个视图放入一个栈中

然后设置这个栈的参数(Aligment设置为fill，Distribution设置为fill equally，spacing设置为10)

这个时候就会发现这三个视图都有所调整，接下来就需要设置相应的约束，使autolayout能识别这三个视图组成的栈的对应位置。
在Stack上按下control键，并拖动鼠标指向View，这时就会有相应的提示框弹出来设置约束，我们这里选择如下三个参数:(Center Horizontally in Safe Area)设置x位置、(Center Vertically in Safe Area)设置y位置、(Equal Widths)设置宽。

我们添加了相应的约束后再进行相同操作，看看约束是否添加成功

可以看出，我们添加的约束前面会有一个白色的小点。我们也可以在右边的尺寸检查器中查看相应的约束。

做完上述操作之后，我们已经完成了对视图的x位置、y位置和宽度的设置，但autolayout不知道我们的视图的高度为多少。从开始的分析中，每一个单独的UIView都是一个正方形，所以他们的长宽需要相等。我们这里在三个UIView中的任意一个UIView上点击control并拖动鼠标左键到自己上，就会弹出相应的约束选择框。在这里我们选择Aspect Ratio尺寸比例。

然后在右边的尺寸检查器中编辑该约束，将比例设置为1:1，也就是使高度和宽度相等。

这样，我们就完成了这个自动布局，效果如下：

第二套布局

来看看第二套布局要求的效果：


我们来分析一下这套布局，首先最容易看出来的是中间的三个视图与上一套布局像，他们的长度相等，但他们的高度在横屏和竖屏情况下是一样的。然后是上面的两个视图，左边的视图与中间三个视图中最左边的那个宽度相等，高度填充满上半部分，右边的视图与中间三个视图中最右边的和中间的宽度只和及其中间的空余部分相等。最后是下面的两个视图，与上面的视图介乎一样，成一个镜像。

接下来就开始在storyboard中进行相应的布局。
这次布局需要用到7个UIView，现将其拖到界面中，并设置好相应的背景色。
首先是对中间三个视图进行布局，这与上一个布局几乎一致，先将是三个视图放入栈中，设置间隙和填充方式，然后添加约束，我们这里需要更改一下约束，相对于View的约束和Stack自身的约束选择如下：


我们这里需要编辑一下约束，设置高度为50，相对于View左边距为10(Leading Space to Safe Area)，相对于View右边距为-10(Trailing Space to Safe Area)

然后进行上半部分两个视图的操作。
选中两个视图，然后放入栈中，相应的参数更改如下：

再设置与View之间的约束、与中间三个视图组成的Stack之间的约束

并修改相应的约束值
与View的top之间的间隙为-10，底部与Stack View之间的间隙为10

这时发现还有约束不足错误

这是为什么呢？点进去看，提示是需要增加相应的x位置的提示，想想，我们在设置Stack View的属性值时，将Distribution设置为fill，这样并不能确定两个视图的宽度，而且布局也不满足要求，所以，这里需要给左边的视图与中间部分最左边视图之间添加一个等宽的约束

这样，上半部分的布局就做完了，运行一下看看效果

下半部分的具体步骤就留给各位读者自己模仿上半部分的完成，很简单的。

最后贴下最终的效果图吧！

总的来说，使用storyboard可以很快地搭建一个界面出来，如果能够熟练地使用storyboard并与代码布局相结合，可以非常迅速地完成一个界面优美、维护方便的App。