之前在DDC后台有粉丝留言说希望我们能写一篇关于iOS和Android平台特性对比的文章，笔者曾经为两个平台分别做过差异化的设计，所以今天想借此话题为大家介绍一下iOS和Android两个系统在设计方面的差异之处，让大家能更好的理解其中的异同并运用在自己的设计当中。

作为智能手机的最大的两个阵营，iOS和Android系统差异一向都是大家津津乐道的话题，其中内容通常是围绕“机器性能好不好，打开软件卡不卡”“摄像头的像素高不高，拍出来的自己美不美”“外观是不是有bigger”等话题展开的。

但在一个设计师眼里，这两个系统的差异性之多可远远不止表面上看起来的那么简单粗暴。但在移动端趋势有如春草那样蔓延开来的今天，大多数的公司都选择把iOS的界面直接运用于Android系统。我们自然可以理解这样做是为了节省成本和更快的迭代，但抹杀了系统特性的运用却牺牲了许多Android用户的用户体验。尽管知乎也有类似回答过两个系统交互的不同，今天笔者想更着重介绍一下两者设计语言的异同。

从Flat Design和Material Design 说起

几乎每个移动端的设计师都会熟知的一个Mobile设计里程碑——就是iOS7的Flat Design。原本栩栩如生的拟物化设计被拍扁，去除了冗余、厚重和繁杂的装饰效果，扁成了“扁平化设计”，其核心思想就是让“信息”本身凸显出来，在设计元素上则强调了抽象、极简和符号化。自此扁平风格开始在移动端设计中广为盛行。

图一

自从2014年11月3日，Android5.0 Lollipop正式面向用户推出，Material Design 焕然一新的设计惊艳了全场，不仅仅是视觉效果，全新的“数字纸墨”的空间概念也赋予了界面全新的UI理念。

图二

那么Flat Design与Material Design，两个同样趋于简约的设计理念，他们具体的区别又在哪呢？ 以下将会就这个话题具体分析两者在设计思路、动效和其他细节上的不同。

开放与封闭，设计思路大不同

如果只能用一对词来概括Android和iOS系统的不同，我想那应该是开放与封闭，也正是这两个截然不同的系统特性带来了设计思路的不同。Android的开放带来了多样化设计的同时（使用自定义控件几乎没有不能实现的设计效果），同时也带来了“杂乱无章”之感和众多因为不统一而造成的用户在使用时无从下手的情况。而iOS的HIG（《Human Interface Guideline》人机交互规范）则更多“迫使”设计师去更多的使用系统原生的控件，设计师对于控件的修改非常局限，但这样做的好处就是每个App的基本操作都是在规范之内，具有一定的统一性，用户使用起来非常的方便，学习成本也相应降低了不少。这两者很难去评判孰优孰劣，可以说“iOS的下限比Android高，但Android的上限比iOS高”，伴随着大屏时代的脚步，可以看到双方都在努力靠近彼此的一个趋势，相信在不久的将来，就可以达到一种“和而不同”的平衡。

动效展现——换个角度看世界

现在动效的运用已经成为了许多app的标配，合理的动效不仅仅是为了视觉效果上的“酷炫”，更是帮助用户更好的理解层级、转场关系和关注到重点信息的利器。然而细心的设计师会发现，Android和iOS的动效思路是截然不同的。用一句话概括两边设计语言的物理模型就是：Material Design运用的是机械物理和电磁物理，而iOS的动效更多建立在镜头运动和景深变化上。究其设计语言的本质就是让用户可以把客观经验移植到界面的一种思路。

Material Design的隐喻是纸张，用户的手指就像磁铁一样把电子纸墨吸引过来，点击后就会泛起“涟漪”作为一个交互响应。而其他物体的排列则按照一种“深浅”的层级来排布，离手指越近的元素越亮，阴影越深，而离开远的元素则越暗，直至淹没在黑暗之中。

图3为MATERIAL DESIGN中动效的展现

图4为MATERIAL DESIGN的经典动画

