iOS 的 APP 在系统中如何适配不同的屏幕的尺寸
2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素。下文也是按照宽度,高度的顺序排列。这个分辨率一直到iPhone 3GS也保持不变。
那时编写iOS的App(应用程序),只支持绝对定位。比如一个按钮(x, y, width, height) = (20, 30, 40, 50),就表示它的宽度是40像素,高度是50像素,放在(20, 30)像素的位置。
iPhone 4
2010年,iPhone 4发布,率先采用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模式的图片,看起来比较模糊。但它们占据的屏幕点数是一样的。
iPhone 5
2012年,苹果发布iPhone 5。我们将所有机型对比,依然采用点作为单位。
跟iPhone 4做比较, iPhone 5的宽度保持不变。高度增加568 - 480 = 88个点。
在iOS开发中,44这个数字比较特殊。iOS界面指南写着,人类的手指有一定大小,点击区域低于44个点的时候,就难以点中。44的两倍就是88。
当原有程序没有适配iPhone 5的时候,也可以正常运行,但多出来的88个点将会将会被自动均分为上下两部分,使得上下出现黑边。我找不到好看的图片。
那么怎样才能告诉iOS系统,应用程序已经适配了iPhone 5呢?在这里,我们先扯开一下,谈一下启动图片。
点击主屏幕的图标,进入App的时候,会立即显示一张图片,这张图片就是启动图片(Launch Image)。App在正式启动的时需要做一些初始化处理,这通常比较费时。先出现启动图片,可以使用户觉得系统立即有响应,减少等待的焦虑感。
每个机型,比如同时支持iPhone和iPad的程序,需要分别为iPhone跟iPad指定启动图片。当旧的iPhone 4的程序,运行在iPhone 5上面,没有iPhone 5的启动图片,就采用兼容模式,上下留黑边。当为iPhone 5指定了新的启动图片,系统就认为这个应用程序是已经适配了iPhone 5的,上下就不会留黑边了。下面是微信启动图片,应该都很熟悉了。
微信启动图片中出现的那个地球,叫蓝色弹珠(The Blue Marble),是在1972年12月7日由阿波罗17号太空船的船员所拍摄的。这张照片当年很震撼,是普通人第一次可以通过照片直接看到地球的全貌。见问题为什么微信启动界面的地球图片没有转到中国这部分?这是否有损用户体验?
微信的启动图,为适配iPhone 5,相比与iPhone 4, 很明显狭长了。
典型iPhone应用程序(游戏除外),很多是上面一个导航栏,下面一个工具栏或者标签栏, 中间一大块用于显示的内容区。iPhone 5拉长了,对于程序的适配,也不算麻烦,内容区的内容基本是动态生成的。适配时候可以简单上下不变,中间的内容区拉长就行了。注意,导航栏和工具栏的高度也是44个点。下面是同一程序,在iPhone 4跟iPhone 5的对比。
AutoLayout
到了这个时候,传统绝对定位的弱点就显露出来了。这时iPhone按照点作为单位,已经出现了两种不同尺寸的屏幕,算上iPad, 就有3种尺寸(有些App可以同时兼容iPhone和iPad,称为Universal)。
从iOS 6系统发布后,iOS开发中可以采用一种AutoLayout的技术。AutoLayout就像网页一样,指定View,Button,Text之间的相对位置,比如靠左多少,靠右多少,居中多少等等。举个例子,像下面的简单布局。
假设左上角的区域为view1, 右上角的区域为view2, 下面的区域为view3。AutoLayout会说:
view1.left = 20 // View1的左边距离边界20个点
view1.top = 20 // View1的上边距离边界20个点
view2.right = 20 // View2的右边距离边界20个点
view2.top = 20 // View2的上边距离边界20个点
view2.left = view1.right + 20 // View2的左边距离View1右边20个点
view2.width = view1.width // View1的宽度等于View2的宽度
view2.height = view1.height // view1高度等于view2高度
view3.left = view1.left // view3的跟view1左对齐
view3.right = view2.right // view3跟view2右对齐
view3.top = view1.bottom + 20 // view3的上边距离view1下边20个点
view3.bottom = 20 // view3下边距离边界20个点
view3.height = view1.height // view3高度等于view1高度
指定上面的约束条件后,AutoLayout就会自动算出对应的布局。上面我写得比较繁琐,事实上很多操作都是可以使用鼠标拖拉来指定的,并不一定需要使用代码。但就算用代码,也有简写的方法。下面是在xib中,拖拉鼠标指定约束时的界面。
而绝对定位,会直接说
view1.frame = (x1, y1, width1, height1)
view2.frame = (x2, y2, width2, height2)
view3.frame = (x3, y3, width3, height3)
绝对定位并非指定约束条件,而是开发者自己来精确指定View,Button, Text等的实际坐标大小。
对于一个屏幕,绝对定位可能跟AutoLayout的区别不算大,甚至绝对定位会更方便些。但当需要同时适配多个屏幕,AutoLayout根本不需要更改。而绝对定位就需要根据屏幕大小,一个个算出来。比如横屏,在AutoLayout下面,就自动变成。
这里不过是3个控件的布局,当出现的控件数越多,屏幕尺寸越多,AutoLayout的优势就显露出来了。另外AutoLayout有个好处是容易支持多语言,不同语言下,同一个意思文字的长度是不同的,使用AutoLayout也可以自动适配。
在iOS 6的时候,AutoLayout还比较少人使用,当时屏幕尺寸还比较少。iOS 7的时候,就开始很多人使用了。而到现在iOS 8了, 更加上iPhone 6, iPhone 6 Plus需要适配,AutoLayout大势所趋,不用不行了。
iPhone 6, iPhone 6 Plus
2014年,iPhone 6, iPhone 6 Plus发布后,情况又有新的变化。再次比较所有iPhone机型。
屏幕尺寸再度分裂。但是我们比较iPhone 5 跟 iPhone 6的宽高比例。
可以看出,iPhone 6跟iPhone 5虽然屏幕尺寸改变了,但是它们的比例是不变的。都是 9 ÷ 16 = 0.5625 的屏幕。
当旧的iPhone 5程序运行在iPhone 6上面,假如没有经过适配。旧程序自动等比放大,铺满新手机,旧程序也可以正常运行。这种方案可算是自动适配。但因为旧程序拉伸了,整体看起来有点虚,也不能更好利用大屏空间。
当需要开发者手动适配的时候,跟iPhone 4过渡到iPhone 5一样,在新程序中,指定一张新的启动图片。当指定了启动图,屏幕分辨率就已经变成应有的大小,这时候利用AutoLayout进行布局,同一份代码,就可以支持多个机型。新手机的屏幕更大,有更多的虚拟点,可以显示更多的内容。
值得注意一点是,iPhone 6 Plus。它的宽高是414 × 736个点,3x模式,理想上来说,应该有1242 × 2208像素。但iPhone 6 Plus的实际像素是 1080 × 1920,是比理想值要少一点的。iPhone 6 Plus的处理方式是将程序整体稍微缩小一点。分辨率很高,这点区别,实际上也看不出来。
那为什么需要这样做呢?上面表格中iPhone 6, iPhone 6 Plus屏幕宽高的逻辑点的数字是怎么来的?下面我猜测一下原因,但不能证实。
先看iPhone 6,这个比较简单。iPhone 6的屏幕宽高比例跟iPhone 5一样,使用对角线来计算,就是放大了4.7 ÷ 4 = 1.175倍。用这个数字,乘以iPhone 5的320 x 568个点,忽略误差,差不多就是iPhone 6屏幕的375 x 667个点。这里需要注意,屏幕宽高比例一样,才能使用对角线来计算。
按照上面的方式来计算iPhone 6 Plus, 应该是得到440 x 781个点,实际上却是414 × 736个点。这里我猜测是因为,iPhone 6 Plus屏幕明显更大,相同尺寸的点放在大的屏幕上面,会使得人感觉尺寸变小,所以就将每个点的实际尺寸放大一些,从而得到更少的点数目。人眼看东西会有种错觉,并非是孤立的看的,而是跟周围的环境作比较。
确定了点数目之后,再确定了像素1080 × 1920(很多高清电视就是这个尺寸),应该是1080/414=2.6x,但2.6x这个数字开发就太麻烦了,就按照3x来处理。其实假如像素达到1242 × 2208,3x下也可以精确到1:1, 这样会更好。但现今的技术在考虑电池,处理器,屏幕尺寸等综合因素下,很可能达不到这样的细腻程度。
上述只是猜测,我相信那些手机参数是经过反复考虑再确定的。iPhone 6 Plus这个处于手机跟平板中间地带的产物经过不少特殊处理。
由分析可以看到,慢慢的为了适配多个机型,程序的启动图片也逐渐增多,为解决这个问题。iOS 8之后,可以使用xib来搭建启动界面,这样就可以同一个启动界面,适配多个机型,减少启动图片占用的空间。
建议
以后的应用程序,都使用AutoLayout, 不要再用绝对定位。
使用类似网页的方式来设计界面。
设计师好,程序员也好,尽量使用点这个单位进行思考,而不要使用像素。比如,你需要做44 x 66个点的按钮,2x模式,就乘以2, 3x模式就乘以3。这样的思考方式可以大致估计到真实的物理长度。44个点,就是手机上导航栏,工具栏的高度。假如用像素思考,容易使得做出的图片过大或者过小。
非矢量素材,就可以做尺寸最大的,之后再进行缩小。比如你需要兼容3x的屏幕,就直接做最高那种图片。
而当使用Flash之类的矢量工具来做素材的时候,应该直接做点那个尺寸。比如44 x 66个点的按钮。就建立一个44 x 66的场景。之后再导出成2倍图,3倍图,因为矢量放大不失真。不要建立一个3x的场景,导出成大图片,再进行缩小,这样就容易失真。更理想的是直接使用矢量图。
假如是那种导航栏,工具栏之类的背景图,需要横跨整个屏幕。可以只切一小块,让程序拉伸,拉伸方式是保持两边的像素不动,只拉伸最中间的一列像素。需要拉伸的话,横方向就不要出现一些渐变色。
按钮的点击区域,不应该少于44个点,就算按钮的图片看起来比较小,也应该使得点按钮周围的透明区也有反应。
可以按照你当前最方便测试机子的型号来做一些主要预览图,效果图。比如你手头有iPhone 5,可以按照iPhone 5的尺寸,320 x 568个点,需要兼容iPhone 6 Plus,就使用3x的模式。这样方便将图片放进手机里面看实际的效果。有多个测试机,就选较大的,之后再进行一些细调。假如支持iPhone 6 Plus的横屏模式,需要另外处理。
上面说的是应用的处理方式,游戏会有些特殊。现在很多游戏,按照1136 x 768的像素尺寸来设计场景,这样可以同时兼容iPad和iPhone,并只使用一份图。iPad 1x模式下尺寸是1024 x 768像素,iPhone 5在2x模式下,是1136 * 640像素。这种尺寸,可以将场景居中显示,各自将场景拉伸到最大。
标签:
电话:15807728906(微信同号)
Q:807003562
- 安卓弹出对话框——Alertdialog(一) 2014-07-10
- 无处不在,详解iOS集成第三方登录(SSO授权登录<无需密码>) 2014-08-06
- iOS之浅谈纯代码控制UIViewController视图控制器跳转界面的几种方法 2015-02-09
- Android Studio 连接真机不识别 2015-02-11
- Android Studio 安装及常见问题 2015-02-17
- win7系统电脑连接小米蓝牙音箱 2015-03-08
- Mac下获取AppStore安装包文件路径 2015-03-11
- Windows下AndroidStudio 中使用Git(AndroidStudio项目于GitHub关联) 2015-03-12
- iOS 中KVC、KVO、NSNotification、delegate 总结及区别 2015-03-13
- 浅谈h5移动端页面的适配问题 2015-03-14
iOS 的 APP 在系统中如何适配不同的屏幕的尺寸的更多相关文章
- Android应用图标微技巧,8.0系统中应用图标的适配
现在已经进入了2018年,Android 8.0系统也逐渐开始普及起来了.三星今年推出的最新旗舰机Galaxy S9已经搭载了Android 8.0系统,紧接着小米.华为.OV等国产手机厂商即将推出的 ...
- iOS系统中导航栏的转场解决方案与最佳实践
背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
- 在MacOS和iOS系统中使用OpenCV
在MacOS和iOS系统中使用OpenCV 前言 OpenCV 是一个开源的跨平台计算机视觉库,实现了图像处理和计算机视觉方面的很多通用算法. 最近试着在 MacOS 和 iOS 上使用 OpenCV ...
- [转]在MacOS和iOS系统中使用OpenCV
OpenCV 是一个开源的跨平台计算机视觉库,实现了图像处理和计算机视觉方面的很多通用算法. 最近试着在MacOS和iOS上使用OpenCV,发现网上关于在MacOS和iOS上搭建OpenCV的资料很 ...
- iOS App上传中遇到的问题
1. 今天打包上传文件时出现“Missing iOS Distribution signing identity for XXXX” 导致问题的原因是:下边这个证书过期了 以下是苹果官方给出的回应: ...
- IOS系统中使用zepto的live事件绑定不了的一个办法
IOS系统中使用zepto的live事件绑定不了的一个办法: 对事件对象添加样式:cursor:pointer
- wemall doraemon中Android app商城系统工具集合类,包含各种程序中用到的静态方法
wemall doraemon中Android app商城系统工具集合类,包含各种程序中用到的静态方法,可用于其他商城或者系统的编程参考 package cn.zzu.edu.wemall.utils ...
- ios系统中各种设置项的url链接
ios系统中各种设置项的url链接 在代码中调用如下代码:NSURL*url=[NSURL URLWithString:@"prefs:root=WIFI"];[[UIApplic ...
- ios安装app提示【未受信任的企业级开发者】。在设置中信任此开发者
最近在测试app,ios安装app后点击提示如下图: 解决方法: 1 点击 [设置] >[通用] >[设备管理] 2 点击企业级应用 > 信任该开发者 > 信任.设置之后 ...
随机推荐
- ExpandableList列表的简单应用
package com.test;//Download by http://ww.codefans.netimport java.util.ArrayList;import java.util.Has ...
- HttpClient 发送 HTTP、HTTPS 请求的简单封装
import org.apache.commons.io.IOUtils; import org.apache.http.HttpEntity; import org.apache.http.Http ...
- RequireJS入门(三)
这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...
- QML设计登陆界面
QML设计登陆界面 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:Qt5.2 说明: 用QML设计一个应用的登陆界面 ...
- Linux下Redis的安装、配置操作说明
Redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类keyvalue存储的不足,在部分场合可以对关系数据库起到很好的补充作用.它提供了Pytho ...
- CentOS6.3(64位)下安装Oracle11gR2(64)服务器
安装环境 Linux服务器:Centos6.3 64位 Oracle服务器:Oracle11gR2 64位 系统要求 1.Linux安装Oracle系统要求 系统要求 说明 内存 必须高于1G的物理内 ...
- POJ 2502 Subway(迪杰斯特拉)
Subway Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6692 Accepted: 2177 Descriptio ...
- 设计模式14---设计模式之命令模式(Command)(行为型)
1.场景模拟 请用软件模拟开机过程 按下启动按钮 然后电源供电 主板开始加电自检 BIOS依次寻找其他设备的BIOS并且让他们初始化自检 开始检测CPU,内存,光盘,硬盘,光驱,串口,并口,软驱即插即 ...
- 记录一下自己总结出来的,在内网环境下使用maven打包的各种方法,包括各种常用的打包方式(一)
(一)内外网代理仓库搭建 想了一下,先用这个MAVEN安装部署的说明随笔,作为自己的第一篇技术帖,往后会陆陆续续将自己研究的心得发出来,留下脚印.希望有大神可以指点 一 .文章主要解决问题说明 1) ...
- HID Keyboard & Mouse descriptor.
在USB中,USB HOST是通过各种描述符来识别设备的,有设备描述符,配置描述符,接口描述符,端点描述符,字符串描述符,报告描述符等等.USB报告描述符(Report Descriptor)是HID ...