ios开发过程中屏幕尺寸,分辨率及其比例等等之间的关系?一次性详尽,清晰介绍,以饷入门者
根据屏幕尺寸和分辨率,ios现在数起来有6个版本。 一,3GS;二,4s为代表;三,iphone5;四,ipad2为代表;五,ipad4为代表;六,ipad mini。 只是分辨率不一样的情况,如一二或者四五相比,开发时提供两种分辨率就可以了,应用自动识别? 只是尺寸不一样的情况,如四六相比,开发时完全没有影响? 分辨率以及尺寸都不一样的情况,如二三相比,又如何?
想想刚开始做 iOS 开发的时候也有类似的疑问,于是做了回答,希望这个对初学者有帮助:
- 普通屏
320像素 x 480像素 iPhone 1、3G、3GS,iPod Touch 1、2、3 - 3:2 Retina 屏
640像素 x 960像素 iPhone 4、4S,iPod Touch 4 - 16:9 Retina 屏
640像素 x 1136像素 iPhone 5,iPod Touch 5 - 普通屏
768像素 x 1024像素 iPad 1, iPad2,iPad mini - Retina屏
1536像素 x 2048像素 New iPad,iPad 4
- 问一:只是分辨率不一样的情况,如一二或者四五相比,开发时提供两种分辨率就可以了,应用自动识别?
答:
在 iPhone 5 跟 iPod Touch 5 没出之前,对于开发者来说,一二就是分辨率不同的区别而已,因为他们都是3.5寸的屏幕。并且,你细心的话会注意到,一二他们的分辨率是成倍的关系。 这给 iOS 的设计和开发都提供了方便,界面设计只需要设计一套,然后进行等比例放大缩小即可。
为了方便开发人员开发,iOS 中统一使用点(Point)对界面元素的大小进行描述。
所以对于一跟二,只需把屏幕大小都当成 320 x 480点
进行开发即可,点跟像素的换算关系如下:
普屏 : 1点 = 1像素
Retina屏 : 1点 = 2像素
iPad 上的开发也是这样,只需根据 768 x 1136点
320 x 568点
,你只需根据这个大小去调整你的界面(如果需要调整的话)。 比如:我有一个按钮,要放在屏幕中间的位置,那么在界面大小为 320 x 480点 的设备上,只需设置它的 center 为 (320/2, 480/2) 即可,在 3:2 Retina 屏上系统这个按钮也可以正确的显示在中间;
而在屏幕大小为 320 x 568点 的设备上,你就设置它的 center 为 (320/2, 568/2)。
直接通过 [[UIScreen mainScreen] bounds]
- 问二:只是尺寸不一样的情况,如四六相比,开发时完全没有影响?
答:
开发时只需要关注分辨率即可,iPad 2 跟 iPad mini 屏幕尺寸不同,但是分辨率一致,所以完全没有影响,在 iPad 2 上可正常跑的 app,在 iPad mini 上也可正常跑。
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设计时用的点与分辨率的关系
点(Point)对界面元素的大小进行描述,例如:
iPhone/iPod Touch
界面描述 320点 x 480点
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应用常用图标的命名规范
可以参考下面两个文档:
请务必按照文档中描述的规范进行图标的命名!!
PS:一些额外的图标参考
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个像素
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设计时用的点与分辨率的关系
点(Point)对界面元素的大小进行描述,例如:
iPhone/iPod Touch
界面描述 320点 x 480点
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应用常用图标的命名规范
可以参考下面两个文档:
请务必按照文档中描述的规范进行图标的命名!!
PS:一些额外的图标参考
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个像素