第一章 : 构建自适应用户界面

1.0

一开始，只有一部固定的3.5英寸显示屏的iPhone。设计你的应用程序很容易;你只需要考虑两个不同的方向(人像和方向)。之后，苹果发布了9.7英寸的iPad。如果你是当时的iOS开发者，你必须在Xcode中为一个应用程序创建两个不同的屏幕设计(比如故事板/ xib)，一个用于iPhone，另一个用于iPad。

美好的往昔已一去不复返。快进到2018年:苹果的iPhone和iPad系列发生了很大的变化。随着iPhone X的推出，你的应用程序需要支持各种屏幕尺寸和分辨率的设备，包括:

iPhone 4(3.5英寸)

iPhone 5/5c / 5 s(4英寸)

iPhone 6/6s / 7/8(4.7英寸)

iPhone 6/6s / 7/8 +(5.5英寸)

iPhone X(5.8英寸)

iPad(9.7英寸)

迷你iPad(7.9英寸)

iPad Pro(10.5/12.9英寸)

"

对于iOS开发人员来说，开发一款适用于所有屏幕尺寸和方向的通用应用是一个巨大的挑战。那么，如何设计像素级完美的应用程序呢?

从iOS 8开始，移动操作系统就有了一个新的概念，叫做适应性用户界面(Adaptive User interface)，这是苹果公司(Apple)用来支持iOS设备的任何尺寸显示或方向。现在应用可以根据特定的设备和设备定位调整他们的UI "

这导致了一个新的UI设计概念，称为适应性布局。从Xcode 7开始，开发工具允许开发人员构建一个应用程序UI，该UI可以使用Interface Builder适应所有不同的设备、屏幕大小和方向。从Xcode 8开始，界面构建器被进一步重新设计，以简化自适应用户界面的构建。它甚至还提供了一个完整的实时预览，显示了在任何iOS设备上的渲染效果。当我们检查新的接口构建器时你会明白我的意思"

要实现自适应布局，您需要使用一个名为Size类的概念，该概念在iOS 8或更高版本中都可以使用。这可能是使适应性布局成为可能的最重要的方面。Size类是根据屏幕大小和方向对设备进行分类的抽象。您可以同时使用size类和自动布局来设计自适应的用户界面。在iOS中，创建自适应布局的过程如下

     你首先要设计一个通用的布局。基本布局足以支持大多数屏幕大小和方向

您选择一个特定大小的类，并提供您的布局专门化。例如，当设备处于横向方向时，您希望增加两个标签之间的间隔。

在本章中，我将通过构建一个通用的应用程序，向您介绍所有的自适应概念，比如size类。该应用程序支持所有可用的屏幕大小和方向。

自适应用户界面 Demo

这个项目不需要编码。您将主要使用Storyboard来布局用户界面组件，并学习如何使用自动布局和size类来使UI具有适应性。读完这一章后，你会有一个应用程序，它只有一个视图控制器，可以适应多种屏幕大小和方向.

图1.1 自适应界面 demo

创建 Xcode 项目

首先 打开Xcode, 创建一个  Single View Application. 将项目命名为AdaptiveUIDemo,设备选项选择Universal.  项目创建后，进入项目设置，将project setting 从11.2设置为9.3(或更低)。这使得你可以在iPhone 4s上测试你的应用，因为iOS 10(或以上版本)不再支持3.5英寸的设备。你可能也不想支持旧一代的设备，但在这个demo中，我想演示如何为所有屏幕大小构建一个自适应UI.

打开 Main.storyboard, 在Interface Builder中，您应该找到一个与iPhone 8大小相同的视图控制器。接口构建器让您在模拟设备中展示用户界面，您可以使用底部栏中的设备配置控件在不同设备之间轻松切换。例如，选择View as打开设备配置窗格，然后选择iPhone 6s Plus。这会将storyboard中的ViewController的大小更改为所选设备.

1.2 Interface  Builder