细观iOS的系统动效可以发现，iOS的桌面就好像一片星空，每个App都是其中的一个小星星（点），每当用户去点击，镜头就会切近，而背景则是隐入了一片高斯模糊的景深之中，这应该是每个iOS用户最深刻的动效体验之一了。高斯模糊也成为了iOS特有的一个表达层级关系的利器（其中不仅是模糊，还存在着镜头晃动时的位移）。同样类型的动效还体现在打开app的时候由一个点放大成一个面，包括“日历”App和“相册”App（皆为系统应用）中年-日-月切换的操作，均是镜头思路的表现形式。

图5为相册的层级，由远及近，由小变大

图6为IOS打开APP时的动效，从点到面

无论是哪种动效，本质上都是帮助用户更好的理解界面切换和时间线之间的关系，设计师们也可以在这两种系统动效的基础上，设计出适合自己产品的动效。

分辨率之殇

对于需要同时涉及移动端多个平台的设计师来说，分辨率是永远无法避开的一个痛点。在iPhone6/iPhone6Plus 问世之前，iOS更受设计师欢迎，也更多被作为模板来设计的原因，很大一部分是因为iOS的分辨率相对固定，设计效果更容易被还原。而Android也一直因为屏幕尺寸的多样化而被设计师们所”嫌弃“。所以在设计的过程中，不仅仅需要调整当前页面的最佳设计效果，同时也应该思考这样的设计是否符合不同分辨率尺寸下的屏幕显示效果。之前公众号中小雪的《一稿适配iOS7》（链接）应该会给大家不少适配方面的启示。对于Android来说，无他，唯调整尔。尽量把设计元素的所占空间用百分比来表示，同时根据开发实现的效果来调整一些极端情况下具体的间距，以求“满足大部分主流屏幕的完美显示以及其他屏幕的可接受显示”原则。

下图给大家展示一下iOS与Android的分辨率的转换关系，在切图的时候满足一定的倍数关系，就可以一键导出可以同时适配两者的切图了。

1dp（Android）=1pt（iOS）

以48dp@160dpi计算的话

mdpi 48px (160dpi, 1x) 基础尺寸，已经非常少使用

hdpi 72px (240dpi, 1.5x)低分辨率

xhdpi 96px (320dpi, 2x) 同iOS @2x

xxdpi 144px (480dpi, 3x) 同iOS @3x

xxxdpi 192px (640dpi, 4x) 更大更高更强的分辨率

其实iOS和Android的设计还有许许多多的不同之处，比如字体、Tab bar设计、物理键操作方式、编辑模式、App体现个性的方式等等，在此不一一展开了。希望在设计移动端产品的过程中，设计师们可以更多的去思考两者的异同，并且更多的关注一下Android系统独有特性的运用，不仅仅节省了开发成本，同时也更好的为Android用户所接受。
 

原文地址：DDC

作者：Doris

按照计划，这篇文章将是这个系列里的最后一篇了。

在上一篇文章中，为了让最后的三个第三方登录按钮的间距能够根据屏幕的宽度自动调整，我先添加了一个组，再在组里面添加约束，弄的很复杂，而且这种方法也有一定的局限性。

我在上篇文章了就讲过，这个问题有更简单的解决方案。这个东西叫做StackView，在我之前讲过的添加约束的方式中，第一个按钮就是。

它可以让你不用添加约束就能使用Autolayout里的很多功能，以后维护起来也会更方便。和上篇文章讲的一样，先拖出三个按钮放好，这次不用给他们先放到一个组里，只要三个一起选中后，点击上面说过的Stack按钮，就将他们放进了一个StackView里了，你可以理解为对它们进行了编组。 

编组后发现三个按钮变成垂直排列的同学先不要急，后面我会讲到如何把它们变成水平分布的。这样我们就将它们都放到了一个组里了，接下来先给这个组添加约束，和之前用的方法一样。组的宽度还是设置为屏幕宽度的0.6倍。添加完成后变成这样了。

但是里面的按钮并没有和我们想象的一样平均分布，在上篇文章中，我们添加了很多约束，将这些按钮固定在了组里的某些特定的位置。你也可以在StackView里面添加约束，但是这里我们完全没必要这么做。我们只要选中整个StackView，就能在右边栏看到它的属性了。只要修改一个选项就能达到我们要求的效果。

下面我就解释一下这些选项代表的是什么意思。

