2018 January 16 iOS小知识

锦集02-iOS中的像素与点

1.iOS中的像素与点

像素(Pixel)和点(Point)

  1. px:pixel像素,屏幕上显示的最小单位
  2. pt:point点,是一个标准的长度单位,1pt＝1/72inch

  3. PPI(DPI):pixel per inch像素密度PPI,指每英尺的像素数,表示了清晰度

     1inch＝2.54cm =25.4mm

iPhone中的像素

  1. 在iOS中,point独立于物理设备的逻辑坐标单位.
  2. iPhone 4之前non-retina屏幕的设备,一个point就代表一个像素;
  3. 从iPhone 4到iPhone 7,采用retina屏幕;一个point,代表2X2个像素;
  4. Plus的设备,一个point代表3X3个像素。
  5. 更详细文章查看这篇文章

iPhone系列的屏幕

图1

  1. 分析:
    1. 这里的屏幕模式可以初步理解成，一个点等于多少个像素。2x，就是1个点等于2个像素。
  2. 单位总结
    1. 手机屏幕的物理长度，使用英寸作为单位。比如iPhone 4屏幕是3.5英寸，iPhone 5 是4英寸，iphone 6是4.7英寸，这里的数字是指手机屏幕对角线的物理长度。
    2. 屏幕像素，比如iPhone 3GS屏幕是320 x 480像素，iPhone 4是640 x 960像素，这里的像素可以想象成屏幕上真正用来显示颜色的发光小点。
    3. 点，开发App时候使用的单位，是一个虚拟的单位，并非实际存在的，因此点有时也叫虚拟点。点这个单位，用于屏蔽各个屏幕设备的不同，兼容以前的程序。
    4. 每英寸有多少个像素，称为ppi(pixel per inch)。
    5. iPhone 4的屏幕是640 x 960像素，3.5英寸，我们没有宽高的实际尺寸，就按照对角线来粗略计算它的ppi。将像素当做长度单位，根据勾股定理，对角线就是1154像素。屏幕对角线的实际长度为3.5英寸，也就是1154像素除以3.5英寸，得出330ppi。而官方给出的数字是326ppi。当像素太密，超过300ppi的时候，人眼也就不能区分出每个像素。因此iPhone 4的屏幕叫作Retina显示屏。Retina在英文中，是视网膜的意思。
