上一篇讲了一大堆基础知识，现在就开始讲一下AutoLayout的实际应用（本专题页查找《一稿适配所有iOS设备——AutoLayout入门》）。接下来我们要用Xcode做一个典型的登录页面，这个页面会用到我在上一篇里讲过的三种布局方式，完成以后是一个真实的登录界面，换句话说，这是一个真实的iOS App，只是这个App只有一个不能登录的登录界面。

看完这篇文章后你会大概了解你的设计是如何实现的，并且能自己制作出简单的页面来。顺便声明一下，本文的讨论范围仅限于iOS开发，并且只讨论AutoLayout的布局方式，想了解更多布局的基础知识的可以看我上一篇文章，未做特殊说明的不带单位的尺寸默认单位都为point。

下面正式开始，这个就是我们要做的登录界面。

首先你需要有一个Mac电脑，并且要安装了Xcode，你可以直接在Mac App Store 里下载，这是免费的。Xcode 是苹果给开发者提供的开发软件，我们平时用的iOS App 就是这里开发出来的，事实上几乎所有苹果设备上的软件都是用Xcode开发的，包括Mac ，Apple Watch上的软件。Xcode是一个强大的开发工具，有很多功能，我在这里只是大致介绍一下本文需要用到的功能，更多内容可以点击这里：http://help.apple.com/xcode/mac/8.0/

创建你的第一个Xcode项目

安装好后打开Xcode 创建你的第一个项目吧。

打开后选择 Create a new Xcode project  —> 出现默认选中的Single View Application，直接点next —>  给你的App取个名字，点击next  —>  选择保存地址 就可以了。这就是打开后你看到的界面 ：

用过Sketch的人可能会比较熟悉上面这个界面的结构。

首先看左边栏，这个可以理解为导航栏，在这里我们可以选择打开不同的文件。本文中我们需要用到的是两个，一个是Main.storyboard ，这个是让我们来布局界面的画布，还有一个是Assets.xcassets ，这个是让我们放素材的地方，我们可以把切图导入到这里，供后续使用。

右边栏大概可以理解为属性栏，里面的内容会根据你选中的东西不同而变化，显示出相应的内容。

首先我们要导出需要的素材。我导出的是@1x ，@2x，@3x 三种倍率的，如果你的命名符合规范的话（后缀为@1x ，@2x，@3x），Xcode能自动识别倍率。我们也可以导入一张PDF，Xcode会自己生成不同倍率的图（具体做法在这里不说了，有兴趣的可以自己研究下）。

需要说明一下的是我的登录按钮切图并不是一个长的按钮，而只截了一段，因为这个按钮长度会根据屏幕宽度调整，而不是固定的，接下来我们会在Xcode里处理一下，让这个切图在宽度方向能自由伸缩，但又不让图片失真变形。

导入切图

先选中Assets.xcassets ， 将我们导出的切图拖到里面。

如果你的命名是符合规范的，那么Xcode已经将你的切图自动识别到对应的倍率框里面去了

然后我们处理一下之前说的那个登陆按钮。选择顶部的菜单中的Editor —> Show Slicing

这时候你会发现你的切图预览变成这样了：

点击Start Slicing 接着再点击 Slice Horizontally 的图标既可以了。想了解细节的可以看这里：https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/SlicinganImage.html

Tips：有些由简单色块组成的图片，如背景，按钮背景等切图并不需要切出一张完整的图片。

开始布局

处理完素材以后我们就可以正式开始了。在导航栏里选择Main.storyboard，你会看到页面的中间出现了一个叫View Controller正方形的画布。

看一下登录界面的页面构成，我用红字标的是我们等下需要用到的控件，我们可以在iOS的控件库里面找到这些控件，直接将它们拖到我们的画布上去。

最上面是一个Navigation Bar  这是iOS系统的自带的，并不需要我们自己来做，我们只需要把Navigation Bar调出来就行了。

调出Navigation bar

首先我们先选中View Controller，选择顶部菜单栏中的Editor中的Embed in Navigation Controller ，这样我们的View Controller上就会出现Navigation Bar 了。

这时候我们能看到之前的View Controller 上已经出现了一个Navigation bar ，双击中间就能直接输入标题，字体大小都是默认的，一般都是使用默认字号。

接下来就要放Navgation Bar 上的两个按钮了，同样，这两个也是使用系统默认的按钮，位置和大小都是默认的，我们只需要从系统的控件库里拖两个按钮放上去就行了。Xcode右下角区域的就是iOS的控件库，我们平时用的控件都能在这里找到，你也可以在下面的搜索框中直接输入你想要的控件进行快速查找。这里我们需要的是 Bar Button Item ，找到后直接拖出来放到我们的Navigation Bar 上就行了。

放上去以后同样是双击就可以直接输入，我们改好按钮的标题，这时候发现默认的按钮是蓝色的，我们设计中的按钮是绿色的。iOS的系统控件都会给我们提供一部分自定义的空间，我们只需要选中相应控件，就会在右边栏的Attributes inspector上出现相应控件的属性，可以看到右边栏中出现了一个 Tint 的属性，我们可以在这里修改颜色。

Tips：建议大家去看一下这个控件库里面的东西，了解各个控件的用处和它们的属性，这会对你的设计有很大的帮助。

修改背景色

我们可以直接点击相应控件来选择，也可以在画布边上的层级里选择，这里能看到所有的控件，如果我们点击View Controller中间的空白位置，就能看到有一个View被选中了，这是系统默认加上去的，可以把它理解为背景。选中这个View 后我们就能在右侧的属性栏中修改它的背景颜色了。我们需要把它的 Background 改为灰色就行。

给出适配策略

