[iOS]贝聊 iPhone X 适配实战

笔者写了一个于 iPhone X 去丢刘海的 APP,而且其他 iPhone 也可玩,有趣味的言辞去 App Store 看看。点击前往。

@NewPan 贝聊科技 iOS
菜鸟工程师

随即款呢上猫定制的
iPhone,你进了邪?由于并未搜了真机,所以严格意义上吧,这首稿子理所应当产生一个更为接地气的名字:“模拟器适配实战”。

01.适配原则

鉴于当下篇稿子是实战,就无巴拉巴拉说适配思想安全区域的概念了,不知底的得去押苹果官方的
《为 iPhone X 更新您的
app》。

地方那篇文章是中文版,而且下面还有三独带中文字幕的视频,从筹划、编码和规律三只角度告诉您怎么样是适配
iPhone X。注意,Designing for iPhone X
这个视频,一般的设计师是圈无掌握的,所以是视频虽然是计划学问,但是实际上是吃开发人员看之。所以最好是我们开发人员看了谈话为
UI 设计师听,告诉他们怎么适配。

  • Designing for iPhone X (简体中文字幕)
  • Building Apps for iPhone X
    (简体中文字幕)
  • Updating Your App for iOS 11 (简体中文字幕)

02.开行页适配

比方你是率先潮下载 Xcode 9,运行起来,APP
并没完全填充整个模拟器,这时你用 UI
设计师为您绝对一张新的开行图,图片尺寸应该同 iPhone X 一样,iPhone X
的屏幕尺寸为 375 * 812 pt,记得 iPhone X 的屏幕是 @3x 的。

此处还有一个细节,拿到当时张 iPhone X 启动图后当您的品类里找到
Assets.xcassets 里的 LaunchImage,但是连不曾放 iPhone X
启动图的职位,此时,你应当先将之前的启动图复制一卖,然后将老的
LaunchImage 删除,然后右键重新建立一个 LaunchImage,此时,你就可以看到
iPhone X 启动图的岗位了。

03.启动页广告设计

事先所有的广告页面设计还是以 iPhone 6s 的屏幕标准来计划的,这当尚未
iPhone X 的时代是从来不问题之。现在时有发生矣 iPhone X,它的屏幕比例不是 16
:9,所以这个广告页面放到 iPhone X 上便会见起左右深受裁掉。但是一旦以
iPhone X 的屏幕来统筹,就会招在非 iPhone X
上亮出现前后被截掉的情况。

因而我们下的法是,仍然使 iPhone 6s
的屏幕来进行统筹,只是设计师注意在左右养起片距离,保证在 iPhone X
上亮将左右淘汰掉一部分以后仍然能够健康显示。

04.safeAreaInsets 使用的坑

咱俩商家的类之大举界面都是用代码写的,没有采用 SB 或者
xib,而且原来代码布局尚未标准,并从未写于 -viewWillLayoutSubviews: 中。

地方的官方示例代码也告诉我们若相对 safeAreaInsets
进行布局,确保我们的界面是用户(老板)友好之。但是是特性在
-viewDidLoad:-viewWillAppear: 方法中都是吗
UIEdgeInsetsZreo,第一蹩脚有价是
-viewWillLayoutSubviews:。而且此价当 -viewWillLayoutSubviews:
的几乎不成调用中会无停歇地修正。

事实上文档里发描绘这特性的注释:
If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the edge insets in this property are 0.
假如当前 view 没有布局到窗口的遭,这个价值就是是 0。

当时吃咱修改旧代码带来极大的诸多不便,我们不太可能把本来代码写于
-viewDidLoad: 中的保有的布局代码都活动到 -viewWillLayoutSubviews:
中失,尤其对于整个凡是凡手写布局之这种情况。

因此我们用一致种更加灵敏有效之点子,对于有状态栏、导航栏和标签栏固定显示的界面,它的
statusBarnavigationBartabBarframe
都是一个之固定值。因为咱们是于 -viewDidLoad: 中修改旧的布局,此时
-viewDidLoad: 中以到之 safeAreaInsets 是无效的,但是咱虽可过了
safeAreaInsets,直接运用 statusBarnavigationBartabBar
的可观来求得安全区域,然后以我们的界面布局在咱们温馨因此点三个要素的莫大构建的安全区域外。

这般我们就是可以坐追求极致小的代码改动呢准绳来适配 iPhone X。

05.tableView 适配

tableView
系统都帮助我们适配好了,真的没什么可说的。如果一定要是说话即是起来界面我们需要把
tableViewcontentInsetAdjustmentBehavior 这个特性被安装为
.never。当如此做下,我们就算无法享用系统自动优化 tableView
的一个便于,这个便利就是网助咱把 tableView
的始末上下都插一个安全区域大小的附加滚动距离来而界面用户自己,因此我们得手动插入
contentInsets 来保证这或多或少。

06.横屏适配

境内 iPhone
应用多数还无支持横屏,当然也出差,如果一个用到涉及到视频,不管是广播视频或者录制视频,大多数景象下都待在少数界面小范围支持横屏。如果您发横屏的问题,可以参见我另外一首文章,关于以仅支持竖屏的用中范围支持横屏的一个实践:[iOS]顶点横竖屏切换解决方案。

俺们的档次遭到也生横屏页面,是咱的直播页面。横屏适配的格就是使受具有的素还布局到安全区域外,此时咱们是使负
safeAreaInsets 来确定底部的安全区域高度。如果您的类面临产生横屏的
tableView,那你该看一下上面的视频,视频里发出详实的牵线苹果如何如
WWDC 这个动用在 iPhone X 上支持横屏。

07.网页适配

网页底部或会见聊需要相互的素,如果未做其他处理就见面于不法线挡住。由于老网页设计之上没以底部留有相应之空子,所以,我们只好用代码处理了。好当
UIWebView 有一个 scrollView 的特性,我们好便宜之于 UIWebView
在底层添加一个平安滚动距离,虽然对生脚的网页,这种方案并无雅观,但是目前为只能这么了。

只是及时就是接的方案,以后的 UI 设计及或应该尽可能照顾到 iPhone X,留有
34 的万丈来担保用户体验。

08.联动动画

世家之种里一定少不了类似这样的卡通。这个动画不轻,在
-scrollViewDidScroll: 里算各种与动画的要素的
frame,然后计算动画触发临界位置,做得了一差以后再次为不思做第二软了。

然后跑至 iPhone X
上平等看,位置全错。没道,只能重头来同样不良了嘛,这同时尚未啊捷径可活动,只能优先将元素起始位置相对于平安区域布局好,然后还计终点位置的布局,中间过渡不纵特别简短了吗?

09.叔方库适配

布局使用的 Masonry 已经支持相对安全区域布局。ASDK 也曾经支持,只待将
SDK 更新一下即使可了。

自家之篇章集合

下这个链接是我有所文章的一个汇聚目录。这些文章是涉及实现之,每篇文章被还发出
Github
地址,Github
上还生源码。

自身的稿子集合索引

卿还足以关心本身好维护的简书专题 iOS开发心得。这个专题的章都是实在的干货。如果你闹问题,除了当文章最后留言,还可以于微博 @盼盼_HKbuy高达给自家留言,以及走访我之 Github。

发表评论

电子邮件地址不会被公开。 必填项已用*标注