第三章：介绍 Auto Layout

一时失言乱红尘 2022-08-05 08:54 173阅读 0赞

## 第三章 ：介绍 Auto Layout ##

`译者注：由于本人英语水平有限，尽可能描述出作者的本意。如有错误，及时指出。文中会省略部分技术无关的赘述`

“Life is short. Build stuff that matters.”
                                            – Siqi Chen

--------------------

![这里写图片描述][20150912014138421]

--------------------

### Auto Layout 简介 ###

![这里写图片描述][20150912014320234]

Hello World程序好玩儿吗 ？ 在我们做真正的app之前 ，我们先来看看**Auto Layout**

开始吧。

Auto Layout是一个基于约束的布局系统 。它允许开发人员创建自适应UI响应适当地改变的屏幕大小和设备方向。一些初学者觉得它很难学所以逃避使用它。相信我 ，只要你适应了他 ， AutoLayout 将会使你最好的工具之一 ，一个你在开发app的时候离不开的工具。

你也许会奇怪 ， 为什么我要讲Auto Layout 而不是直接将一个真正的项目呢 。 在Xcode 6 中 学习Auto Layout 是不可避免的 。我想要帮助你再布局用户界面上打下坚固的基础 。 随着iPhone 6 和 iPhone 6 Plus的发布 ，苹果的iPhone 也有多不同的尺寸 ，如果不适用Auto Layout , 将会很难创建一个app适应不同的屏幕分辨率 。 通过这章你将学会怎样在storyboard上使用Auto Layout 。

--------------------

### Auto Layout 是什么 ###

打开你的Hello World程序 ，把模拟器换成iPhone 4s 。

你得到的结果就像上图 ， 按钮不在中间了 。

再试试别的， 选择 Hardware— Rotate Left .模拟器编程横屏。这次按钮也不在中间

为什么 ？出了什么问题？

首先你必须明白 ， 5s 和 4s有不同的屏幕尺寸 。对5s来说 在竖屏模式下 320个点（640像素）X 568个点(1136像素 )。 4s是 320(640)X480（960）.

--------------------

### 为什么用点代替像素 ？ ###

回到2007年，苹果推出第一代iPhone采用了3.5英寸的显示屏，  
为320x480分辨率 。苹果在后面的iPhone 3G 和 iPhone 3GS 保留了这种屏幕分辨率 。在那时候1个点对应一个分辨率 。后来苹果引入iPhone 4采用了retina屏。屏幕采用640X960分辨率 。1个点对象2个像素 。

点系统使我们开发起来更轻松，不管屏幕分辨率从如何改变 。我们只处理基础分辨率 。点和像素之间的转换交给IOS去处理。

![这里写图片描述][20150912105644211]

不使用Auto Layout 的时候 ， 我们按钮在storyboard上得布局是固定的。换句话说我们采用hard-code的方式确定按钮的边框和位置 。在我们的例子中 ，俺就的origin 被设置为(120,269) . 因此不管你用3.5英寸还是4英寸的屏幕 ，按钮都回被画在那个特定的位置 。上图展示了按钮在不同屏幕下。这就解释了Hello World 按钮为什么不能在3.5英寸屏幕和横屏下正常显示 。

然而 ， 我们想要我们的app在任何屏幕上不管横屏竖屏都能够正常的显示 ， 这就是为什么我们要学习Auto Layout , 它使解决屏幕适配的一个解决方案 。

--------------------

### Auto Layout 的所有都跟约束有关 ###

就像前面提到的额， Auto Layout 是一个基于约束的布局系统 。允许开发人员创建的自适应UI响应适当地变化的屏幕尺寸与设备方向。听起来不错 ， 但是基于约束布局是什么意思呢？ 想象一些Hello World 按钮 ，如果你想把按钮放在view中间 你要怎样去描述它 。你也许会这样描述它：

不管屏幕的分辨率和方向 ， 按钮都必须水平和垂直居中 。

这块实际上你需要定义两个约束 ：

*  center horizontally (水平居中)
 *  center vertically (垂直居中)

这些约束表达按钮在界面上得布局规则 。Auto Layout 是基于约束的 。我们以单词的形式描述约束 ，Auto Layout 以数学表达式展示出来 。比如 ，如果你定义一个按钮的位置 ， 也许你想说 “左边缘要距离containing View 左边缘30个点 “，这句话可以转换位button.left = (container.left + 30). 这就是你所要知道的全部 ，幸运的是 ，我们并不需要去处理公式 。

我们看下怎样把按钮居中。

--------------------

### 使用Auto Layout让按钮居中 ###

Xcode 提供两种方式去使用 Auto Layout:

*  Auto Layout菜单
 *  Control-drag （不太会翻译 按住control键拖动？）

我们将会再这章节中演示这两种方式 。我们先试试Auto Layout 菜单 。打开 “Main.storyboard” ，Auto Layout 菜单在Interface Builder底下 。这些按钮都是针对Auto Layout的不同功能 。

![这里写图片描述][20150912112653148]

每个按钮都都自己的功能：

*  Align —— 创建对齐约束，比如对准两个views的最边缘
 *  Pin —— 定义空间约束， 如定义UI空间的宽度 。
 *  Issues ——解决布局问题
 *  Resizing —— 调整约束影响的布局

要把Hello World 按钮居中 ，你首先应该点击Align按钮 ，在弹出来的菜单中选择 “Vertical center in container” 和 “Horizontal center in container” , 然后点击 “Add 2 Constraints” 。

![这里写图片描述][20150912113638007]

你现在应该看到一组约束线 。如果约束线是蓝色的。那就说明你的布局配置的么有问题约束也没有歧义 。如果你想查看你的约束，你可以在右边窗口的尺寸检查器下查看。

![这里写图片描述][20150912115112181]

okay，现在你可以测试你的app了 ， 点击Run运行app，改变模拟器 ，iPhone 4 , iPhone 5 ,iPhone 6 上都可以显示正常了。

--------------------

### 解决布局问题 ###

![这里写图片描述][20150912115957768]

我们刚刚设置的布局约束很完美 。但是不是所有的布局都这么完美 ，Xcode足够智能可以检测到任何布局问题 。

像图中一样把按钮拖到左下角 ，Xcode立马检测到布局问题 ，并且把布局线变成橙色表示错位的项目 。

布局问题经常发生在你创建了一个含糊不清的或者冲突的约束 。这里我们制定按钮水平垂直居中 ，然而 ，现在按钮却在左下角。Xcode感觉到迷惑因此用橙色的线条来表明问题 。

不管出现任何布局问题，视图的文件框都会出现一个箭头（红色或者黄色） ，点击那个箭头会出现一个问题列表 。Xcode足够只能去解决这个问题 。点击指示器按钮 会弹出一个框显示一些解决方案。针对我们这个案例 ，选择”Update Frame” 然后点击”Fix Misplacement” ,按钮就会被移动到view中间 。

![这里写图片描述][20150912121236266]

不是所有布局问题都是这种问题 ， 我只是想掩饰怎样找到和修复问题 。当你建立一个使用自动布局你的UI无论是在自己的应用程序或  
通过演练工作，你将会知道如何轻松的解决问题。

--------------------

### 预览 storyboard ###

目前为止 ， 我们只是使用模拟器去测试UI的变化 。虽然Xcode内置的模拟器很强大 ， 但是这不是一个最好的测试UI改变的方案 。Xcode 6 提供了一个预览的功能 。

![这里写图片描述][20150912121906473]

在Interface Builder下 ，打开Assistant pop-up 菜单 ，如图。  
按住*shift+option* 不放，点击Main.storyboard 。你可以按照上图的步骤。

![这里写图片描述][20150912122307792]

系统会提示你选择在哪里显示预览。如图双击右边+按钮 。

Xcode将会在你编辑用户界面的旁边显示一个预览。默认显示iPhone 4屏幕 。你可以点击左下角的+添加别的屏幕 。如果你想看横屏， 点击屏幕下得rotate按钮。预览功能对你设计用户界面非常有用 。可以让你改变用户界面的同时看到预览效果 。而且还能节省加载程序的事件，当你只是想测试一个界面的改变。

![这里写图片描述][20150912123251099]

--------------------

### 添加一个Label ###

现在你已经对Auto Layout有一点了解了.我们尝试在右下角添加一个Label ，iPhone 5s比iPhone 4s高 ，当你在屏幕下方添加一些UI控件 ，需要一些调整去支不同的屏幕。

在Interface Builder 中 ，从对象库中拖一个Label放在右下角，如下图 。双击并改变它的文本 “Welcome to Auto Layout” 或者其他你喜欢的文本 。

![这里写图片描述][20150912123836927]

查看预览窗口 ， 在3.5英寸的屏幕中找不到这个label 。

我们需要设置两个约束让它显示正常 。

![这里写图片描述][20150912124047874]

我们将添加一个约束，使标签保持接近视图的底部。这次我么使用”Control-drag”d的方式去做。按住control 键不放 ，点击Label向下拖到到父视图 。然后都松开 ，这时候会弹出一个约束菜单选项 。选择”Bottom Space to Bottom Layout Guide” 来设置Lebel到试图控制器底部的约束 。这将会使Label和试图控制器底部保持一个固定的距离。这个约束一添加，Interface Builder就会显示出红色的约束线，表示有一些缺失的约束 。

解决Auto Layout问题 ，去试图文本框点击红色箭头，然后点击红色指示器 ，再点击”Add Missing constraints ”

![这里写图片描述][20150912125142519]

当你预览UI或者在模拟器上运行 ，这个Label将会在3.5英寸屏或者横屏上显示正常了。

--------------------

### Top and Bottom 布局指南 ###

你也许会疑惑Bottom Layout Guide是什么意思 ？ 一般来说 ，Bottom Layout Guide指的是试图的底部 ， 像示例中展示的那样。然而 ，还有其他情况 。有时候我们嵌入了一个Tab bar（后面章节学习 ），Bottom Layout Guide指的是Tab bar的顶部 。

对顶部而言 ，默认占了20个点（状态栏的高度），也有其他情况.如果试图包含一个Navigation Controller ， guide就会设置位navigation Bar的底部 。

如果你不太明白 ， 就在Interface Builder上点击”Top Layout Guide”或者”Bottom Layout Guide” ，Interface Builder 会蓝色线条展示guide线的高度

![这里写图片描述][20150912130710621]

--------------------

### 总结 ###

本章讲解了Auto Layout的基础 。后面会通过真实的app继续探索Auto Layout其他功能 。目前为止 ，我希望你对怎样布局你的app节目和适配所有屏幕有个大概的了解 。

很多初学者（甚至一些有经验的程序员）因为Auto Layout看起来比较困惑去躲避使用它 。如果你在读完本章后开始喜欢Auto Layout 的话， 你已经在成为一个优秀IOS程序员的路上了 。最开始苹果的屏幕只有3.5英寸 ，随着苹果的发展 ，以后的app将要适配越来越多的屏幕 。所以我建议学Auto Layout。

> 学习iOS，有他就够了，[小码哥视频，传智、黑马、各种swift书籍][swift]

[20150912014138421]: /images/20220731/d57adb6e43a440ed9fc348cb05cce637.png
[20150912014320234]: /images/20220731/4f1093ee8b0843e6b6f85c3bb0876564.png
[20150912105644211]: /images/20220731/253742cfd33d4b09ac9a43a84ce4454e.png
[20150912112653148]: /images/20220731/52d313d6d7cc4ac18c3c7c42e3cc88d6.png
[20150912113638007]: /images/20220731/86b05ec9065f4d3298eb3cbdd74a77c9.png
[20150912115112181]: /images/20220731/d0b3b548784246edab7a53674cbb6c7a.png
[20150912115957768]: /images/20220731/eb015b120bfa46d7bf33e93cb4eccaa8.png
[20150912121236266]: /images/20220731/287e66e2f3284bfdaeb216f3ec3b94af.png
[20150912121906473]: /images/20220731/d998bbbf2f564a48b8bf598c48659680.png
[20150912122307792]: /images/20220731/ddaf58931d0e4eecae4f666f26a96f05.png
[20150912123251099]: /images/20220731/d0b7a3f28ce04b8cbf148e21d4005aa5.png
[20150912123836927]: /images/20220731/65bd72d747cf4772a2ca6f3053e3b64f.png
[20150912124047874]: /images/20220731/a30bb687d7674dcab4b8d1bdc4875c25.png
[20150912125142519]: /images/20220731/b74041476eb24744ae376df3a11dff76.png
[20150912130710621]: /images/20220731/79e2d95efce7405fbdd8924cb9a3de0c.png
[swift]: https://item.taobao.com/item.htm?spm=a230r.1.14.85.JFN9U2&id=529819836478&ns=1&abbucket=7#detail