iPhone屏幕的历史
  1. <iPhone 3GS:
    1. 2007年，初代iPhone发布，屏幕的宽高是 320 x 480 像素,这个分辨率一直到iPhone 3GS也保持不变。
    2. 那时编写iOS的App(应用程序)，只支持绝对定位。比如一个按钮(x, y, width, height) = (20, 30, 40, 50)，就表示它的宽度是40像素，高度是50像素，放在(20, 30)像素的位置。
  2. iPhone 4
    1. 2010年，iPhone 4发布，率先采用Retina显示屏，在屏幕的物理尺寸不变的情况下，像素成倍增加，达到 640 x 960 像素。
    2. 这样就出现一个问题，怎么让原有的App运行在新的手机上面？
      1. 为了运行之前的App，引入一个新的概念point(点)。点这个概念在iOS开发中十分重要。iPhone 4屏幕尺寸继续保持320 x 480，不过单位并非是像素，而是点。
      2. 在iPhone 3GS中，1个点等于1个像素。也就是说，点跟像素可以直接互换。
      3. 在iPhone 4中，1个点等于2个像素。
      4. 注意: 这篇文章中，我将点和像素当成一维的长度单位，而非二维的面积单位，这样对于我来说更自然些，因此1个点等于2个像素。别的文章中可能会说1个点等于4个像素，其实是指1个点占据了4个像素的面积，这样也没有说错，注意上下文语境。
    3. iPhone 4和iPhone 3GS的屏幕尺寸实际上是一样的，都是3.5英寸。同样一个点，实际尺寸看起来是一样的。只是iPhone 4在单位英寸上像素更多，看起来更细腻。
    4. iPhone 4之后(x, y, width, height) = (20, 30, 40, 50)，就表示高度为40个点，宽度为50个点，放在(20, 20)个点的位置。这种处理方法，将之前以像素作为单位自动转换成以点作为单位，使得iPhone 3GS的应用程序，不用修改也可运行在iPhone 4上面。
    5. 文字，颜色等是矢量数据，放大不会失真。原有的iPhone 3GS程序，在iPhone 4上面运行，文字显示也十分清晰。
    6. 而图片并非矢量数据，处理方式有所不同。
      1. 假设图片 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中看起来就会模糊。

      2. 开发的时候，为使得图片清晰，需要进行图片适配。这时需要准备两张内容相同的图片，放在同一目录下。

         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。
      3. 图片跟屏幕一样，也有1x模式，2x模式。在iPhone 6 Plus中，还出现3x模式，原理是一样的。
      4. 当iPhone 4选中example@2x.png的图片，就会生成一张大小为30 x 40个点，2x模式的图片。这个时候，图片看起来就会很清晰了。而没有适配的旧程序，example@2x.png不存在，就选中example.png，生成大小为30 x 40个点，1x模式的图片，看起来比较模糊。但它们占据的屏幕点数是一样的。
  3. iPhone 5
    1. 2012年，苹果发布iPhone 5,依然采用点作为单位。
    2. 跟iPhone 4做比较, iPhone 5的宽度保持不变。高度增加568 - 480 = 88个点。
    3. 在iOS开发中，44这个数字比较特殊。iOS界面指南写着，人类的手指有一定大小，点击区域低于44个点的时候，就难以点中。44的两倍就是88。
    4. 当原有程序没有适配iPhone 5的时候，也可以正常运行，但多出来的88个点将会将会被自动均分为上下两部分，使得上下出现黑边。我找不到好看的图片。
      1. 当旧的iPhone 4的程序，运行在iPhone 5上面，没有iPhone 5的启动图片，就采用兼容模式，上下留黑边。
      2. 当为iPhone 5指定了新的启动图片，系统就认为这个应用程序是已经适配了iPhone 5的，上下就不会留黑边了。
    5. AutoLayout的出现
      1. 到了这个时候，传统绝对定位的弱点就显露出来了。这时iPhone按照点作为单位，已经出现了两种不同尺寸的屏幕，算上iPad, 就有3种尺寸（有些App可以同时兼容iPhone和iPad，称为Universal）。
      2. 从iOS 6系统发布后，iOS开发中可以采用一种AutoLayout的技术。AutoLayout就像网页一样，指定View，Button，Text之间的相对位置，比如靠左多少，靠右多少，居中多少等等
      3. 在iOS 6的时候，AutoLayout还比较少人使用，当时屏幕尺寸还比较少。iOS 7的时候，就开始很多人使用了。而到现在iOS 8了, 更加上iPhone 6, iPhone 6 Plus需要适配，AutoLayout大势所趋，不用不行了。
  4. iPhone 6, iPhone 6 Plus
    1. 2014年，iPhone 6, iPhone 6 Plus发布后，情况又有新的变化.

    2. 屏幕尺寸再度分裂。但是我们比较iPhone 5 跟 iPhone 6的宽高比例。 图1

      1. 可以看出，iPhone 6跟iPhone 5虽然屏幕尺寸改变了，但是它们的比例是不变的。都是 9 ÷ 16 = 0.5625 的屏幕。
      2. 当旧的iPhone 5程序运行在iPhone 6上面，假如没有经过适配。旧程序自动等比放大，铺满新手机，旧程序也可以正常运行。这种方案可算是自动适配。但因为旧程序拉伸了，整体看起来有点虚，也不能更好利用大屏空间。
      3. 当旧的iPhone 5程序运行在iPhone 6上面，假如没有经过适配。旧程序自动等比放大，铺满新手机，旧程序也可以正常运行。这种方案可算是自动适配。但因为旧程序拉伸了，整体看起来有点虚，也不能更好利用大屏空间。
      4. 值得注意一点是，iPhone 6 Plus。它的宽高是414 × 736个点，3x模式，理想上来说，应该有1242 × 2208像素。但iPhone 6 Plus的实际像素是 1080 × 1920，是比理想值要少一点的。iPhone 6 Plus的处理方式是将程序整体稍微缩小一点。分辨率很高，这点区别，实际上也看不出来。
      5. 那为什么需要这样做呢？上面表格中iPhone 6, iPhone 6 Plus屏幕宽高的逻辑点的数字是怎么来的？下面我猜测一下原因，但不能证实。
      6. 先看iPhone 6，这个比较简单。iPhone 6的屏幕宽高比例跟iPhone 5一样，使用对角线来计算，就是放大了4.7 ÷ 4 = 1.175倍。用这个数字，乘以iPhone 5的320 x 568个点，忽略误差，差不多就是iPhone 6屏幕的375 x 667个点。这里需要注意，屏幕宽高比例一样，才能使用对角线来计算。
      7. 按照上面的方式来计算iPhone 6 Plus, 应该是得到440 x 781个点，实际上却是414 × 736个点。这里我猜测是因为，iPhone 6 Plus屏幕明显更大，相同尺寸的点放在大的屏幕上面，会使得人感觉尺寸变小，所以就将每个点的实际尺寸放大一些，从而得到更少的点数目。人眼看东西会有种错觉，并非是孤立的看的，而是跟周围的环境作比较。
      8. 确定了点数目之后，再确定了像素1080 × 1920(很多高清电视就是这个尺寸)，应该是1080/414=2.6x，但2.6x这个数字开发就太麻烦了，就按照3x来处理。其实假如像素达到1242 × 2208，3x下也可以精确到1:1, 这样会更好。但现今的技术在考虑电池，处理器，屏幕尺寸等综合因素下，很可能达不到这样的细腻程度。
      9. 上述只是猜测，我相信那些手机参数是经过反复考虑再确定的。iPhone 6 Plus这个处于手机跟平板中间地带的产物经过不少特殊处理。
      10. 由分析可以看到，慢慢的为了适配多个机型，程序的启动图片也逐渐增多，为解决这个问题。iOS 8之后，可以使用xib来搭建启动界面，这样就可以同一个启动界面，适配多个机型，减少启动图片占用的空间。

