iOS开发 iPhone X适配

随着iPhoneX的发布,适配问题也随之而来

我们先在最前面说一下适配的中心思想:

1、X上的状态栏从20pt变成了44pt,并且中间有个刘海似的隔档,在一些app中如果是隐藏状态栏时需要注意这块不要被挡住了。
2、X的下面有一块34pt的home indicator,比如一些页面下面有button或者其他交互式控件的尽量上移34pt,把这块空出来,这样不会产生冲突。
3、X的高度增加了145pt,变成了812pt。
4、X的四周是圆角显示,在设计页面的时候左右要留出来10pt的边距。
5、物理分辨率为1125 * 2436,这个分辨率对于我们开发者最直接的影响是要在启动图中添加一个1125 * 2436的为X准备的启动图,否则会发生运行项目后上下都会有一个黑边的问题,我的项目里用的是LaunchImage,那么就需要点击LaunchImage,然后如图点击。
为X设置启动图.jpg
这时就在新出现的地方,添加一张1125*2436分辨率的图片就好了。

首先把xcode升级到最新版,官方给出的适配建议是采用safeArea的策略。
那我们来说说safeArea到底是什么?

之前进行过xib和storyboard开发的朋友们可能对AutoLayout的Top Layout Guide和Bottom Layout Guide的适配方式并不陌生,现在苹果要用safeArea来取代top和bottom的方式,但是safeArea需要iOS9以上才能用,所以如果想用这个就只能把Deployment Target改成9以上了。
X上的safeArea区域.jpg
除了X以外设备的safeArea区域.jpg
在图中我们可以看出来所谓的安全区域safeArea就是X上面活动最安全的区域,上面既不会被挡住,下面也不会和homeIndicator起冲突。作为开发者来说在这个区域开发肯定没问题。
要想使用safeArea,首先打开storyboard或者xib,选中左侧的某个页面,然后如图
safeArea使用步骤.jpg
选中上图的这个,你会发现之前约束的带有top,bottom的全部变成了safeArea,缺点就是需要iOS9的限制,优点也是很突出的,方便,把之前的机型和X统一到了一起。

我项目里的适配解决方法:

因为自己项目里要兼容iOS8.0以上,所以放弃了safeArea的方法。再加上本来项目就是代码和storyboard混合开发,所以想着在代码中动态改动布局也是可以的吧,即使这样比较麻烦,需要在每个X和其他机型不一样的地方分别处理。如果各位有比较好的想法欢迎指出。嘻嘻。
核心代码就是:
 if ([UIScreen mainScreen].bounds.size.height == 812) {
            make.bottom.equalTo(weakSelf.view).offset(-34);
        }else{
            make.bottom.equalTo(weakSelf.view);
        }
判断当前的机型是不是X,是的话采用新UI布局,不是继续沿用以前的。记住如果横屏的时候就是宽度为812了,虽说这样看起来有点骚操作,但目前能想到的只有这样了。

项目里的原生控件基本都由apple官方适配好了,我们不需要处理,比如navigationBar和tabBar等等。
最后上几张适配好的图片对比。

Simulator Screen Shot - iPhone 6 - 2017-09-27 at 16.36.46.png
Simulator Screen Shot - iPhone X - 2017-09-27 at 16.37.01.png
Simulator Screen Shot - iPhone 6 - 2017-09-27 at 16.37.19.png
Simulator Screen Shot - iPhone X - 2017-09-27 at 16.37.28.png
Simulator Screen Shot - iPhone 6 - 2017-09-27 at 16.37.35.png
Simulator Screen Shot - iPhone X - 2017-09-27 at 16.37.44.png
Simulator Screen Shot - iPhone 6 - 2017-09-27 at 16.38.38.png
Simulator Screen Shot - iPhone X - 2017-09-27 at 16.39.05.png
Simulator Screen Shot - iPhone X - 2017-09-27 at 16.40.36.png
Simulator Screen Shot - iPhone 6 - 2017-09-27 at 16.40.58.png

2018-3-8新增:

由于很长时间没有接触适配的工作,在今天重新研究了下safeArea,发现因为之前项目中大多数是storyboard或xib布局的,如果最低版本兼容到8.0,在safeArea上点勾会报错。但是可以在storyboard或xib中不做改动,而在代码中进行系统判断,如果iOS>11则用safeArea进行适配否则,反之则用AutoLayout,是可以的。具体方法在这里就不说了,因为Masonry已经进行好了iPhone X的适配,使用方法依然很简单,如果只是单纯的为了适配,大家还是用Masonry这个大轮子吧,可以到官方看文档来查看使用方法。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容