iphone6/6+的适配原理和适配心得分享

目前很多移动UI设计师，开始了一个又一个的APPUI项目。只知道需要设计一个iphone 6+的尺寸，然后根据这个尺寸进行缩放，从而达到适配其他手机机型的方案。

之前25学堂跟大家分享过：

1、最新WebAPP设计指南规范：适配iphone6技巧

2、iPhone 6/6Plus UI界面设计和适配尺寸规范

3、iPhone 6/6Plus APPui界面设计规范以及界面适配

等等优秀的关于iphone 界面设计尺寸的适配问题。 但是其中，有多少设计师真正理解这个适配的原理和做法呢？

今天25学堂的老谭童鞋利用周末的早上，跟大家一起分享下iphone6/6+的适配的真正原理。

第一步：回顾下主流iphone的分辨率pt、px和PPI

对于6+之前的手机，pt和px的比例为1:2。而6+出来之后，这一比例达到了1:3。同时分辨率达到了1242x2208（使用ip6+截图，再传到电脑上看，就是这个分辨率），而iphone实际分辨率为1080x1920。分辨率的比率为1.15:1。

对于ppi，6+之前均为326，而6+之后变为401。

在实际APP项目开发中，素材通常是移动UI美眉负责提供。从@2x到@3x，素材的分辨率提高了1.5倍。

例如一个@2x的素材大小为44x44，那么相应的@3x大小分辨率为66x66。

文件命名的方式依然没变：${IMG_NAME}@3x.png这种形式了。

命名好的文件丢入资源文件夹内，只要代码保持一致，文件名称不变即可。

第二步：UI切图到代码这个过程，移动APP设计师必须了解的一个过程。

由于ip6+点（point）和像素(pixel)的关系为1：3，因此，当UI设计稿基于1242 x 2208 分辨率【iphone6+】图给定UI设计稿时，程序员进行实际换算为设计稿的  1/3。

适配问题其实在ip5出现的时候就存在了，乔布斯的3.5寸是最方便单手操作的尺寸已经成为过去，ip5的4寸屏幕扇了自己的脸。

随着ip6的出现，屏幕分辨率也越来越多样化，以前在iOS中很方便的写死坐标法将越来越不好用了。因此需要进行适配。

可以对控件间距进行适配，也可以对控件大小本身适配。

知识点： 适配的总体原则就是相对布局了

第三步：机型尺寸适配

 从iPhone5(s)发展到iPhone6(+)，由于高宽比保持不变，iOS对图标、图片、字体进行等比放大自适应，清晰度会有所降低。同时，绝对坐标布局会导致在大屏下出现偏左偏上的问题。从分辨率的角度来看，iPhone6沿用二倍图（@2x），但需为iPhone6+提供更高的三倍图（@3x）；从屏幕尺寸角度来看，需要重新对UI元素尺寸和布局进行适配，以期视觉协调。

（1）按宽度适配

我们先来看一下iPhone4~6(+)的屏幕高宽比：

       iPhone4(s)：   分辨率960*640，         高宽比1.5

       iPhone5(s)：  分辨率1136*640，         高宽比1.775

       iPhone6：       分辨率1334*750，         高宽比1.779

       iPhone6+：  分辨率1920*1080，         高宽比1.778

可粗略认为iPhone5(s)、6(+)的高宽比是一致的（16:9），即可以等比例缩放。因此可以

按宽度适配：

 适配代码： fitScreenWidth= width*(SCREEN_WIDTH/320)

这样，共有iPhone3/4/5、6、6+三组宽度，在iPhone6、6+下将按比例横向放大。

（2）按高度适配

    在同样的宽度下，iPhone4(s)的屏高比iPhone5(s)低，若纵向排版紧张，可以iPhone5(s)为基准，

按高度适配：

 适配代码： fitScreenHeight= height*(SCREEN_HEIGHT/568)

共有iPhone3/4、5、6、6+四组高度，在iPhone3/4下将按比例纵向缩小，在iPhone6、6+下将按比例纵向放大。

这里需要注意iPhone/iOS双环上网的热点栏对纵向布局的影响：iPhone作为个人热点且有连接时，系统状态栏下面会多一行热点连接提示栏"Personal Hotspot: * Connection"，纵向会下压20pt，[UIApplication sharedApplication].statusBarFrame高度变为40pt；当所有连接都断开时，热点栏消失，纵向高度恢复正常为20pt。

（3）按字体适配

另外，iPhone的【设置】【通用】【辅助功能】中可以设置调节【更大字体】，

APP也可以按字号适配：

例如适配表视图（UITableView:UIScrollView），无法左右滑动，因此无论字号缩放比例多大，横向都不应超过SCREEN_WIDTH。注意限定控件元素内容区域宽度以及间距，并设置适当的LineBreakMode。表视图支持上下滑动，因此纵向上的表格行高和内容区域高度可按字号缩放。

对于纵向也不支持滑动的视图，在屏幕可见视区内排版时，最好不要随字号缩放，否则可能超出既定宽高。

其他适配方法 还有：

1、对于ip6或者6+最简单的适配方法就是：不适配。

从上面计算可以看出，ip5，6，6+的屏幕比例均为16：9。因此，当一个app【支持ip5】的话，那么在ip6/6+上运行时，系统将会对画面进行拉伸，以便填充整个屏幕。

拉伸之后看起来图标、字体、图片什么的都变大了，并且清晰度降低了，感觉就是在PC上全屏运行FC模拟器玩游戏这种感受。虽然降低了用户体验，但是比以前屏幕顶端和底端出现粗又黑的黑条来说，简直是好多了。

2、占屏比适配

对于不同手机，屏幕宽度是不同的。这样两个按钮的间距在不同屏幕上就显示合适了。使用[UIScreen mainScreen].bounds.size.width求出屏幕宽度。

当然也不一定使用屏幕宽度作为基准尺度，在实际应用中，还可以选择superView frame的宽度、按钮本身宽度、某个基准图片的宽度等作为基准尺度。

3、比例缩放适配

这个是我们目前最常用的一种适配方式。根据屏幕比例进行适配。简单而容易理解，适配效果也还不错。

以上就是前辈们分享的关于iphone6/6+的适配原理和iphone6/6+的适配心得，希望对各位有所收获。

最后还跟大家分享一篇《一篇厚道的Autolayout及VFL经验分享》的博文。有兴趣的设计师和交互设计师可以阅读。关于ios Autolayout的适配技巧。