第一个： Aixs 定义的是这个组的分布方向，我们三个按钮是水平分布的，所以这里不需要修改，如果你编组后他们是垂直分布的，只需要在这里将它们改成Horizontal就行了。

第二个 ：Alignment  定义的是组内元素的对齐方式，你可以在这里设置上对齐，下对齐之类的，因为这三个按钮大小是一样的，所以对齐方式也无所谓了，使用默认的就行。

第三个：Distribution 定义的是他们的分布方式，我们只要在这里选择equal spaceing 就能让他们平均分布了。

第四个 ： Spaceing 是用来定义相邻元素之间的距离的，你可以在后面的输入框中输入你想要的数值。

修改好了Distribution后，我们的工作就完成了。

StackView的威力不限于此，假设现在产品经理屁颠屁颠地跑来和你说，我们又多了一个第三方登录的渠道，需要加上去。如果你使用的是我在上篇文章中的做法，那么现在你必须从头来过，而且那种将三个按钮放在最左，中间，最右的做法也完全失效了，必须得想出新的办法来。

而如果你使用的是StackView，那这个问题完全不叫什么问题，你只要从控件库里面拖出一个新的按钮，直接扔到这个StackView里面就行了，其他的东西都是自动帮你搞定的。

再讲一个StackView的实际应用，假设我们设计了这样一个页面，想象一下，如果你一个个的去添加约束的话，会是一件多么麻烦的事情，而当需要在中间在插进一行新的内容的时候，那会让你更加痛苦。

而如果你使用的是StackView的话，这一切都变的非常简单。首先你将左边的一整列都放进一个StackView里面，这时候的Aixs应该是Vertical，在Alignment里将对齐方式改为Trailing（尾对齐），然后Spaceing里面调整一下行间距就可以了。

用同样的方式将右边的文字也都放进一个StackView里面，Alignment里设置Leading（首对齐），将Spaceing里的数字调整到和左边的一样。

最后将左右两个StackView再放进一个StackView里面，根据需要在Spaceing 里面调整它们之间的距离。将这个总的StackView放到你想要的位置就完成了。要添加新的一行，只需要将它们拖进之前设置好的StackView里就可以了。

StackView背后使用的也是AutoLayout，所以你还可以在StackView里面添加约束，做出更复杂的页面布局。

事实上苹果建议你将StackView作为一个最基础的元素来构建你的整个页面，因为它实在是太方便了。

约束的优先级 Constraint Priorities

我在之前讲过，只有当能从你给的约束关系中推断出位置和大小信息，而且还没有冲突时，才能通过。

在现实开发中，有可能会出现约束之间冲突的情况，这时候我们该如何处理呢？实际上不是所有的约束都是必须满足的。还记得我在上篇文章中讲过的双击修改约束吗？双击约束线后会弹出这样一个Popup，其中第二行的Priority 就是这个约束的优先级。

你可以给约束设定一个优先级，从0到1000，默认约束的优先级为1000，也就是说是必须满足的。但如果你将优先级调整到0到999之间，那就意味着这个约束并不是必须满足的，而是根据实际情况来取舍。当出现冲突时，AutoLayout会根据Priority数值的大小来选择优先满足哪些约束，数值越高，就越优先满足。

可是我们不该在一开始就避免去设置有冲突的约束么？如果我们一开始就去避免这个问题，那优先级还有什么用？

下面我讲一个例子来演示一下约束优先级的实际应用。

假设我们在做一个软件，在这个软件里我们给出了两种基本的操作：打赏 和 支持。

规则是这样的：打赏就是你给这个作者一定的虚拟币，每个用户可以进行无限次数的打赏。

支持，则更多的是精神上的自持，每个用户对于某个特定的观点只能支持一次。

通过以上的描述我们可以设计这样两个按钮：

因为支持按钮只有一次点击机会，所以当支持按钮点击过后它就变成不可点击状态，它的使命也就完成了。 

但是，既然“支持”这个按钮点过以后就失效了，为什么不将它拿掉不显示呢。可是如果去掉支持按钮，那么和支持按钮相关的约束都没有了，打赏按钮的宽度是没有被定义的。该如何来解决这个问题呢？

