AutoLayout 是iOS6的新特性,很多人都选择不去使用,因为很多app都不需要支持旋转,而且设备的尺寸就那几个,很好判断,但是随着设备的尺寸不断增多,ios8推出了新方法 Size Classes彻底的解决了适应屏幕的问题。虽然Size Classes 是 iOS 8 的功能, 但是Xcode 6 对它做了一点向后兼容的处理,可以有限度地支持 iOS 7 等版本。但是 Size Classes 必须要与AutoLayout 配合使用才能达到真正想要的效果,所以先学习AutoLayout是很有必要的!
这篇博客只要介绍用storyborad来实现autoLayout, VFL来实现auto layou 以后也会说到
一、AutoLayout 介绍
Auto Layout 是一种自动布局,为什么说是自动布局呢,因为它和以往的布局方式不同(以前的方式按照 frame 来赋值),Auto Layout 是根据某一个view 和 另n(n >= 1)个view 的上,下,左,右的距离来定那一个view的位置的,想要使用 Auto Layout 必须摒弃老的frame 的观念,不然,你永远也搞不定 Auto Layout。
有一些人可能会说 Auto Layout 把界面弄得很乱,刚布置好,结果两个view 的距离又变了,那是因为你的约束没有设置好,没设置好,当然会有问题,所以就不要抱怨啦。
二、AutoLayout 使用
关于用VFL实现下述布局请看 AutoLayout 使用之代码实现(VFL)
(1)界面需求以及效果图
下面用一个简单地例子还实现autoLayout,使得我们的工程在不同尺寸的设备上界面不会乱,而且旋转也不会乱(此工程基于xcode6),先解说一下这个图,中间的模块是始终居中显示的,黄色和绿色的图是沿y轴中心(virtical center)的方向显示,并和背景View 的左边或者右边的大小值固定,“红”“橙”“蓝”“紫” 这四个图的约束关系为:和背景View的左边或右边的约束成固定值,离最近的上方或下方的View的成固定值:先看一下最后的效果图:
运行在3.5inch 的机子 和4.0英寸的机子:
运行在4.7英寸以及5.5英寸的机子
再看一个在4英寸上旋转的图:
大家可能觉得不好看,没关系。这个是约束的原因,适当修改约束他会变得好看的!如果怎么都修改都不好看,那没办法了,还是用代码动态改变吧!下面详细的介绍怎么实现这个过程的
(2)storyBoard中的各种约束介绍
下面只介绍和本例子有关的约束,但这些约束就是我们用得最多的约束!其他约束大家可以边练习边琢磨是什么。
下面的这些东西要选中某个View后才能选择!
1、有关于“中”的显示:
2、自己(self)
第一个框为离自己最近的View的距离,很常用!
假如有一个如下布局为:
这样的关系用简单的 方式表示为:[bottom] - [self] - [label],那么,离self 左边最近的View为 button , 离self右边最近的view为 lable,上图中的第一个框就是让你填选中的view(self)离最近的View的距离,如果self 的右边没有View , 那么,这个距离就是self 到 根视图(self.superView)的距离。
上图第二个框是给选中的View设置固定的宽度和高度,当添加好约束后,点击第三个框“Add Constranints”添加约束。
加好约束后,可以看到View Contraller Scence 处多了很多的约束
这些约束是可以修改和删除的,你可以直接点击某一个约束进行删除,或选中某个约束后在下图红框中修改:
(3)动手实现上例约束
首先,新建一个工程,因为xcode6的View都很大,而且在这里我们不介绍 Size Classes,只介绍autoLayout,不妨先将View的视图修改成4inch的视图,以及将 size Classes 在选项中”去勾“,如图:
”去勾“,将size classes的”勾“ 去掉
我们在这几个View中加上7个小视图,这几个视图的宽高都设置成65 ,调节各自的背景颜色,并按顺序摆放, 如图所示:
我们先看一下不添加任何约束用3.5inch 4.0inch 4.7inch 和5.5inch模拟器运行的图:
再看一下在4.0 inch 下旋转的图:
这显然不是我们想要的
Xcode6中加入了一个预览的好动西。当你在布局的时候,他可以随着你的布局让你预览效果,为了更好地看到自己布局是否准确,在我们布局的时候可以利用它,如图切换到预览模式:
当我们不添加任何约束时的预览图为:
点击下面的“+” 还可以查看不同尺寸的设备的预览图
现在我们先在每一个view加上长和宽的约束,使他不管在什么时候都为一个边长固定的正方形,以中间的view为例子,其他的一样加。
点击中间的View,为其添加长和宽的约束,如下图,其他的View一样加:
加好后你的预览图也变了:
点击View 可以看到那个View的下方多了一个长和宽的约束的约束,视图中的View多了两条橙色的线,这个线分别指向view的长和宽。橙色线出现代表你的约束不完全,表明你的约束太少,在不同的设备中你的View得不到一个满意的约束,你的View会随着设备的尺寸动起来,还需要继续添加。
我们用如上的方法添加剩余其他的view,使其长度和宽度都为65,效果图如下:
现在我们让中间的那一个View 居中显示,选择中间的view,如下图:
这边的“0” 指的是中间,些其他的数字会左右,上下移动,大家可以试试
添加好约束后,预览图也发生了变化:
我们看到,中间的view现在已经居中显示了,而且蓝色的线出现了(表示约束完全),只是有一个虚线框在我们视图的下面,这代表了我们在容器中布局的位置不对,应该将视图移动到虚线框中,这里我们先不管他,最后在修改,或不改也无妨。
现在我们来看黄色的View,我们想让他和中间的视图在一条水平线上(垂直居中),且它离容器左边的距离为一个固定值。现在我们选中它,如下图:
让他垂直居中,以及离根视图左边为 13,效果图如下:
让绿色的View 和黄色的View一样 垂直居中,以及离根视图右边的距离为13:
预览图如下:
下面我们来实现红色的view 和橙色的view 让他离下面的最近的view 的距离以及根视图的左边或右边的位置成固定值:
红色的View:
橙色的View:
看一下预览图:
我们在实现蓝色的View和 紫色的View 的约束,使得他们 和离得最近的上面的view 以及根视图形成一个约束
蓝色的view:
紫色的View:
效果图如下:
到这里,我们的约束就全部添加好了,最好来解决之前说过的位置不对的问题,大家会发现我们的工程莫名其妙的出现了很多的警告:
点进左边红框的警告区域:
点进里面小的警告,选择“Fix Misplacement”这样警告就会消失了,这个警告是告诉我们,我们在放视图的时候位置和我们的约束时的位置不一样。
点击后,视图的位置会改变,但是约束的位置不会变.运行程序,得到了和最上面一样的效果!
这个只是一个入门级别的,复杂一点的就拼拼凑凑就好了。
下一篇博客将介绍怎么用代码的形式(VLF)实现上述的布局,这种布局方式虽然不方便(要写),但是却能更好的添加!