创建之后, 现在开始设计 app UI , 点击这里下载 图片包, 导入到 Assets 里面.  回到storyBoard。我通常从iPhone 8(4.7英寸)开始设计用户界面，然后为其他屏幕尺寸添加布局专门化。因此，如果您选择了其他设备(如iPhone 8 Plus)，我建议您将设备设置改为iPhone 8. 

现在，将一个 image view从对象库拖到View Controller. 将宽度设为375，高度设为390。选择Image View 并转到属性检查器。将图像设置为tshirt，将模式设置为Aspect Fill. 

然后，将视图拖动到视图控制器，并将其放在图像视图的正下方。这个视图作为容器来保存其他UI组件，比如标签。通过将相关UI组件分组到同一个视图下，您将更容易在后面的部分中使用自动布局。在尺寸检查器中，请确保宽度为375，高度为277。

在整个章节中，我将把这个视图称为Product Info视图。您的布局应该与下图类似:

1.3 

接下来，拖拽标签到产品信息视图。将标签更改为PSD t恤模板。将字体设置为Avenir Next，大小设置为25点。按command+=调整标签大小，使其合适。在尺寸检查器中，将X的值更改为15，将Y更改为15。

拖动另一个标签，并将其放置在之前的标签下方. 在属性检查器中，将文本更改为这是一个免费的psd t恤模型，由pixeden.com提供。PSD有一个简单的t恤模型模板。你可以编辑t恤的颜色，并使用智能层应用你的设计。高分辨率使得特写镜头更容易捕捉到细节。然后将字体设置为Avenir。将字体大小更改为18点，行数更改为0.

在尺寸检查器下，将X的值更改为15,Y更改为58。设置宽度为352，高度为182。

注意，这两个标签应该放在Product Info视图中。您可以通过打开文档大纲进行双重检查。两个标签放在视图下。如果您正确地遵循了这些步骤，您的屏幕应该类似于以下内容:

1.4 简单 App UI 

具体细节特写镜头。然后将字体设置为Avenir。将字体大小更改为18个点，行数为0。

在尺寸检查器下，将X的值更改为15,Y更改为58。设置宽度为352，高度为182。

注意，这两个标签应该放在Product Info视图中。您可以通过打开文档大纲进行双重检查。两个标签放在视图下。如果您正确地遵循了这些步骤，您的屏幕应该类似如下:

图1.4。样例应用程序用户界面

即使您的设计与参考设计不完全匹配，也绝对没问题。稍后我们将使用自动布局约束来布局视图。

现在，这款应用的UI非常适合iPhone 8或4.7英寸的屏幕。让我们进行一个快速测试，检查不同设备上设计的外观和感觉。

在Xcode中，有两种方式实时预览app UI:

通过使用设备配置窗格

使用预览助手

1.5 打开 预览 助手

然后，Xcode将在助理编辑器中显示应用程序UI的预览。默认情况下，它向您显示所选的iOS设备的预览。您可以单击助理编辑器左下角的+按钮，获得iPhone 8 Plus和其他设备的预览。如果在助理编辑器中添加所有设备(包括iPad)，您的屏幕应该与下图所示的图像相似。正如你所看到的，目前的设计并不适合所有设备，除了iPhone 8。到目前为止，我们还没有定义任何自动布局约束。这就是为什么视图不适合所有设备的原因.

1.6 在不同设备上的 App UI 

添加自动布局约束

一些开发人员被自动布局的限制吓到了。我曾经以一种描述性的方式编写布局约束。以图像视图为例，这里是一些我可以想到的约束:

在图像视图和主视图的顶部、左右两侧之间不应该有间隔.

   图像视图占主视图的55-60%.

   图像视图之间没有间隔，Product Info视图应该为零.

如果你把上述的限制因素转换成自动布局的限制因素，它们就会变成这样:

为图像视图的顶部、前缘(即左)和尾部(即右)边缘创建间距约束。将空间设置为0。