答案就是再创建一个约束，将打赏的尾部和屏幕最右边的距离设置为10 。这样打赏按钮的尾部有了两个约束了，一个说我要和支持按钮保持10的距离，一个说我要和屏幕的右边保持10的距离，显然这两个约束是冲突的。解决这个冲突的办法就是将新加的约束的优先级降低。在下图我用虚线表示。 

这样初始状态时，因为第二个约束并不是必须满足的，所以一开始是被舍弃的。但是当支持按钮被移除后，这个新加的按钮正好能派上用处。这样页面就变成了这样：

约束不一定是固定值

前面我讲的约束都是一个固定的数值，但实际上着并不是必须要这样的。你可以设置他们之间的关系，大于等于某个值，等于某个值，小于等于某个值。再看一下修改约束的Popup，第一个选项就是让你选择这个关系，只不过默认的是等于。

下面再看一个实际情况。

假如我有这样一行内容，前面是描述，后面是内容，我们规定了它们各自离开屏幕两个边的距离。但是我们并不是十分关心它们之间的距离，所以我们可以不设置它们之间的约束，让他们根据显示的内容自动调整好了。然而，当后面这个交易编号变的特别长的时候，就会出现文字叠加的情况。所以为了保证它们不重叠，我们还是需要在他们之间设置一个约束，如规定它们的距离必须大于等于10。这样大多数情况下能保证这两个label还是能自由伸缩，而且不会出现重叠的情况。当编号变的特别长时可以触发新的适配机制，如让编号的字体缩小，而不是直接重叠到前面的标题上去。

Auotresizing

不得不承认的是，有时候设置约束是一件很麻烦的事情，特别是你面对的是复杂的界面的时候，而有时候，你还没想好要设置成怎么样，只是想先试试。这时候你就可以试试苹果推出的新功能，前提是你要把你的Xcode 升级到8.0以上。

这个功能就是Auotresizing，它让你不设置约束就能快速验证你的想法。它使用起来也非常简单，在选中你要设置的视图的前提下，当你选择左边栏中的标尺icon 后就能看到Auotresizing功能了。

能看到中间的正方形四周有四个约束，虚线状态下表示这个约束没有添加，当你点一下后，它就会变成实线，表示已经添加上了，而中间的两个带有箭头的虚线则代表是否允许伸缩。默认是不允许的，如果你点击宽度方向的以后，这条线就变成了实线，表示宽度方向是可以自由伸缩的。边上还会有一个小动画来告诉你这些视图会怎么变。有兴趣的可以去尝试一下。

到这里，这个系列的文章就算结束了。当然我这个系列的文章里不可能提到所有和AutoLayout的知识。很多人看完以后可能也就忘了如何去添加约束，但是我觉我写这个系列的文章，最大的目的不是让你看完以后能像程序员一样去开发自己设计的页面了，而是让你了解这种相对布局的思想。希望看完这一系列文章后，当你再次看设计稿时，能有一种新的视角。

Via: DDC

单位：

pt：ios开发单位，即point，绝对长度，1pt=1/72英寸。

ppi:Pixels Per Inch，即每英寸所拥有的像素数目，屏幕像素密度。

公式：

举例：

比如iphone3gs的像素分辨率是480px×320px，按下图计算即表示在iphone3gs具有ppi为163，物理屏幕宽度约为3英寸，3*163~480，

因此iphone3gs分辨率为480*320

由于iphone3GS和iphone4的物理屏幕尺寸的大小是一样的，所以，他们的pt是相同的。但是由于iphone4的现实像素为960px×640px，也就是说每英寸在iphone4的屏幕下显示了326个像素（刚好是iphone3GS的2倍）。

即在同一物理长度pt长度下，iphone4的屏幕像素密度是iPhone3GS的2倍，因此像素分辨率是iphone3gs的2倍。

这也就是为什么当我们在做iOS客户端的设计时候（通常我们以@2x来设计），开发说的图片尺寸多少pt，换算成要乘以2的原因了（如果我们做iphone6+的设计要在pt数×3）的由来了。

再去看iphone的各个尺寸就很简单了。可以看出iphone的屏幕密度只有3种，即

