HOME/Articles/

autolayout

Article Outline

Product Design: 产品的起点 - AutoLayout

什么是 AutoLayout

iPhone 5 开始,iPhone 有了更多的尺寸,使用代码针对不同的设备布局变成了一件不可能完成的任务,更何况你还要处理屏幕的横屏和竖屏模式。

其难度你可以参考下图

ios_devices

图 DevsBuildIt

从 iOS 9 开始,iPad 有了分屏模式 (Multitasking),这又使得界面可能存在多种分屏大小。

ios_devices

AutoLayout 技术正是为了解决这些问题而生,而且这个技术也非常的简单优雅,通过约束绑定的方式,来应对界面的变化。

居中约束

我们从处理三个可爱的猫咪的问题开始 AutoLayout 的学习。

新建一个Project。我们的起始项目可以从 GitHub 的AutoLayout/Meow_0获得,3只猫咪的图片我已经添加到Images里(在Xcode里添加图片非常简单,拖曳到Images.xcassets里面即可)

cat

第一个任务是,让这只猫咪显示在屏幕中间

打开 Project,三只猫咪的图片我已经帮你添加到 Images 里面里(在 Xcode 里添加图片非常简单,拖拽到 Images.xcassets 里面即可)

meow

点击左边的 Main.Storyboard 进入故事板,点击右上角的第一个像铜钱一样 Library 按钮

meow

在弹出的搜索框输入 imageview 搜索到 UIImageview 这个控件,它可以用来显示图片

meow

按住左键拖入 ViewController 里面,然后点击右边的尺子 (Size Inspector) 图标,将 Width 和 Height 都改成 100

meow

接着点击尺子左边的箭头 (Attributes Inspector) 图标,在 Image 里面输入 cat_cart 我们的猫咪就显示出来了

meow

截图左上角有个 Kevin 的 iPhone 按钮,点这里选择 Resizable iPhone(在最新版的 Xcode 中此模拟器已被去掉,我们可以在 iPhone6,iPhone5 这两个模拟器之间切换来测试不同尺寸下的表现。),按下播放键或者键盘的 Command + R 运行——

meow

然而,猫咪并没有像我们摆放的那样显示在屏幕中间……这是因为我们还没有添加任何约束,立刻回到 Xcode 解决这个问题,选中猫咪后,点击右下角的 Align 按钮

meow

勾选 Horizontal Center in Container 和 Vertical Center in Container,确保后面的偏移数字是 0,点击 Add 2 Constraints 确认添加。

这里我们就用到了 Constraints 这个东西,也就是约束,而约定的就是物体横向和纵向都显示在他的容器中心。

meow

你会看到猫咪被一个十字格子标注了起来,并且出现了两层虚线。虚线的意思是当运行的时候,图片的大小会改变,并不是你现在看到的这个大小,这是一个不正确的放置 (Misplacement)。

而在 View Controller Scene 的右边,也出现了个黄色的箭头。你可以通过点击这个箭头来进入 Misplacement 的处理界面。

meow

在这个界面里,点击黄色的叹号,选择 Update Frame,再点击 Fix Mispalcement 就可以自动修正错误。

重新运行程序,此时猫咪已经居中显示了。

meow

你可以通过修改左下角的 Width Height 来更改屏幕的大小,点击 Apply 来生效。通过这种方式你可以测试在不通的尺寸下是否依旧正常。

meow

除此之外,你也可以通过点击菜单栏的 Hardware 中的 Roate 来旋转屏幕,测试在横屏模式时是不是正常。

meow

我选择了 Rotate Left,截图证明表现的不错。

meow

本节代码可从GitHub(https://github.com/ProducterTips/producter-book-examples)的AutoLayout/Meow_1文件夹获得。

位置约束

现在坐在篮子里的猫咪有了一个追随者,它要呆在这支蓝色猫咪的下面。加入新的 UIImageView 放置在蓝色猫咪的下面。

meow

此时你运行下,会发现灰色猫咪并不在蓝色猫咪的下面。

meow

如何约束这支灰色的猫咪在蓝色的猫咪下面呢?在左边的 Scene 里面,按住 Control 键左键点击 cat_eyes 然后拖拽到 cat_cart 上 (注意拖拽顺序会影响约束的行为)

meow

这时候就会弹出一个灰色的菜单,让你选择约束类型,选择 Vertical Spacing 垂直距离。

meow

这样就约束了灰色猫咪在蓝色猫咪的下面。此时如果你点击灰色猫咪,你会发现有个黄色的线框标注在了左边。

meow

它的意思是告诉你,这是一个 Misplacement,当你运行的时候,猫咪会显示在左边。这是因为我们只约束了灰色在蓝色的下面,没有约束左右的位置。

按照刚才的方式拖拽,再添加一个约束 Center X,居中对齐 X 坐标。

meow

再次运行 App,就会发现表现已然完美。

meow

第三者小黄加入了,我们的任务是让它他的位置总是在左上角,那么就是距离其容器的左端和顶端都是 0 。

meow

选中小黄,点击右下角的 Pin 在 Add New Constraints 的上边和左边都输入 0,仔细观察你会发现这两个输入框旁边都有一个红色的横杠,代表数值生效。

meow

接着点击 Add 2 Constraints 来添加这两个约束。

再次运行,小黄就乖乖呆在左上角不会打扰下面的两位了。

meow

横屏模式检查下,是不是依旧按照我们的预期呆在左上角。

meow

嗯,完美!你可以在 这里 获得本节的完成代码。

比例约束

除了以上两种约束外,你还会遇到下图这种需求,在屏幕横竖不同的情况下,文字保持了间距一致,到屏幕的边距一致,文字的宽度自动调整。

meow

meow

我们删掉之前的猫咪,使用 UITextView 来创建这两个文本框。

meow

从 Library 中拖入两个 UITextView 调整成下图的样子。

meow

先对左边的 TextView 进行约束,增加一个到左边距为 20 的约束。

meow

接着对右边的文本框进行一个约束,增加一个到右边距为 20 的约束。

meow

然后对这两个文本框进行宽度的关系约束,按住 Control 左键按住从任意一个文本框拖到另外一个上面,选择 Equal Widths,这个约束使得他们宽度始终相等。

meow

继续约束,让左边的 UITextView 垂直居中

meow

右边的 UITextView 应该是和左边的保持垂直 Y 坐标对齐,所以增加一个 Center Y,并且两者的水平间距应该是固定的,因此,,按住 Control,从任意一个文本框拖到另外一个上面同时增加一个 Horizontal Spacing 的约束。

meow

接着我们需要约束左边第一个Text View的中心位置,如图9-36所示,选择Vertically in Container(垂直居中)。

meow

最后,我们需要对两个Text View进行高度约束,如图9-37所示,在 Height 参数上打勾,这样布局引擎才能确定它们的中心点在什么地方。

meow

终于约束完毕,此刻运行 App,旋转屏幕,你就能看到在最开始我们想要实现的效果了。

本节代码可从GitHub(https://github.com/ProducterTips/producter-book-examples)的AutoLayout/TextView文件夹获得。

##深入学习 AutoLayout

AutoLayout Guide