建议

  1. 以后的应用程序，都使用AutoLayout, 不要再用绝对定位。
  2. 使用类似网页的方式来设计界面。设计师好，程序员也好，尽量使用点这个单位进行思考，而不要使用像素。比如，你需要做44 x 66个点的按钮，2x模式，就乘以2, 3x模式就乘以3。这样的思考方式可以大致估计到真实的物理长度。44个点，就是手机上导航栏，工具栏的高度。假如用像素思考，容易使得做出的图片过大或者过小。
  3. 非矢量素材，就可以做尺寸最大的，之后再进行缩小。比如你需要兼容3x的屏幕，就直接做最高那种图片。
  4. 而当使用Flash之类的矢量工具来做素材的时候，应该直接做点那个尺寸。比如44 x 66个点的按钮。就建立一个44 x 66的场景。之后再导出成2倍图，3倍图，因为矢量放大不失真。不要建立一个3x的场景，导出成大图片，再进行缩小，这样就容易失真。更理想的是直接使用矢量图。
  5. 假如是那种导航栏，工具栏之类的背景图，需要横跨整个屏幕。可以只切一小块，让程序拉伸，拉伸方式是保持两边的像素不动，只拉伸最中间的一列像素。需要拉伸的话，横方向就不要出现一些渐变色。
  6. 按钮的点击区域，不应该少于44个点，就算按钮的图片看起来比较小，也应该使得点按钮周围的透明区也有反应。
  7. 可以按照你当前最方便测试机子的型号来做一些主要预览图，效果图。比如你手头有iPhone 5，可以按照iPhone 5的尺寸，320 x 568个点，需要兼容iPhone 6 Plus，就使用3x的模式。这样方便将图片放进手机里面看实际的效果。有多个测试机，就选较大的，之后再进行一些细调。假如支持iPhone 6 Plus的横屏模式，需要另外处理。
  8. 上面说的是应用的处理方式，游戏会有些特殊。现在很多游戏，按照1136 x 768的像素尺寸来设计场景，这样可以同时兼容iPad和iPhone，并只使用一份图。iPad 1x模式下尺寸是1024 x 768像素，iPhone 5在2x模式下，是1136 * 640像素。这种尺寸，可以将场景居中显示，各自将场景拉伸到最大。

相关面试题

  1. CGRectMake(),中的参数单位是什么?
    1. 但是是点(point)

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents