作者写了一个受 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,那您应当看一下端的视频2018正版葡京赌侠诗,视频里发生详细的介绍苹果如何使
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。

发表评论

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

网站地图xml地图