当前位置: 首页 > 科技观察

iPhone屏幕适配、历史和现状

时间:2023-03-17 23:34:50 科技观察

初代iPhone发布于2007年,屏幕宽高为320x480像素。下面也是按照宽高的顺序排列的。这个分辨率一直保持到iPhone3GS为止。当时在写iOSApp(应用)的时候,只支持绝对定位。例如,一个按钮(x,y,width,height)=(20,30,40,50)表示它的宽度是40像素,它的高度是50像素,它被放置在(20,20)像素处。iPhone42010年,iPhone4发布,率先采用Retina显示屏。虽然屏幕的物理尺寸保持不变,但像素增加了一倍,达到640x960像素。那么问题来了,如何让原来的app在新手机上运行呢?iPhone的优势之一是有许多优秀的应用程序。如果原有的应用不兼容,就等于放弃了这个来之不易的优势,这是非常不明智的。每当iPhone的屏幕发生变化,比如从iPhone3GS过渡到iPhone4,从iPhone4过渡到iPhone5,从iPhone5过渡到iPhone6,苹果都需要想办法解决上述兼容性问题。为了运行之前的App,引入了一个新的概念点。点的概念在iOS开发中非常重要,但实际用户却很少关注。iPhone4的屏幕尺寸继续为320x480,但单位不是像素,而是点。在iPhone3GS上,1点等于1像素。也就是说,点和像素是可以直接互换的。在iPhone4中,1点等于2像素。在本文中,我将点和像素视为一维长度单位而不是二维面积单位,这对我来说更自然,因此1点等于2像素。在其他文章中可能会说1个点等于4个像素,但实际上是指1个点占4个像素的面积。这个没有错,注意语境。iPhone4和iPhone3GS的屏幕尺寸几乎相同,均为3.5英寸。在同一点上,实际大小看起来是一样的。只是iPhone4的每英寸像素更多,看起来更细致。开发iOS时,以点为基本单位更方便。列表比较:这里的屏幕模式可以初步理解为一个点等于多少个像素。2x表示1个点等于2个像素。总结单位手机屏幕的物理长度,以英寸为单位。比如iPhone4的屏幕是3.5英寸,iPhone5是4英寸,iphone6是4.7英寸。这里的数字是指手机屏幕对角线的物理长度。屏幕像素,比如iPhone3GS屏幕是320x480像素,iPhone4是640x960像素,这里的像素可以想象成屏幕上的发光点,实际上是用来显示颜色的。点,开发应用程序时使用的单位,是一个虚拟的单位,实际上并不存在,所以点有时也被称为虚拟点。点击此单元,用于屏蔽各屏设备差异,兼容以往程序。每英寸有多少像素称为ppi(pixelperinch)。iPhone4的屏幕为640x960像素,3.5英寸。我们没有宽高的实际尺寸,所以我们根据对角线粗略计算出它的ppi。以像素为长度单位,根据勾股定理,对角线为1154个像素。屏幕的实际对角线为3.5英寸,或1154像素除以3.5英寸,得到330ppi。官方数字是326ppi。当像素过于密集,超过300ppi时,人眼无法分辨每个像素。这就是为什么iPhone4的屏幕被称为Retina显示屏的原因。Retina是英文视网膜的意思。iPhone4后(x,y,width,height)=(20,30,40,50),表示高40点,宽50点,放在(20,20)点。这种处理方式自动将以像素为单位转换为以点为单位,使iPhone3GS应用程序无需修改即可在iPhone4上运行。文字、颜色等为矢量数据,放大后不会变形。原iPhone3GS程序运行在iPhone4上,文字显示也很清晰。图像不是矢量数据,因此处理方式不同。假设图片example.png大小为30x40像素(这里的单位是像素,数码图片的单位通常是像素)。当这个example.png在iPhone3GS和iPhone4上使用时,它在屏幕上占据30x40点。又因为在iPhone4中1个点等于2个像素,即一张30x40像素的图片占据了60x80像素的屏幕,所以这张图片在iPhone4中会显得模糊。开发时,为了让图片清晰,需要图片适配。这时候需要准备两张内容相同的图片,放在同一个目录下。example.png//30x40pixelsexample@2x.png//60x80pixels在程序中使用example.png时,会根据屏幕模式自动选择对应的图片。如果屏幕是1x模式,example.png会被选中,2x模式会先选中example@2x.png。如果example@2x.png不存在,则选择example.png。和屏幕一样,画面也有1x模式和2x模式。在iPhone6Plus中,也有3x模式,原理是一样的。当iPhone4选择图片example@2x.png时,会生成一张大小为30x40点、2x模式的图片。这时,画面会显得非常清晰。对于没有适配的老程序,example@2x.png是不存在的,所以选择example.png生成一张大小为30x40点,1x模式的图片,看起来比较模糊。但它们占用的屏幕点数相同。iPhone52012年,苹果发布了iPhone5,我们对比所有机型,依然以积分为单位。与iPhone4相比,iPhone5的宽度保持不变。高度增加了568-480=88点。在iOS开发中,数字44比较特殊。iOS界面指南说,人的手指有一定的尺寸,当点击区域低于44点时,很难点击。44的两倍就是88,原来的程序在没有适配iPhone5的情况下,依然可以正常运行,但是多出的88点会自动分为上下两部分,这样上下两部分就会出现黑边。我找不到好图。那么我们如何才能告诉iOS系统该应用程序兼容iPhone5呢?这里,我们拆开来说说启动镜像。点击主屏幕图标,进入App后,会立即显示一张图片,这张图片就是启动图片(LaunchImage)。App在正式启动时需要做一些初始化处理,通常比较耗时。启动画面先出现,可以让用户感受到系统立即响应,减少等待的焦虑感。对于每个机型,比如同时支持iPhone和iPad的程序,需要分别指定iPhone和iPad的启动图片。旧的iPhone4程序在iPhone5上运行时,如果没有iPhone5的启动画面,就会使用兼容模式,上下留黑边。当为iPhone5指定新的启动图片时,系统认为该应用适配iPhone5,上下不会出现黑边。下面是微信启动图,大家应该不陌生。微信启动图中出现的地球,叫做蓝色大理石,是1972年12月7日阿波罗17号飞船的宇航员拍到的。这张照片在当时非常震撼,也是第一次普通人能够直接看到通过照片看地球全貌。看问题为什么微信启动界面的地球图片没有转移到中国部分?这会降低用户体验吗?微信的启动图适配了iPhone5,和iPhone4相比,明显又窄又长。典型的iPhone应用程序(游戏除外),很多在顶部有一个导航栏,在底部有一个工具栏或标签栏,中间有一个很大的内容区域用于显示。iPhone5是加长型的,适配程序并不麻烦。内容区的内容基本上是动态生成的。适配时可以简单的保持top和bottom不变,把中间的contentarea加长即可。注意导航栏和工具栏的高度也是44点。下面是同一个程序在iPhone4和iPhone5上的对比。此时AutoLayout中,传统绝对定位的弱点就暴露出来了。这时候的iPhone以点为单位,出现了两块大小不同的屏幕。算上iPad,一共有3种尺寸(有的app同时兼容iPhone和iPad,称为通用)。iOS6系统发布后,在iOS开发中可以使用AutoLayout技术。AutoLayout就像一个网页,规定了View、Button、Text之间的相对位置,比如靠左多少,靠右多少,居中多少等等。例如,像下面这样的简单布局。假设左上区域是view1,右上区域是view2,下区域是view3。AutoLayout会说:view1.left=20//View1的左侧距离边框20点view1.top=20//View1的上方距离边框20点view2.right=20//View2的rightsideis20pointsawayfromborderview2.top=20//View2的上边缘距离border20pointsview2.left=view1.right+20//View2的左侧距离20points从View1的右边view2.width=view1.width//View1的宽度等于View2的宽度view2.height=view1.height//view1的高度等于view2的高度view3.left=view1.left//view3isleftalignedwithview1view3.right=view2.right//view3isrightalignedwithview2view3.top=view1.bottom+20//view3的上边缘距view1的下边缘20个点view3.bottom=20//view3的下边缘距离borderview3.height=view1.height//view3的高度等于view1的高度指定以上约束后,AutoLayout会计算对应的layoutulated自动。上面写的很麻烦。其实很多操作都可以通过鼠标拖动来指定,不一定需要用代码。但即使有代码,也有捷径。下面是在xib中拖动鼠标指定约束时的界面。对于绝对定位,会直接说view1.frame=(x1,y1,width1,height1)view2.frame=(x2,y2,width2,height2)view3.frame=(x3,y3,width3,height3)绝对定位是没有指定Constraints,而是开发者自己去精确指定View、Button、Text等的实际坐标大小。对于一个屏幕来说,绝对定位可能和AutoLayout差别不大,甚至绝对定位会更方便。但是当需要同时适配多个屏幕时,AutoLayout根本不需要改。绝对定位需要根据屏幕大小一一计算。比如横屏,在AutoLayout下,自动变成:hereisjustalayoutof3controls。当出现的控件数量多了,屏幕尺寸变大的时候,AutoLayout的优势就会显现出来。另外,AutoLayout的优点是很容易支持多种语言。在不同的语言中,同义文本的长度是不同的。使用AutoLayout也可以自动适配。在iOS6中,AutoLayout使用的人还是比较少的,那时候的屏幕尺寸也比较小。iOS7的时候,很多人开始使用它。现在iOS8发布了,iPhone6和iPhone6Plus需要适配。AutoLayout是大势所趋,已经没有必要了。iPhone6和iPhone6Plus2014年,在iPhone6和iPhone6Plus发布后,情况又发生了变化。再次比较所有iPhone型号。屏幕尺寸再次拆分。但是我们再对比一下iPhone5和iPhone6的纵横比,可以看出虽然iPhone6和iPhone5的屏幕尺寸发生了变化,但是比例没有变化。两者都是9÷16=0.5625屏幕。iPhone5旧程序在iPhone6上运行时,如果没有适配,旧程序会自动放大覆盖新机,旧程序也能正常运行。该方案可视为自动适配。但由于老程序拉长了,整体显得有些空洞,无法更好地利用大屏幕空间。当开发者需要手动适配时,就像从iPhone4过渡到iPhone5一样,在新程序中,指定一个新的启动图片。指定启动图像时,屏幕分辨率已变为适当的大小。此时使用AutoLayout进行布局,同一段代码可以支持多种模型。新手机的屏幕更大,虚拟点更多,可以显示更多内容。值得注意的是iPhone6Plus。它的宽和高在3x模式下是414×736点,理想情况下应该是1242×2208像素。但iPhone6Plus的实际像素为1080×1920,比理想值略低。iPhone6Plus处理它的方式是将程序整体缩小一点。分辨率很高,这种差异其实是看不见的。那么为什么需要这样做呢?上表中iPhone6和iPhone6Plus屏幕宽高的逻辑点是怎么来的?现在我猜到了原因,但我无法证实。先来看iPhone6,比较简单。iPhone6屏幕的纵横比和iPhone5一样,用对角线计算,放大4.7÷4=1.175倍。将这个数字乘以iPhone5的320x568点,忽略错误,它与iPhone6屏幕的375x667点大致相同。这里需要注意的是,只有当屏幕的宽高比相同时,才能使用对角线进行计算。按照上面的方法计算iPhone6Plus,应该是440x781点,但实际上是414x736点。我的猜测是iPhone6Plus的屏幕大得多。将相同大小的点放在大屏幕上,会让人觉得尺寸变小了,所以把每个点的实际尺寸放大来变小。点数。人的眼睛看事物有一种错觉,不是孤立地,而是与周围环境相比较。确定点数后,确定像素大小1080×1920(这是很多高清电视的尺寸),应该是1080/414=2.6x,但是2.6x的数字显影太麻烦,所以我们会按照3x处理。事实上,如果像素达到1242×2208,在3x下可以精确到1:1,那就更好了。不过,考虑到电池、处理器、屏幕尺寸等综合因素,如今的技术未必能做到如此细腻的程度。以上只是猜测,相信那些手机参数都是经过反复考虑才确定的。iPhone6Plus,一款介于手机和平板电脑之间的产品,经过了很多特殊处理。分析可以看出,为了适配多机型,程序的启动画面逐渐增多,以此来解决这个问题。iOS8之后可以使用xib来构建启动界面,使得同一个启动界面可以适配多种机型,减少启动图片占用的空间。建议以后的应用使用AutoLayout而不是绝对定位。使用类似网络的方法来设计界面。设计师、程序员尝试以点而不是像素为单位来思考。例如,如果您需要制作一个44x66点按钮,则乘以2为2x模式,乘以3为3x模式。这种思路可以大致估算出真实的物理长度。44点是手机上导航栏和工具栏的高度。如果按照像素来考虑,很容易让图片过大或过小。