@1x，163ppi(iphone3gs）

@2x，326ppi（iphone4、4s、5、5s、6）

@3x,401ppi（iphone6+）

原文链接：jianshu
 

智能手机发展到今天，屏幕尺寸变的越来越多，iPhone从最初的3.5寸屏幕，到后来推出的4寸屏，直到苹果推出iPhone 6 和 iPhone 6Plus，也宣告着苹果阵营被彻底攻破，进入了屏幕尺寸碎片化的时代。只为某一个屏幕尺寸设计的日子已经不在存在。为了适配所有的屏幕，设计师必须考虑各种屏幕尺寸。但是又不可能为每个尺寸都设计一遍。那么我们又该如何面对屏幕碎片化的困境？

 图1，图片来自：HTTP://WWW.PAINTCODEAPP.COM/NEWS/ULTIMATE-GUIDE-TO-IPHONE-RESOLUTIONS

苹果给出的答案是AutoLayout。让你能用一个设计来适配所有屏幕，理论上讲从iPhone4适配到iPad pro都可以。它希望你忘记某个具体的尺寸。实际上你可以随意拖出一个任意尺寸的画布进行设计，标注好后就可以交给工程师开发。

首先我们先看一下，苹果的开发软件Xcode上是让你怎么进行页面布局的。

图2，XCODE.STORYBOARD

中间那块白色的正方形就是画布，如果你是使用storyboard布局的话（iOS的布局方式有很多种，storyboard只是其中一种，我在后面会讲），你可以将你设计好的控件放到这个画布上去，根据你标注的尺寸定义好它们的位置关系，接下来AutoLayout就会自动适配各个屏幕了。听上去好像很神奇。

有些人会有疑问：我是以iPhone6的尺寸为基础进行设计和标注的，怎么可能在一个正方形上根据我标注的尺寸定好它们的位置关系，放到这个正方形上，我的标注不是全乱了吗？答案是，是，也是不是。如果你在设计和标注时只为iPhone6设计，把适配的问题都抛给了工程师，很有可能最后出来的结果不是你想要的。相反，即使你是在iPhone6上进行设计，但是你并没有把思维局限在某个尺寸上，那么你的标注放在正方形上也不会乱。

确切的讲，如果你是以约束为基础（constraint-based）来设计的界面，那么无论屏幕怎么变化，你的设计也会跟着进行调整。

下面我就来讲讲AutoLayout到底是如何工作的，以及该如何用约束的思想来进行设计。

对于iOS开发来讲，通常会使用的是两种布局方式。一种是使用代码设置每个视图（View）的Frame来进行定位。另一个则是使用AutoLayout进行布局（可以在storyboard上，也可以使用代码）。假设我们在iPhone6（375*667）的尺寸下放了有两个视图，A和B。

Tips：在iOS开发中使用的单位是point，也就是@1x下的尺寸。如果你是以iPhone6（750*1334Px）的尺寸进行设计的，那么里面的尺寸都要除以2才能用。所以建议大家在@1x的环境下设计。本文不做特殊说明，没标单位的标注，默认单位都为point。 

1.Frame定位

设置Frame进行定位的方法不是本文讨论的重点，我只在这里简单介绍一下。首先在iOS里的坐标系和我们平时用的有点不同。它的坐标原点在左上角。每个视图都有自己独立的坐标系。见下图。

图3，使用FRAME进行定位

通常我们定义一个Frame的代码（Swift）是这样的：

let frame = CGRectMake(x:CGFloat, y:CGFloat, width:CGFloat, height:CGFloat)

当然你不需要看懂它，只需要知道它要你提供四个参数：x，y，width，height。x ，y 是你要定位的视图的原点相对于包含它的视图的（superView）坐标系的坐标。width，height 当然就是你要定位的视图的宽度和高度了。

总结一下就是你需要提供位置信息（location）以及尺寸（size）信息。

所以上图中A，和 B的Frame应该是这样的：

let frameA = CGRectMake(60, 60, 255, 160)

let frameB = CGRectMake(60, 280, 255, 160)

2.AutoLayout定位

AutoLayout布局背后的逻辑则完全不同于上一种方式。同一个图，AutoLayout可以用下图这种方式来表示。

图4，AUTOLAYOUT布局

AutoLayout是通常是通过定义一系列的约束（constrains）来进行定位的。和Frame定位一样，它同样需要你提供位置和尺寸信息，但是和Frame不同的是，它不是让你直接提供x，y，width，height，而是通过你给的约束来推断出相应的尺寸和位置。只有当能从你给的约束关系中推断出位置和大小信息，而且还没有冲突时，才能通过。

如上图中的视图A，我们通过上下左右四个约束定好了它的位置。我们提供了它的高度，但是我们并没有给出它的宽度。之前说过，要确定一个视图的布局，你需要提供位置以及尺寸信息。而这里我们却没有提供宽度。应为宽度不是一个固定的数值，需要AutoLayout自己通过现有的约束来推断出视图A的宽度 = 375（屏幕宽度)— 60—60 = 255，这样当屏幕宽度变化时，视图A的宽度也会随之变化。

