iOS分辨率的那些事儿

最新推荐文章于 2020-07-18 16:08:29 发布

转载最新推荐文章于 2020-07-18 16:08:29 发布 · 579 阅读

ios开发专栏收录该内容

65 篇文章

订阅专栏

1 iOS设备的分辨率

iOS设备，目前最主要的有3种（Apple TV等不在此讨论），按分辨率分为两类

iPhone/iPod Touch

普屏分辨率 320像素 x 480像素

Retina分辨率 640像素 x 960像素

iPad,iPad2/New iPad

普屏 768像素 x 1024像素

Retina屏 1536像素 x 2048像素

2 iOS设计时用的点与分辨率的关系

尽管有上面列出的4种分辨率情况，不过细心的人会发现，对于Retina屏的分辨率始终保持为普屏的2倍，这对于iOS的设计还是开发的时候提供的莫大的方便，自然可以想到对于界面设计而言，只需要设计一套，然后进行等比例放大缩小即可。实际进行设计与开发的时候，也确实是这样，Apple为了防止在交流过程中（尤其对于编程实现）分辨率对思维的迷惑，统一使用点（Point）对界面元素的大小进行描述，例如：

iPhone/iPod Touch

界面描述 320点 x 480点

iPhone/iPad

界面描述 768点 x 1024点

换算关系

普屏 1点 = 1像素

Retina屏 1点 = 2像素

这样，不管我们是在为普屏还是Retina屏进行设计与开发，我们都可以清楚地，并且统一地使用点对界面元素的大小进行描述了。

3 iOS界面图片的命名

现在我们能够用统一的语言描述两种屏幕的界面元素的大小，但是我们如何针对不同屏幕设置不同分辨率的图片素材呢？难道说开发的时候我们要在每一个图片加载的地方进行，添加判断当前设备是否是Retina屏的语句，然后加载对应的图片吗？当然可以这样做，但是iOS有一套更简便的方法进行自动加载，即通过规范的文件名命名。例如下面这条加载图片的语句：

[UIImage imageNamed:@"pic.png"]]

在实际运行时，如果发现当前的设备是Retina屏，会自动寻找图片"pic@2x.png" ，自动加载针对Retina屏的图片素材，是不是很方便呢？

所以，我们在制作iOS设备时，可以仿照下面这样，对图片文件进行分类，对于640x960文件夹里的图片，文件命名添加"@2x"即可。

4 iOS应用常用图标的命名规范

可以参考下面两个文档：

Apple对此问题的Q&A

Apple的官方说明文档

请务必按照文档中描述的规范进行图标的命名！！

PS：一些额外的图标参考

a 图标会自动添加高亮效果，如果不需要，可以在plist中明确指定UIPrerenderedIcon的键值去掉

b 57像素的普屏的iPhone图标，图标圆角的半径为10像素

c 114像素Retina屏的iPhone图标，图标圆角的半径为20像素

d 512像素的用于iTunes/App Store的图标，在实际显示是会被缩放到175像素进行显示（但提交是不可以提交175像素）

e 72像素的普屏iPad图标，图标圆角的半径为13像素

f 144像素Retina屏iPad图标，图标圆角的半径为26像素

g 50像素iPad的Spotlight搜索图标的最终视觉大小是48像素，原因是iOS会对图标的每个边去掉1个像素，添加阴影效果

h 100像素Retina屏的Spotlight搜索图标的最终视觉大小是96像素，原因同上，这次是每边减2个像素

（via:sunnyxx's blog）

分辨率和像素

经新xcode6模拟器验证（分辨率为pt，像素为真实pixel）：

1.iPhone5分辨率320x568，像素640x1136，@2x

2.iPhone6分辨率375x667，像素750x1334，@2x

3.iPhone6 Plus分辨率414x736，像素1242x2208，@3x，（注意，在这个分辨率下渲染后，图像等比降低pixel分辨率至1080p(1080x1920)

自动适配

不处理时自动等比拉伸，如果在老工程打印屏幕frame，依然是320x568

对比自动适配的和完美适配的导航栏就能看出问题：

因为拉伸所以会有一些虚，导航栏明显比64要大，但相比3.5寸到4寸的留黑边还是好很多。

如何关闭自动适配方案呢？这个还是老思路，换启动图：

除了换启动图外，不得不说的是，新Xcode中可以使用一个xib来设置启动图：

不过这个xib不能关联任何的代码（不能自定义View的Class，不能IBOutlet，不能加Object），可以理解成这个xib就是一张截图，这个方案的好处在于可以使用到Size Classes来针对不同屏幕布局这个xib（感兴趣可以看《Size Classes初探》）

关于手动适配

只要手动指定了启动图或者那个xib，屏幕分辨率就已经变成应有的大小了，老代码中所有关于写死frame值的代码通通倒霉，如果去手动适配就要全部适配，建议在找到个可行方案前先不要做修改，自动适配方案还算不影响使用。

面对4个分辨率的iPhone，建议使用Auto Layout布局 + Image Assets管理各个分辨率的图片 + Interface Builder（xib+storyboard）构建UI，Size Classes在低版本iOS系统的表现未知。想要这套手动适配方案，起码你的工程需要部署在iOS6+，还不用AutoLayout布局的会死的蛮惨。