iOS开发:为你的应用兼容iPhone X

每年苹果爸爸都会在六月份的WWDC上发布有关下一代iOS的新特性和改动内容,开发者们有半年时间去准备和兼容最新版本的iPhone和操作系统。

但是这一次为了在发布会前不泄露iPhone X的相关信息(实际上我们早就知道了=。=),苹果直到昨天才在官网上线了兼容全面屏的指导文档和视频。离iPhone X正式上市还有两个月不到的时间,我们需要为我们的app做哪些准备呢?

屏幕

我们在编码中使用的是以point为单位的屏幕尺寸(在不同设备上每个point对应的实际像素点是不一样的),iPhone 8的尺寸是375pt × 667pt @2x,iPhone X的尺寸是375pt × 812pt @3x,也就是屏幕宽度是一样的,但是高出了145pt,大概能多显示20%的内容。

屏幕

注意iPhone X的屏幕素质比较好,所以它需要加载较高像素的图片,我们要提供必要的@3x资源。

另外由于iPhone X极高的长宽比,我们用作背景的图片都需要重新设计,以保证比例适合,内容被裁切后效果仍然ok。

屏幕

status bar

iPhone X的状态栏高度是高于之前所有的iPhone版本的,所以在代码里写死kStatusBarHeight == 20的地方都会出错

刘海变高

也就是说,之前使用固定状态栏高度来进行布局的代码都需要调整为动态布局方式,否则会出现内容被遮挡的问题。特别是图中这个64,一直在iOS开发中常数般的存在,最后也被苹果爸爸摆了一道。

此处不能写死

关于状态栏另外两个需要注意的地方:

  • 不要在iPhone X下隐藏状态栏,一个原因是显示内容足够高了,另一个是这样内容会被刘海切割。

  • 现在通话或者其它状态下,状态栏高度不会变化了,程序不需要去做兼容。

高度不变

布局

iPhone X的布局有很多改变,这是因为:

  • 刘海的存在使横屏的情况变得复杂

  • 四个角变圆,需要防止内容被切割

  • 代替home键的长条(不知道官方名字叫什么,homeBar?)使得屏幕底部的布局需要调整

很多系统经典的控件,比如TableView,Collection,Navigation,TabBar等都会自动适应iPhone X(呵呵,一定会有很多坑等着打补丁或者让开发者擦屁股)。

Safe Area

iOS11引入了safeArea的概念,用来替代之前的topLayoutGuidebottomLayoutGuide,safeArea用来描述视图不被任何内容遮挡的部分。它提供两种方式:safeAreaInsetssafeAreaLayoutGuide来提供给你safeArea的参照值。

safeArea

在iPhone X上,视图的默认safeArea如下图所示:

safeArea2

可以看到,底部的Bar还有四周圆角,都对这个safeArea进行了切割。苹果官方的设计指导是使用以safeArea为框,以layoutMargin为间距来进行UI布局。

横屏

在横屏状态下,不能因为刘海的原因将内容向左或者向右便宜,要保证内容的中心对称:

center
center2

另外,之前所有版本的iPhone tableView的cell和它的contentView的大小是相同的,开发者相对cell布局和相对contentView布局效果上不会有太大区别。

但是在iPhone X下,由于刘海和圆角的存在,tableView的contentView会被裁切,所以所有的布局都应该被调整为相对contentView布局,否则会越界:

tableView

一致性

苹果对iOS中运行的app的一致性有很高的要求,在iPhone X下,开发者不能自己去遮盖圆角、状态栏,特别是底部的homeBar,即使你认为刘海很丑,也许用户看着看着就习惯了呢……

关于homeBar,它的颜色是会自动适应的,保持着『时刻能找到但是又不那么显眼』的状态,所以开发者不用去为它费心添加背景啊,强调啊啥的,苹果爸爸会十分感动然后拒绝掉你的……

交互

在交互方面,iPhone X最大的改变就是底部那个无时无刻不存在的homeBar了,代替了原来home按键的功能,系统级的任务切换和回到桌面 、、,都是上滑这个细细的长条。

homeBar

所以苹果爸爸的意思是:

赶紧把你自己写的上滑手势乖乖删掉~

当然如果app确实需要这个手势,可以打开程序开关覆盖系统的手势,但是这样用户就需要滑动两次来回到桌面了,这会让他们非常怀念home键。

兼容

首先是iPhone X下的键盘和其他系统有区别,会多出来那个很有趣的animateEmoji工具栏,所以在做键盘相关处理的时候要关注兼容性问题,至少:高度不要写死了……

iPhone X的认证使用的是全新的faceId,所以如果app需要使用认证相关api,需要根据设备区分touchId和faceId,可以看文档

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

推荐阅读更多精彩内容