定义图像视图与主视图之间的高度约束，将约束的乘数设置为0.585。(我事先计算过这个值，但任何在0.55到0.6之间的值都可以.)

在图像视图和产品信息视图之间创建一个间距约束，并将其值设置为0.

现在选择图像视图，点击自动布局菜单上的大头针按钮来创建间距限制。对于左边、上面和右边，将值设置为0。确保  Contrain to margin  未选中，因为我们希望设置相对于超视图的边缘的约束。然后单击Add 3 constraints按钮.

1.7

接下来,打开文档大纲。控件-拖动图像视图(tshirt)到主视图。当提示时，从弹出菜单中选择 Equal Heights.

1.8 

一旦您添加了等高约束，约束应该出现在文档大纲的约束部分。选择约束并转到Size检查器。在这里，您可以编辑约束的值以更改其定义。

1.9 

在继续之前，确保第一件衣服是t恤。高度和第二项设置为Superview.height。如果没有，您可以单击第一项的选择框并选择反向第一项和第二项。

默认情况下，乘数的值被设置为1，这意味着tshirt图像视图占了主视图的100%(这里，主视图是父视图)。如前所述，图像视图应该只占主视图的60%左右。把乘数从1变为0.585接下来，选择“产品信息”视图，点击“Pin”按钮。选择左边、右边和底部，并将值设置为0。确保 Contrain to margin 未选中。然后单击Add 3 constraints按钮。这将为Product Info视图添加三个间隔约束.

1.10

此外，我们还必须在图像视图和产品信息视图之间定义一个间距限制。在文档大纲中，控件从图像视图(tshirt)拖到产品信息视图。提示时，从菜单中选择垂直间距。

这创建一个垂直间距限制，以便在图像视图的底部和产品信息视图的顶部之间没有间隔.

1.11

如果查看在其他设备上呈现的视图，图像视图现在应该适合所有设备;然而，标签还有很多工作要做。

现在，让我们定义两个标签的必要约束。

选择标题标签，标题标签的字体较大。单击销按钮。将顶部的值设为15，左侧设为15，右侧设为15。同样，请确保取消选中 Constrain to margin ，并单击Add 3 Contrains. 

1.12 定义 title label 的约束 

接下来，选择另一个标签。同样，我们将为顶部、左侧、右侧和底部添加三个空间约束。点击大头针按钮，添加相应的约束。

1.13 为描述标签添加间隔约束

一旦添加了约束，您就会看到一些红色的约束线，表明一些布局问题。当某些约束不明确时，会出现自动布局问题。要解决这些问题，请打开文档大纲并单击红色的披露箭头以查看问题列表。

1.14 

Xcode足够聪明，可以为我们解决这些问题。只需单击指示符图标，弹出窗口将显示可能的解决方案。当提示时，单击Change Priority以解决这些问题. 

1.15

有时，你可能会看到黄色的指示灯。这表明视图有一些放错位置。同样，通过更新框架以匹配约束，你可以让接口构建器为你解决问题

1.16

OK , 创建完成! 

注意:在Xcode 9中，接口构建器和预览助手仍然是错误的。有时，实时预览中呈现的UI与实际设备或模拟器上显示的UI并不完全相同。因此，如果您发现任何问题，运行项目并在模拟器中执行应用程序。

1.17 添加完约束的 UI 

现在的视图看起来好多了，图像视图完美地显示和对齐。然而，仍有几个问题:

    1 . 描述标签垂直地集中在屏幕更大的设备上。我们希望它显示在标题标签下面。

    2 . 一些iPhone型号的标题和描述标签部分显示。

让我们来看看第一个问题。你记得我们为描述标签定义了几个垂直空间限制吗?约束说描述标签应该离标题标签8点，离超视图底部15点(参见图1.13)。为了满足这些限制，iOS不得不在更大的屏幕上扩展description标签。因此，描述保持垂直居中。

内容拥抱优先