AutoLayout能够根据你在相应视图上设置的约束，自动计算出的你定义的视图的位置和大小。

图5，当外部环境（屏幕宽度）变化时

当周边环境变化时，它也随之改变，这就是AutoLayout能适配不同屏幕的秘诀。

AutoLayout的应用并不局限于应对外部环境的变化（屏幕大小变化），即使在同一个屏幕内，当页面内容开始变化时，AutoLayout也能做出相应的调整。假设现在因为某种原因，视图A的高度变为了210。那么就会出现以下两种结果：

 图6左，FRAME

图6右，AUTOLAYOUT

用Frame定位方式，因为视图A，B的位置信息是独立的，A的变化，并不会影响B的位置，所以当A变高时，A，B之间高度方向的距离就被压缩了，可以想象，当A继续变高时，A和B之间就会出现叠加的情况，这显然不是我们希望看到的效果。

而AutoLayout则不同，由于B高度方向的位置是相对于A的，所以当A变高时，B的位置也会跟着变化。这当然是我们希望看到的结果。

由此可见，AutoLayout的应用场景不局限于适配不同的屏幕尺寸，即使在软件运行的过程中，当页面变化时它也能够跟着调整。

需要提一下的是，使用Frame定位的方式也是能实现上面这种AutoLayout的效果的，反之我们也能使用AutoLayout来实现像Frame这种A,B不相互影响效果，我在这里不细说，有兴趣的可以自己去思考一下。举这个例子，只是为了说明绝对定位和相对定位的区别。

3.AutoLayout 的属性（AutoLayout Attributes）

相对于Frame通常要你提供的x，y，width，height，AutoLayout可用的属性则多的多，常用的属性有这些：

Left

Right

Top

Bottom

Leading

Trailing

Width

Height

CenterX

CenterY

Baseline

查看所有属性可点击这里：

https://developer.apple.com/library/ios/documentation/AppKit/Reference/NSLayoutConstraint_Class/index.html#//apple_ref/c/tdef/NSLayoutAttribute 

图7，AUTOLAYOUT 属性

这些属性也大概可以分为两类：大小（size）如width ，height ；位置（Location）如Leading，Trailing，Top，Button。

有了这些属性，我们不仅能够定义不同视图之间的距离，让它们对齐，定义不同视图之间的相对尺寸，甚至可以定义一个视图的长宽比。

值得注意的是其中的Leading 和Trailing，并不等于Left和Right。Leading代表的是阅读开始位置。通常我们都是习惯从左边到右来阅读，这种情况下Leading就是Left，Trailing就是Right。但并不是所有的国家都是依照这个方式的，比如中国古代的书，就是从右到左的，这时候Leading就在Right了。如果你的App用户是国际化的，需要注意这个问题。通常情况下，我们都使用Leading，Trailiing。

图8，不同语言环境下LEADING和TRAILING的区别

图9

假设我们有以上两个View，现在要求他们间隔距离为8，如上图所示。那么他们之间的约束关系就可以这么表示：

ViewB.Leading = 1.0 x ViewA.Trailing + 8

其中1.0 是一个系数（Multiplier），这种情况下，这个系数为1.0

4.举个例子

下面就讲一个具体的例子来说明一下AutoLayout应用。

假设我设计了一个这样的界面（375*667），接下来要交给工程师进行开发。我的要求如下：