这些都改好以后，接下来就是用AutoLayout 布局的时候了，先分析一下我们要做的页面的布局：

第一个是最上面的Logo ，这是一张图片，我希望它一直保持图片的原始大小，不随着屏幕缩放，防止图片变虚。所以我希望它的大小是固定的，宽度方向对应上个例里的B。

第二个是输入框和按钮区域，我希望他们的宽度能和屏幕一起缩放，所以宽度方向对应A。

第三个是三个第三方登录的按钮，我要求他们之间的间隙能随着屏幕的变化而变化，充分利用屏幕空间，也就是宽度方向对应C。

定位图片

首先从控件库里面拖出一个Image View 到画布上去，在左侧的Attributes inspector 上的Image选框中选择我们之前导入的logo。

接下来就到了添加约束的时候了，最常用的是右下角的四个按钮，这次会用到后三个。

先介绍一下第一种添加约束的方法：Pin。选中Logo，点击Pin按钮，会出现一个Add New Constraints的Popup（如下图），这个就是我们来添加约束的地方。上部分用来定义当前选中的视图和附近的视图的上下左右的距离，点击三角形下拉框可以看它附近的视图有哪些，有多个的话和可以自己选择，默认是离它最近的那个。点击红色的虚线约束线，变实线后表明添加了相应约束。下面可以设置宽度和高度，你也可以让它固定长宽比(Aspetc Ratio)，这样就算单向拉伸时你的图片也不会变形。如果你一起选择了多个视图，你可以让他们等高或等宽，还可以进行对齐。

这里先给Logo添加一个顶部的约束，距离顶部的Navigation Bar  30，勾选上宽度和高度且分别为：173，59 （如上如所示）。实际上Xcode能识别的图片的大小，如果不加高度和宽度的约束就显示图片原始大小，这里我为了演示加上了图片原始的高度和宽度。添加完成后点击底部 Add 3 Constraints 按钮后就把这些约束给加上了。点击这个按钮后我们会发现我们的Logo边上出现了约束线，但是是红色的。

当约束线是红色时，就表明我们添加的约束还有问题。可以看到，在上图左上角有一个红色的箭头，这就报错，点击后能看到具体的报错信息：

Need constraints for ：X position

这条信息提示我们没有给出X方向的位置信息。我们要求这个图是居中的，所以要添加一个水平方向的居中的约束就可以了。这时候就要用到第二种添加约束的方法了：点击Align按钮也会出现一个Popup，我们在这里进行各种对齐操作。勾选Horizontally in Container，点击Add 1 Constraint后就行了。

添加上这个约束后能发现红色的线不见了，变成了黄线，还出现了一个黄色的虚线框。这个虚线框表示这是Xcode 通过我们给的约束推断出来的位置。我们需要Update Frame,让这个logo跑到它该待的位置。

点击Resolve AutoLayout Issues 按钮，在出现的Popup里选择第一个Update Frames。

Update完成后我们看到Logo 已经跑到正确的位置去了，这时候所有的约束线都变成了蓝色。蓝色的约束线就代表Xcode能通过现在所加的约束可推断出页面的布局。

定位输入框和登录按钮

接下来就开始定位输入框，同样先从控件库里面拖出一个TextField来，在placeholder 里输入提示文字。顺便提一句，TextField的属性里有一个Keyboard Type 选框，在这里我们可以选择该输入框对应的输入键盘。如果你的用户名都是手机号，那么就应该在这里选择数字键盘。

Tips：在iOS系统里，你可以给每个输入框都指定相应的键盘。当你在设计输入框时可以说明它使用的是哪种键盘，如只能输入数字的输入框弹出的就因该是数字键盘。

接下来同样是用Pin按钮来添加约束。要求它离上面的Logo 为30 ，输入框高度为45，宽度随着屏幕伸缩，屏幕两边各留15的边距（margin）。需要注意的是这里要取消勾选 Constrain to margins 选项。我们设置的margin是15，而苹果默认也会有一个margin，当这个选项勾上以后，默认的margin也会算在里面，我们的margin是自定义的，不需要使用默认的，所以这里要取消勾选。

添加完成后Update一下，就能看到预期的效果了。我们可以用同样的方式定位好第二个密码输入框，但是，这里我们要用另一种方式来添加约束，也是第三种常用的添加约束的方法。这次我们要以第一个输入框为基础来定义第二个输入框。让第二个输入框和第一个一样高，同时首尾对齐。这样做的好处就是如果我们下次要修改，如修改高度，那么我们只要改第一个，第二个也会跟着变化，而不需要再一个个去改。

具体的操作方法是先选中你要定位的视图，按住Control键后拖动到另一个视图上后释放，会出现一个菜单，在菜单里可以选择它们之间的关系，按住Shift 后可以多选，选好后按Return 确认。

我们在弹出的菜单里选择让它们首尾对齐（Leading , Trailing），等高(Equal Heights)，还有加上垂直方向上距离，Vertical Spacing 就是将当前的垂直方向的距离作为默认的数值，我们可以双击这个约束线来修改数值大小，这里我们将大小改为10 。

完成以后我们从控件库里拖出一个Button ，在Attributes inspector里将标题改为“忘记密码”，颜色改为灰色。用上面的方法让它与输入框的 Trailling(尾部) 对齐，同时离上一个输入框距离也为10 ，放好修改密码的按钮。

再拖出一个Button，用来做登录按钮，将Background改为之前导入的按钮切图。用我之前说过的方式添加好约束。这里按钮的高度为45，离密码输入框的距离为60。

本文作者：董浩龙（点融黑帮），来自点融设计中心（DDC），是一名交互设计师，现在主要在做动效和原型，有空会学习一下代码，了解页面实现的原理。