[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。

发表评论

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