电子科技[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。

相关文章