随着iphone每年的更新换代,作为ios程序猿也有了幸福的烦恼,不得不考虑各种屏幕的适配。
首先,我们从iphone的历史说起,初代iphone(iphone 3GS)屏幕320 x 480
像素。那个时候也只是支持绝对定位。比如一个按钮(x, y, width, height) = (20, 30, 40, 50),就表示它的宽度是40像素,高度是50像素,放在(20, 30)像素的位置。
随着iphone4 发布,率先采用Retina显示屏,在屏幕的物理尺寸不变的情况下,像素成倍增加,达到640 x 960
像素。
这样就出现一个问题,怎么让原有的App运行在新的手机上面?iPhone手机一个优势,就是有众多优秀的App,假如不兼容原有的App,就相当于放弃这个得来不易的优势,是很不明智的。
每当iPhone的屏幕有所变化,比如iPhone 3GS过渡到iPhone 4, iPhone 4过渡到iPhone 5, iPhone 5过渡到iPhone 6,苹果公司都需要想办法来解决上述的兼容问题。
为了运行之前的App,引入一个新的概念point(点)
。点这个概念在iOS开发中十分重要,而实际用户很少关注。iPhone 4屏幕尺寸继续保持320 x 480,不过单位并非是像素,而是点
。
在iPhone 3GS中,1个点等于1个像素
。也就是说,点跟像素可以直接互换。
在iPhone 4中,1个点等于2个像素
。
这篇文章中,我将点和像素当成一维的长度单位,而非二维的面积单位,这样对于我来说更自然些,因此1个点等于2个像素。别的文章中可能会说1个点等于4个像素,其实是指1个点占据了4个像素的面积,这样也没有说错,注意上下文语境。
iPhone 4和iPhone 3GS的屏幕尺寸实际上是一样的,都是3.5英寸。同样一个点,实际上看起来是一样的。只是iPhone 4在单位英寸上像素更多,看起来更细腻。
开发iOS的时候,使用点作为基本单位会更加方便。列表对比
这里的屏幕模式可以初步理解成,一个点等于多少个像素。2x,就是1个点等于2个像素
。
总结一下单位
手机屏幕的物理长度,使用英寸作为单位。比如iPhone 4屏幕是3.5英寸,iPhone 5 是4英寸,iphone 6是4.7英寸,这里的数字是指手机屏幕对角线的物理长度。
屏幕像素,比如iPhone 3GS屏幕是320 x 480像素,iPhone 4是640 x 960像素,这里的像素可以想象成屏幕上真正用来显示颜色的发光小点。
点,开发App时候使用的单位,是一个虚拟的单位,并非实际存在的,因此点有时也叫虚拟点。点这个单位,用于屏蔽各个屏幕设备的不同,兼容以前的程序。
每英寸有多少个像素,称为ppi(pixel per inch)。iPhone 4的屏幕是640 x 960像素,3.5英寸,我们没有宽高的实际尺寸,就按照对角线来粗略计算它的ppi。将像素当做长度单位,根据勾股定理,对角线就是1154像素。屏幕对角线的实际长度为3.5英寸,也就是1154像素除以3.5英寸,得出330ppi。而官方给出的数字是326ppi。当像素太密,超过300ppi的时候,人眼也就不能区分出每个像素。因此iPhone 4的屏幕叫作Retina显示屏。Retina在英文中,是视网膜的意思。
iPhone 4之后(x, y, width, height) = (20, 30, 40, 50),就表示高度为40个点,宽度为50个点,放在(20, 20)个点的位置。这种处理方法,将之前以像素作为单位自动转换成以点作为单位,使得iPhone 3GS的应用程序,不用修改也可运行在iPhone 4上面。
文字,颜色等是矢量数据,放大不会失真
。原有的iPhone 3GS程序,在iPhone 4上面运行,文字显示也十分清晰。
而图片并非矢量数据
,处理方式有所不同。假设图片 example.png,大小为 30 x 40像素(这里的单位是像素,数字图片的单位通常都为像素)。当这张example.png在iPhone 3GS和iPhone 4中使用时候,都占据屏幕上30 x 40个点。而因为iPhone 4中1个点等于2个像素,也就是30 x 40像素的图片,占据了60 x 80像素的屏幕,因此这图片在iPhone 4中看起来就会模糊。
开发的时候,为使得图片清晰,需要进行图片适配。这时需要准备两张内容相同的图片,放在同一目录下。
example.png // 30 x 40像素example@2x.png // 60 x 80像素
当程序中使用example.png的时候,会根据屏幕模式自动选择对应的图片。屏幕1x模式,就会选择example.png, 2x模式就会优先选择example@2x.png,假如example@2x.png不存在,就选择example.png。
图片跟屏幕一样,也有1x模式,2x模式。在iPhone 6 Plus中,还出现3x模式,原理是一样的。
当iPhone 4选中example@2x.png的图片,就会生成一张大小为30 x 40个点,2x模式的图片。这个时候,图片看起来就会很清晰了。而没有适配的旧程序,example@2x.png不存在,就选中example.png,生成大小为30 x 40个点,1x模式的图片,看起来比较模糊。但它们占据的屏幕点数是一样的。
2012, iphone 5发布
跟iPhone 4做比较, iPhone 5的宽度保持不变。高度增加568 - 480 = 88个点。
在iOS开发中,44这个数字比较特殊
。iOS界面指南写着,人类的手指有一定大小,点击区域低于44个点的时候
,就难以点中。44的两倍就是88。
当原有程序没有适配iPhone 5的时候,也可以正常运行,但多出来的88个点将会将会被自动均分为上下两部分,使得上下出现黑边
2014年,iPhone 6, iPhone 6 Plus发布后,情况又有新的变化。再次比较所有iPhone机型。