让我绕过去问你一个问题。为什么iOS不扩展标题标签而不是描述标签呢? 请看图1.18。实际上iOS有两个选项可以呈现满足布局约束的UI。iOS是如何做出这种选择的?

1.18 在屏幕更大的设备上呈现标题和描述标签的两个选项

如果您选择description标签并进入Size检查器，您应该注意到包含优先级(垂直)的内容被设置为250。现在选择标题标签并检查其内容拥抱优先级。您应该注意到它被设置为251。换句话说，与描述标签相比，它具有更高的内容拥抱优先级(垂直轴)。

内容拥抱优先级的价值帮助iOS确定了它应该放大的视图。具有更高拥抱优先级的观点可以抵制增长超过其本身的规模

在这里，标题标签有更高的拥抱优先级。这就是为什么iOS选择让描述标签更大，而描述标签的大小没有改变。

编辑约束关系。

现在您应该对包含内容的优先级有了基本的了解，让我们继续解决我们发现的第一个问题。

您可以始终查看特定组件在大小检查器下的约束。选择description标签并进入Size检查器。您将在约束部分中找到约束列表。

1.19

我们为标签定义了四个间距限制。如果你看一下约束条件，它们每个都有一个相等的关系。这意味着在呈现描述标签时，标签的每一面都应该有与我们在约束中指定的完全相同的空间。空间不能大也不能小。

那么，我们如何修改约束，使description标签置于title标签之下，而不考虑屏幕大小呢?

我想你可能知道答案。与其严格地将约束关系设置为相等，底层空间约束应该具有更大的灵活性。空间不需要等于15点。这就是我们想要的最小空间。这个空间实际上可以随着屏幕尺寸的增大而增大。

现在双击底部空间约束来编辑它。把关系从等于变成大于或等于。一旦做出改变，空间问题就应该得到解决。

1.20

好了，现在我们来看看第二个布局问题:

一些iPhone型号的标题和描述标签部分显示。

这个问题很容易解决。我们可以让iOS自动缩小屏幕尺寸较小的设备的字体大小。选择标题标签并进入属性检查器。设置自动收缩选项的值，使字体大小最小化。对描述标签重复相同的步骤。

就是这样。如果您在iPhone SE上预览UI或在这些设备上执行项目，两个标签都会正确显示。

Size 类 

正如我在本章开头提到的，设计自适应UI是一个由两部分组成的过程。到目前为止，我们已经创建了通用布局。基本布局足以支持大多数屏幕大小。流程的第二部分是使用size类来微调设计。

 首先，什么是尺寸类? 

size类标识垂直(高度)和水平(宽度)尺寸的相对显示空间。iOS中有两种类型的size类:regular和compact。

常规大小类表示大量的屏幕空间，而紧凑大小类表示较少的屏幕空间。

通过使用一个size类来描述每个显示维度，这将导致四个抽象的设备:规则的宽度规则高度、规则的宽度紧凑的高度、紧凑的宽度规则高度和紧凑的宽度紧凑的高度。

下表显示了iOS设备及其相应的大小类。

1.21

要描述显示环境的特征，必须同时指定水平大小类和垂直大小类。例如，iPad有一个常规的水平(宽度)大小类和一个常规的垂直(高度)大小类。

有了基本布局，您可以使用size类来提供布局专门化，这些专门化可以覆盖基本布局中的一些设计。

例如，您可以为采用紧凑的高规整宽度大小的设备更改标签的字体大小。或者你可以改变按钮的位置，特别是常规尺寸。

注意，所有的iphone都有一个紧凑的宽度和一个固定的高度。换句话说，你的UI在iPhone SE上的表现几乎和iPhone 8一样。

iPhone 6/7/8 Plus，在景观方向上，有一个规则的宽度和紧凑的高度。这允许你创建一个完全不同于iPhone 8(或更低)的UI设计

使用Size 类来定制字体

通过对size类的一些基本了解，让我们看看如何使用它来应用布局专门化。

