zoukankan      html  css  js  c++  java
  • iOS设备的分辨率

    ios的分辨率(即iphone手机屏幕的分辨率、主屏参数),是一个与硬件相关的参数,如iphone3以前的屏幕分辨率都是320x480,从iphone4开始为640x960 这与开发中ios SDK的版本(3.0、3.2、4.0、4.2、4.3.0、5.0、5.1)等是没什么关系的  Deployment Target  ios sdk  simulator版本  

    都说做iOS开发比Android省心,那么iOS是如何做到这一点的呢?我们今天就来分析一下,希望对做iOS的界面设计的同学有点帮助。

     

    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设计时用的点与分辨率的关系

    尽管有上面列出的4种分辨率情况,不过细心的人会发现,对于Retina屏的分辨率始终保持为普屏的2倍,这对于iOS的设计还是开发的时候提供的 莫大的方便,自然可以想到对于界面设计而言,只需要设计一套,然后进行等比例放大缩小即可。实际进行设计与开发的时候,也确实是这样,Apple为了防止 在交流过程中(尤其对于编程实现)分辨率对思维的迷惑,统一使用点(Point)对界面元素的大小进行描述,例如: 

    iPhone/iPod Touch

    界面描述    320点 x 480点

    iPhone/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应用常用图标的命名规范

    可以参考下面两个文档:

    Apple对此问题的Q&A https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.htm

    Apple的官方说明文档   https://developer.apple.com/library/ios/#qa/qa1686/_index.html

    请务必按照文档中描述的规范进行图标的命名!!

     

    PS:一些额外的图标参考

    a 图标会自动添加高亮效果,如果不需要,可以在plist中明确指定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个像素


    来源:http://www.cnblogs.com/BigPolarBear/archive/2012/03/26/2417777.html

    是为了在iphone4上显示的更清晰...



    因为Phone4采用了一个叫做retina的屏幕,尺寸和老的iphone一样大,但是分辨率提高了4倍,看起高清的图来,爽太多了,根本看不到像素点.
    对 于老的app来说,在iphone4中运行,会自动用4个像素替代原来的一个像素,这样就不用更改代码,使得老app可以自然的在iphone4中运行, 但是UI的效果会有些蒙蒙的,不是最佳的效果,要达到最佳,必须为原来的图片资源,重新设计一份640*960的高清版本,这样才能在iphone4内达 到最佳的UI效果~

    所以,只用给同名的高清图加上@2x这个后缀,用UIImage的imageNamed这个函数调用图片名(未带@2x的),就会自动帮你调用合适的图片,使用起来很方便.

  • 相关阅读:
    UVa 12174 (滑动窗口) Shuffle
    UVa 1607 (二分) Gates
    CodeForces ZeptoLab Code Rush 2015
    HDU 1525 (博弈) Euclid's Game
    HDU 2147 (博弈) kiki's game
    UVa 11093 Just Finish it up
    UVa 10954 (Huffman 优先队列) Add All
    CodeForces Round #298 Div.2
    UVa 12627 (递归 计数 找规律) Erratic Expansion
    UVa 714 (二分) Copying Books
  • 原文地址:https://www.cnblogs.com/cnsec/p/11515862.html
Copyright © 2011-2022 走看看