16、iOS屏幕等比例适配

最新推荐文章于 2024-01-23 17:58:09 发布

海森堡_lichangan

最新推荐文章于 2024-01-23 17:58:09 发布

阅读量2.7k

点赞数

分类专栏： iOS 文章标签： ios

本文链接：https://blog.youkuaiyun.com/u010259906/article/details/120550029

版权

iOS 专栏收录该内容

29 篇文章

订阅专栏

1、基础概念

1.1 分辨率相关的概念

点(Points):
是iOS开发中引入的抽象单位，称作点。开发过程中所有基于坐标系的绘制都是以point作为单位，在iPhone 2G,3G,3GS的年代，point 和屏幕上的像素是完全一一对应的，即 320 * 480 (points), 也是 320 * 480 (pixels)
渲染像素（Rendered Pixels）：
Rendered Pixels: 渲染像素，以 point 为单位的绘制最终都会渲染成 pixels，这个过程被称为光栅化。基于 point 的坐标系乘以比例因子可以得到基于像素的坐标系，高比例因子会使更多的细节展示，目前的比例因子会是 1x，2x，3x
物理像素（Physical Pixels）:
Physical Pixels: 物理像素，就是设备屏幕实际的像素
设备屏幕的物理长度（Physical Device）：
Physical Device: 设备屏幕的物理长度，使用英寸作为单位。比如iPhone 4屏幕是3.5英寸，iPhone 5 是4英寸，iphone 6是4.7英寸，这里的数字是指手机屏幕对角线的物理长度。实际上会是Physical Pixels的像素值(而不是Rendered Pixels的像素值)会渲染到该屏幕上, 屏幕会有 PPI(pixels-per-inch) 的特性，PPI 的值告诉你每英寸会有多少像素渲染。

如果使用物理像素

来看一下，一个100px的正方形在不同手机下的打开的效果。
在这里插入图片描述
iPhone 3GS和iPhone 4的屏幕大小一样，但是iPhone 4的像素密度是iPhone 3GS的2两倍。所以一样100px的正方形，在iPhone 4上看起来像是缩小了一倍。在iPhone 4和iPhone 6上的显示大小是一样的。

如果使用点

00pt的正方形在不同手机下打开的效果是如何的。
在这里插入图片描述

1.2 1x、2x、3x的含义

屏幕模式，描述的就是屏幕中一个点有多少个 Rendered Pixels 渲染，对于2倍屏(又称 Retina 显示屏)，会有 2 * 2 = 4 个像素的面积渲染，对于3倍屏(又称 Retina HD 显示屏)，会有 3 * 3 = 9 个像素的面积渲染。

iOS 开发中，所有控件的坐标以及控件大小都是以点为单位的，假如我在屏幕上需要展示一张 20 * 20 (单位：point)大小的图片，那么设计师应该怎么给我图呢？这里就会用到屏幕模式的概念，如果屏幕是 2x，那么就需要提供 40 * 40 (单位: pixel)大小的图片，如果屏幕是 3x，那么就提供 60 * 60 大小的图片。

2x屏幕的设备会自动加载 xxx@2x.png 命名的图片资源，3x屏幕的设备会自动加载 xxx@3x.png 的图片, 现在基本没有 1x屏幕的设备了，可以不用提供这个分辨率的图片了。

2、适配的过程

我们以iPhone 6的例子来看看适配的过程。

2.1 从UI到开发

开发实际使用的单位是pt。而UI给出的视觉稿是以px为单位的。所以，首先需要将px转化成pt。
在这一步，要搞清楚UI给出的视觉稿以什么分辨率作为基准。如果是iPhone 6的640 × 960px，则用@2x作为缩放因子。如果是iPhone 6 Plus的1242 × 2208px（注意，不是1080 × 1920px），则用@3x作为缩放因子。

假设以iPhone 6作为基准，需要绘制一个40px的按钮。以@2x进行缩放，开发以20pt进行绘制。
在这里插入图片描述