iphone6/6+ 适配心得
1. 文档综述
自iphone6/6+发布，ios屏幕分辨率的种类一下从2种变成了四种。对于以前很多手写UI，并且使用绝对坐标的UI，可能会发生异变，本文主要介绍在纯手写UI条件下，ios应用界面适配的一些经验了。
2. iphone分辨率px, pt与ppi，以及@3x
老生常谈的一个问题了。但是随着iphone6+的引入，局面有了新的变化。首先介绍一张表，本章后续内容围绕此表展开：
|
手机 |
pt |
px |
ppi |
|
iphone4/4s/ |
320x480 |
640x960 |
326 |
|
iphone5/5c/5s |
320x568 |
640x1136 |
326 |
|
iphone6 |
375x667 |
750x1334 |
326 |
|
iphone6+ |
414x736 |
1242x2208 (1080x1920) |
401 |
对于6+之前的手机，pt和px的比例为1:2。而6+出来之后，这一比例达到了1:3。同时分辨率达到了1242x2208（使用ip6+截图，再传到电脑上看，就是这个分辨率），而iphone实际分辨率为1080x1920。分辨率的比率为1.15:1。
对于ppi，6+之前均为326，而6+之后变为401。
2.1. 素材资源发生的变化@3x
在实际开发中，素材通常是UI美眉负责提供。从@2x到@3x，素材的分辨率提高了1.5倍。例如一个@2x的素材大小为44x44，那么相应的@3x大小分辨率为66x66。
文件命名的方式依然没变：${IMG_NAME}@3x.png这种形式了。命名好的文件丢入资源文件夹内，只要代码保持一致，文件名称不变即可。
2.2. UI到代码
由于ip6+点（point）和像素(pixel)的关系为1：3，因此，当UI设计稿基于1242x2208分辨率【iphone6+】图给定UI设计稿时，程序员进行实际换算为设计稿的1/3。
假设上图是一个设计稿，基于1242x2208。UI美眉给了两个按钮间距为30px。为了实现以上效果，则可以在代码中写：
btn2.frame = CGRectMake( GetX(btn1.frame)+GetWidth(btn1.frame)+30.f/3,
GetY(btn1.frame),
GetWidth(btn1.frame),
GetHeight(btn1.frame)
);
由于实际间距为30px，因此在代码中应该做除3的处理，保证间距效果。当然，如果设计搞给的不是ip6+的图，那么这里的30.f/3还是应该按照以前的老规矩：30.f/2。
2.3. 代码到UI
从UI到代码，只要在明确UI给出的设计图是基于哪部手机（具体来说是哪种分辨率）即可。但是，对于已经写好的代码，在不同的UI上表现是否相同呢？还是给出类似上面的代码：
btn2.frame = CGRectMake( GetX(btn1.frame)+GetWidth(btn1.frame)+10.f,
GetY(btn1.frame),
GetWidth(btn1.frame),
GetHeight(btn1.frame)
);
有两个btn，btn1和btn2之间的水平间距是10。现在问题来了：这两个btn之间的距离在不同手机上看起来是相同的么？我们进行实际的换算：
|
手机 |
pt |
px |
|
iphone4/4s/5/5c/5s |
10 |
20px |
|
iphone6 |
10 |
20px |
|
iphone6+ |
10 |
30px |
因此，相同的代码，在iphone6+和非iphone6+(ip4, 5, 6)的手机上表现是不同的：
在非iphone6+中，间距为20px；在iphone6+中，间距为30px。糟了，那间距在不同手机上相差了10个像素？外观就有差距了，如何调整？
【其实不用太过担心】，他们的间距【看起来】依旧相同。还是给出一个表格：
|
手机 |
pt |
px |
ppi |
|
iphone4/4s/5/5c/5s/6 |
10 |
20 |
326 |
|
iphone6+ |
10 |
30 |
401 |
继续回顾以前的讨论：
·分辨率缩放
ip6+的实际分辨率为1080x1920，和1242x2208的分辨率的比例为1：1.15。那么30px在实际距离变为了：
可以看到差不多在26个px左右，间距【看起来】变小了一些。
·ppi影响
ppi，每英寸像素个数。ip6+的ppi为401，而非ip6+的ppi为326。相同屏幕物理距离，ip6+会显示更多的像素；或者，相同px长度，在ip6+上【看起来】更短。它们之间的比例：
·【看起来】
现在我们计算30个px在ip6+上与以前ip手机相比【看起来】有多长：
换算完毕之后，pt为10，在ip6和ip6+上面的间距【看起来】变成了：
20px和21.2px在高分屏上，并且是用肉眼观察，它们的区别是很不明显的。那么结论就是，相同的UI代码，在不同的手机上的表现是基本相同的。对于在以前手机上写死的相对距离，不用过于担心在ip6+上的排序会乱掉。
从ip6+的处理上可以看出，苹果手机在设计时对开发者的关怀。
3. 适配心得
总结自己对ip6、ip6+的适配心得，未来有更多经验后，会继续丰富本章中的内容。
适配问题其实在ip5出现的时候就存在了，乔布斯的3.5寸是最方便单手操作的尺寸已经成为过去，ip5的4寸屏幕扇了自己的脸。随着ip6的出现，屏幕分辨率也越来越多样化，以前在iOS中很方便的写死坐标法将越来越不好用了。因此需要进行适配。
可以对控件间距进行适配，也可以对控件大小本身适配。
3.1. 适配原因
适配的最主要原因就是以前潜在的代码存在手写死坐标，导致在屏幕高度和宽度都发生变化后带来的UI错乱问题，简单举两个例子：
·例子1
某人想把一个按钮放在屏幕右边的位置，写下了如下代码：
btn.frame = CGReactMake(290,y,width,height);
这段代码在ip4/5上面都正常，因为屏幕宽度均为320，而对于ip6/6+，屏幕变宽了，按钮位置看起来发生了变化：
如上图，按钮在ip6，ip6+上面表现的不再靠屏幕右边，而是越来越靠左。
·例子2
对于两个按钮的间距或者按钮宽高度问题，前面已经讨论过了，在不同的屏幕上【看起来】是一样的。但是屏幕大小发生了改变，因此也需要酌情进行适配。酌情的原因是，有些间距UI要求就是固定间距，而有些间距UI要求是相对间距，所有要根据情况来看。
现在给一个例子，依旧是前面的间距问题：
btn2.frame = CGRectMake( GetX(btn1.frame)+GetWidth(btn1.frame)+10.f,
GetY(btn1.frame),
GetWidth(btn1.frame),
GetHeight(btn1.frame)
);
在iphone4/5时，btn2在间距btn1右侧10单位后，来到了比较靠近的屏幕右侧的位置。而当屏幕变宽之后，在ip6和ip6+上面却无法达到靠近右侧的效果。
3.2. 常见适配方法
适配的总体原则就是相对布局了。
后续几个小节介绍一些常见的适配方法。未来总结出更多新的适配思想后，也会对文章内容进行响应补充。
3.2.1. 不适配
对于ip6或者6+最简单的适配方法就是：不适配。
曾经ip5刚刚出现的时候，以前基于ip4写的应用在ip5上运行的话，会发现屏幕的顶端和底端出现两条黑又粗的黑边。出现黑边的主要问题是ip4和ip5的屏幕比例不同：
而当ip6，6+出现时，屏幕的比例变成了：
从上面计算可以看出，ip5，6，6+的屏幕比例均为16：9。因此，当一个app【支持ip5】的话，那么在ip6/6+上运行时，系统将会对画面进行拉伸，以便填充整个屏幕。
拉伸之后看起来图标、字体、图片什么的都变大了，并且清晰度降低了，感觉就是在PC上全屏运行FC模拟器玩游戏这种感受。虽然降低了用户体验，但是比以前屏幕顶端和底端出现粗又黑的黑条来说，简直是好多了。
3.2.2. 占屏比适配
以前UI给距离，长度等内容，通常给定的是像素值px。现在为了进行适配可以给出像素值相对某个长度的比例：
例如，两个按钮的距离是屏幕宽度的12%。
对于不同手机，屏幕宽度是不同的。这样两个按钮的间距在不同屏幕上就显示合适了。使用[UIScreen mainScreen].bounds.size.width求出屏幕宽度。
当然也不一定使用屏幕宽度作为基准尺度，在实际应用中，还可以选择superView frame的宽度、按钮本身宽度、某个基准图片的宽度等作为基准尺度。
3.2.3. 比例缩放适配
另一种适配方法就是比例缩放适配了，根据屏幕比例进行适配。例如，在ip5上，btn1，btn2的横向间距为10：
那么，在ip6/6+的间距可以根据屏幕长度带来的变化进行：
比例缩放适配，使得UI仅关注某个iphone机型，其它机型根据屏幕宽度和高度进行缩放即可。
