iPhone 开发中的屏幕适配问题总结

iPhone 开发中的屏幕适配问题总结

前言

随着iPhone的屏幕越来越多,各种尺寸让开发也需要跟Android一样,要做屏幕适配了。在开发过程中,跟设计师经常因为调整像素而争吵。为了解决这种问题,我写下此文,让开发跟设计可以欢乐的做朋友了。

此文将从以下几个方面出发,解决问题。

  1. iPhone的几种屏幕

  2. iPhone屏幕中的概念

  3. 设计稿到代码的过程

  4. 结合设计原则给出具体的实现方案

iPhone的几种屏幕

iphone 尺寸
iphone 尺寸进化

以上两张图完全介绍了现在所有的iPhone的屏幕。包括即将出现的iphone se它也是4寸屏。

从第一张图中发现,只有6p是3x的图,其余屏幕都是2x图。再次解释一下为什么6p是3x图。因为6p的实际像素是1080 * 1920. 1080 / 414 = 2.6。 但是让设计出一张2.6x的图,那岂不是要疯了。所以,苹果为了方面开发者,做出了3x的标准。然后苹果会自动给你缩放。详见第二张图。

iPhone屏幕中的概念

  1. point(点)

    这个点是一个逻辑概念,是脱离屏幕而存在的。开发在写代码的时候,就用point来确定位置。

    在2x模式下, 1point = 2pixel。

    在3x模式下, 1point = 3pixel。

  2. pixel (像素)

    像素是显示成像的最小单位。个人理解。
    设计给的图的标注,都是按照像素标的。

  3. ppi (pixel per inch)

    解释一下就是每英寸的像素数量。ppi越高,说明屏幕越精细。

  4. inch

    其实这个概念是最好理解的。直译就是英寸。是屏幕的物理单位。但是
    这个确是肉眼最直观的单位,上面说的3种概念,你都不能用肉眼看出来。例如,他说靠左了,那么它的参照物一定是整个屏幕的,这种直观的感觉都可以统一到屏幕的实际大小上来。而且,设计在拿着手机看效果的时候,给他直观的感觉也是以inch论的。

    1 inch = 2.54cm

设计稿到代码的过程

设计稿 --->代码
从一个完整的设计稿,到代码。我们需要以下两种元素的具体标注。

  1. 其实图片,我们需要设计给出对应屏幕模式的图片。2x的,需要在正常像素基础上乘以2。 3x的,需要在正常像素基础上乘以3。

  2. frame,间距

    各种元素间需要间距,元素自身需要frame。设计给的稿的标注一般都是按照像素标注的。而在苹果中的单位是point。所以我们要进行一次换算。如果设计按照2x模式给的标注。那么我们在用的时候就要除以2。按照3x(6p)模式给的标注,那我们得除3,得出相应的point然后再写入代码。

理想状态是设计针对各种模式(2x , 3x),各种屏幕(3.5,4,4.7,5.5)分别做出设计稿。这样就完美了。其实这种方案不仅仅给设计带来的大量的工作量,而对开发也带来了很大的工作量。现在基本的做法都是,设计会针对一种主流的屏幕给出设计稿,然后开发按照上面的说换算完毕后,进行编码。在然后根据具体运行效果做出微调。其实在开发过程中,这些微调是最耗费工时的。

问题来源,设计会根据看到的实际运行效果进行微调。

那么微调,是靠什么感知的呢?当然是肉眼观察。当然,设计的眼睛都可以达到像素级。不过,他们靠的还是感知。

下面我举一个例子:

在屏幕两个View间距10point。那么这个10point,在2x与3x下究竟会不会有很大差别呢?

按照常理推断。10point 在2x下对应 20 pixel。在3x 对应30 pixel。 这样对比的话那简直差别太大了。

其实如果代码里写就是10,不针对2x,3x做区分。那他的效果是啥样的。

既然设计靠肉眼去看,那么咱们就统一换算乘inch,这种最接近肉眼的单位。

2x:

10 * 2 / 326 = 0.061

3x:

10 * 3 / 1.15 * 401 = 0.065 (1.15是上面苹果给你缩放的倍数)

综上例子说明,同样10p , 在肉眼看起来其实没有多大差别。

结合设计原则给出具体的实现方案

在上面已经提到了,如果设计针对2x给的标注,你完全可以用在3x模式下,基本看不出来。但是这里面有一个潜在的问题。

我把设计的排版布局总结为:

  1. 横向直排;也就是从左到右进行布局。

  2. 两头挤;也就是先定死两边的间距,然后往中间布局元素。

如果设计给的图是从左向右的布局,只是看两者间距。按照上述是没有问题的。

但是,如果设计是从两头往中间布局,先定死2边间距,然后再按照屏幕的宽适当调整元素间布局,这样就麻烦了。因为元素的个数是定死的,屏幕的宽是不一样的。这就导致了不同的屏幕宽度,元素的间距或者元素大小就要做适配了。

如果真的出现了从两头往中间布局的设计方案,就应该使用autolayout了。把元素的位置根据屏幕比例定死。比如3个元素,第一个元素就在屏幕的1/3处,第二个就在3/4,第三个就在4/5,这样,这些定死了。他们的间距就相应的定死了。这样的结果是,各种屏幕元素间的间距肯定是不一样的。所以,这个要跟设计在实际过程中探讨他们的设计方案。优先选用横向直排。其实选用两头挤。

在插一句,其实屏幕大了,应该是在能看清的前提下,一行多放点元素。而不是说各种屏幕都放同样多的元素。

比如说:

3.5inch 放10个元素

4inch 也放10个

5.5inch 也放10个

这种,我感觉应该是不合理的。5.5inch就应该放20个,或者更多。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容