不用说，我们想让标题和描述标签成为完美的iphone。目前的字体尺寸对iphone来说很理想，但对iPad来说太小了。我们要做的是让字体更大一点.

通过使用size类，您现在可以针对特定的屏幕大小调整字体样式。在本例中，我们希望更改所有iPad型号的字体大小。就尺寸类而言，iPad设备默认为水平(宽度)的常规尺寸类，垂直(高度)的常规尺寸类。

要为这个特定的size类设置字体大小，请切换到Interface Builder中的iPad设备，并选择标题标签。在属性检查器下，应该会看到字体字段旁边有一个+(+)按钮。单击+按钮。将宽度和高度设置为常规，然后单击Add Variation。

然后，您将看到字体选项的一个新条目，它专门用于那个特定的size类。保持原始字体选项的大小不变，但是将wR hR字体字段的大小更改为35点.

1.22

这将指导iOS在iPad上使用字体较大的第二种字体。对于iPhone设备，原始字体仍将用于显示文本。现在选择description标签。再次，在属性检查器下，单击+按钮并单击Add variable。将wR hR字体字段的大小更改为25点。在模拟器中查看预览或测试应用程序。所有屏幕尺寸的布局都很完美.

1.23

使用Size类来定制视图

既然UI可以完美地适应所有设备的纵向布局，那么它们在横向布局上是如何表现的呢?在预览助手中，点击设备上的旋转按钮(例如iPhone 4英寸)。或者你可以使用模拟器查看景观模式中的UI。这个视图看起来不错，但是我认为有更好的方法在横向布局中显示UI。

1.24

我将向您展示如何为视图创建另一个设计，以利用更大的屏幕尺寸。这就是size类的真正力量。

屏幕尺寸较宽但较短，最好将图像视图和产品信息视图并排显示;每一个都占主视图的50%。这个屏幕显示了iPhone景观的最终视图设计。

1.25

那么我们如何使用size类来创建两个不同的ui呢?目前，我们只有一组应用于所有大小类的自动布局约束。为了创建两个不同的ui，我们必须为每个ui使用两组不同的布局约束:

        对于iPad和iPhone(竖屏)，我们利用现有的布局和布局约束。

        对于iPhone(横向)，我们重新布局UI并定义一组新的布局约束

首先，我们必须将现有的布局约束移动到size类中，以便当设备是面向竖向方向的iPad或iPhone时激活这些约束。”在设备配置面板中，您应该会发现特性按钮的不同，这是为创建用户界面变化而设计的。当您单击按钮时，弹出窗口将显示两个选项供您选择。在本例中，选择height并单击接口构建器中的任何位置。设备配置窗格变为蓝色，并显示我们刚才选择的size类的受影响设备。如果你点击变化的26个常规高度设备选项，它将显示所有受影响的设备，包括iPad和iPhone(竖屏)。

1.26

在变体模式中，您对画布所做的任何更改将只适用于当前变体(或size类)。因为我们希望将所有现有的约束迁移到此变体中。在document outline视图中选择所有约束(保存命令键并选择每个约束)。接下来，转到Size检查器，单击+按钮(安装选项旁边)创建一个变体。

1.27

接口构建器然后向您显示常规高度类的已安装复选框。因为所有现有的约束应该只应用于这个size类。取消“已安装”复选框，并选中“hR已安装”复选框。这意味着为iPad和iPhone(竖屏)设备激活所有选定的约束。最后，单击Done vary完成更改。

1.28

“你怎么知道这些约束只适用于普通高度设备?”在设备配置窗格中，可以将iPhone的方向更改为横向。您应该会发现，横向中的UI不再被正确地呈现。所有的约束都是灰色的，这意味着它们不属于这个大小类。

1.29

现在是时候重新设计以景观为导向的应用程序布局，并定义一组单独的布局约束。”

确保在设备配置栏中选择iPhone 8设备和横向定位。再一次，单击Vary for Traits按钮。在弹出窗口中，选择Height为所有iPhone设备在横向模式下创建一个变体。

1.30

从现在开始，你要做的所有更改将只适用于所选的size类(即紧凑宽度和紧凑高度).

首先，选择t恤图片视图。在尺寸检查器中，设x为0,y为0，宽度为333，高度为375。在属性检查器中，请确保已启用“剪辑到边界”选项。

接下来，选择包含标题和描述标签的视图。转到尺寸检查器，将x设置为333,y设置为0，宽度设置为334，高度设置为375。

最后，调整标题和描述标签以使它们合适。这里我把两个标签的宽度都改成了303点。您的布局应该类似于图1.31。

1.31

到目前为止，我们还没有为这个size类定义任何布局约束。现在选择t恤图片视图，点击Pin按钮。为顶部、底部和左侧添加三个空间约束。

1.32

接下来，选择视图，为顶部、左侧和右侧添加三个空间约束

1.33

由于我们希望两种视图都占到屏幕的50%，控制拖拽从t恤图像视图到容器视图。当弹出窗口出现时，选择相等的宽度来添加约束

1.34

其余部分是添加标题和描述标签的布局约束。选择标题标签并单击Pin按钮。添加顶部、底部、左边和右边的空间约束(参见图1.35)。然后，为description标签添加两个空间约束(左边和右边).

1.35

现在，确保您单击Done vary来保存更改。最终的布局类似于图1.36

1.36

如果您更接近文档大纲视图中的约束，您应该会看到一些约束被启用，而一些则被灰色显示。这些正常颜色的约束在当前size类中应用。在本例中，它是紧凑宽度和紧凑高度大小类。如果切换到竖屏模式，您将看到启用了一组不同的约束.

这就是如何使用Size类来应用不同的布局约束集，并在Interface Builder中列出两个不同的ui。如果您使用任何一个iPhone模拟器运行该应用程序，您将看到“两个不同的用户界面，用于纵向和横向定位。”另一件很棒的事情是，当视图从竖屏切换到横屏时，iOS呈现了一个平滑的过渡。看起来非常棒，对吧?

1.37

使用Size类自定义约束

希望您现在了解了如何使用size类来定制字体和针对特定size类组合的视图设计。在这些定制之上，您可以使用size类来定制特定的约束。

如果你想要将iPhone 6/7/8 Plus的视图设计更改为这个视图，而将其他iPhone的视图设计保持不变，该怎么办?

1.38

如您所见，标题和描述已经移动到视图的右下角。显然，我们必须定制标题标签与其父视图之间的顶部间距约束。

让我们看看怎么做。

首先，将设备更改为iPhone 8 Plus，并在设备配置窗格中设置横向定位。当我们想在这个特定的方向上应用这个设备的布局专门化时，请单击“特性”按钮的“变化”，并选择“高度”和“宽度”选项。接口构建器应该表明，更改只适用于常规宽度和紧凑高度设备。接下来，为标题标签的顶部选择垂直空间约束。在属性检查器中，您应该看到常量字段。值以点为单位定义垂直空间。当我们想要为这个特定的size类增加这个值时，单击+按钮并确认添加变体.

1.39

这将为wR hC大小类创建一个附加字段。将值设置为150点。就是这样。记住单击Done variable按钮来保存更改.

1.40

你可以在界面建设者或使用模拟器预览新的UI设计。在5.5英寸的iPhone上，新UI将在设备朝向横向时出现。

总结:

通过接口构建器，苹果为开发人员提供了在iOS应用程序中构建自适应ui的强大工具。我希望您已经理解size类的概念，并知道如何使用它们创建自适应的布局。

自ios8以来，适应性布局是最重要的概念之一。开发人员只能设计一个设备和屏幕大小的日子已经一去不复返了。如果你打算构建你的下一个应用，请确保你掌握了size类和自动布局的概念，并使你的应用适应多种屏幕大小和方向。应用程序设计的未来很可能是适应性的。所以，做好准备吧!

 可以在 这里 下载原作者 的 Xcode 项目...