1.三个视图离页面两边的距离都为37.5

2.每个视图之间的距离，包括视图离页面顶端和底端的距离都要一样，为40

3.三个视图的宽度和高度要一样。

我按照这些要求进行了标注，以下就是我想达到的效果以及我的标注：

图10左，我要实现的效果

图10右，我的标注

先分析一下我们的标注。

首先我要求每个视图离页面两边的距离都为37.5。在标注里我很明确地说明了这个问题。

其次，我要求每个视图之间的距离，包括视图离页面顶端和底端的距离都要一样，为40。在标注中我也很明确地说明了这一点。

最后，我要求每个视图的宽度和高度要一样。在标注里，每个视图的高度都标了169，符合我一样高度的要求。我给第一个视图标上了宽度300，其他两个和第一个首尾对齐，也是300，符合我一样宽度的要求。

乍一看这个标注没有问题。但是这里我们确忽略了一个很重要的问题。这个图我是以iPhone6的尺寸来设计的，但是实际情况，它并不只会出现在iPhone6的屏幕上。按照上面的标注，标注的总宽度 = 37.5*2 + 300 = iPhone6的屏幕宽度（375）。但是如果换一个手机屏幕，这个等式就不成立了。同样，高度也是这个问题。这样就和实际情况产生了冲突。

Tips：当你的标注在宽度方向，或高度方向的数值加起来等于某一个具体的屏幕尺寸时，你就需要去重新去检查你的标注了，需要说明那些尺寸是固定的，哪些尺寸是可变的。

显然，工程师无法满足你标注的所有尺寸要求。如果他只看到你给的标注文件，而不知道你的三点要求。那么这个标注在宽度方向大概就出现了以下几种可能性：

1.保持两边各37.5的边距（margin）要求，每个视图的宽度根据屏幕的宽度来伸缩

2.每个视图的宽度保持300不变，两边的边距根据屏幕的宽度来伸缩

3.视图的宽度和边距随着屏幕的宽度变化一起缩放

从我们之前的要求来看，我们希望的是第一种可能性的，只是我们的标注没有很好的说明这个点。工程师需要靠自己的理解来选择其中一种，有时候他的选择可能并不是我们想要的结果。

我们该如何标注，来很好的表达我的要求？正确的标注应该是这样的：

图11，正确的标注方式

首先，我去掉了宽度的标注，就像上个例子说的一样，我们需要AutoLayout自己来计算出它的宽度，也就意味着我们是希望每个视图的宽度随着屏幕的宽度变化而变化。其次，我去掉高度的具体数值，只标了一个h。同样，因为屏幕的高度是不固定的，所以我无法给出具体的高度，但是我又要求每个视图的高度是一样的。通过给每个视图标注高度h，来表示他们的高度一样。

5.表达三种不同可能性

之前我说过，我第一次给出的标注大概可以有三种不同的理解，那么我们又该如何来表达这三种可能性呢？下面我就来说一下，如何使用AutoLayout的方式标注，来很明确地来表现以上三种可能性。

图12 

第一个视图的标注，保持两边各37.5的边距（margin）要求，每个视图的宽度根据屏幕的宽度来伸缩，这个上面说过。

第二个，我标注了宽度，没标边距。但是我们要求它水平方向居中，通过这个约束来确定它水平方向的位置。这样边距就可以根据屏幕的宽度变化而变化。

第三个，我标注了宽度为80%的屏幕宽度，这样它就能做到和屏幕一起缩放。

图13

我在Xcode上添加好了上面要求的约束，并选择在不同的模拟器上运行。这样就可以看到我们设计的页面在不同设备上运行的效果了。以下就是它在不同屏幕尺寸下显示的效果：

图14

可以看到，在iPhone6上一模一样的三个视图，应为我们设置了不同的约束，在不同的设备上运行就出现了不一样的效果。因为AutoLayout是根据你设置的约束，自动计算出的你定义的视图的位置和大小。

为了适配更多的屏幕，我们在设计的时候需要用相对定位的思维来布局。

这次就讲到这里，下一篇我会介绍更多AutoLayout相关知识，以及如何使用Xcode来添加约束，做出你自己设计的页面。

Via: DDC