[iOS]贝聊 Motorola X 适配实战

笔者写了一个给 vivo X 去掉刘海的 APP,而且其他 OPPO 也得以玩,有趣味的话去 App Store 看看。点击前往。

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

这款为Taobao定制的
红米,你买了吗?由于没摸过真机,所以严刻意义上来说,这篇作品应该有一个更为接地气的名字:“模拟器适配实战”。

01.适配原则

鉴于这篇作品是实战,就不巴拉巴拉说适配思想康宁区域的定义了,不懂的能够去看苹果官方的
《为 OPPO X 更新您的
app》

地方这篇著作是中文版,而且下边还有两个带中文字幕的视频,从规划、编码和原理七个角度告诉你什么是适配
HTC X。注意,Designing for iPhone X
这个视频,一般的设计师是看不懂的,所以那一个录像尽管是设计学问,可是实际上是给开发人士看的。所以最好是我们开发人士看了讲给
UI 设计师听,告诉他们怎么适配。

02.起动页适配

虽然您是第一次下载 Xcode 9,运行起来,APP
并没有完全填充整个模拟器,这时你需要 UI
设计师给您切一张新的启动图,图片尺寸应该和 酷派 X 一样,华为 X
的屏幕尺寸为 375 * 812 pt,记得 三星 X 的屏幕是 @3x 的。

此处还有一个细节,得到这张 红米 X 启动图之后在你的门类里找到
Assets.xcassets 里的 LaunchImage,不过并从未放 Samsung X
启动图的职务,此时,你应超越把以前的开行图复制一份,然后将旧的
LaunchImage 删除,然后右键重新树立一个 LaunchImage,此时,你就能够观看小米 X 启动图的职务了。

03.先河页广告设计

事先所有的广告页面设计都是比照 Nokia 6s 的屏幕标准来设计的,这在没有
HTC X 的一代是没有问题的。现在有了 One plus X,它的屏幕比例不是 16
:9,所以这一个广告页面放到 索尼爱立信 X 上就会面世左右被开掉。可是只要按照黑莓 X 的屏幕来计划,就会招致在非 一加 X
上显得现身前后被截掉的情景。

因此我们利用的办法是,依旧采纳 三星 6s
的屏幕来进展规划,只是设计师注意在左右留出一部分离开,保证在 小米 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
的惊人来求得安全区域,然后将大家的界面布局在咱们温馨用地点五个要素的万丈构建的临沧区域内。

这么大家就可以以追求最小的代码改动为尺度来适配 OPPO X。

05.tableView 适配

tableView
系统都帮我们适配好了,真的没什么可讲的。如若一定要讲就是有些界面大家需要把
tableViewcontentInsetAdjustmentBehavior 这多少个特性给安装为
.never。当如此做将来,我们就不可以享受系统自动优化 tableView
的一个便民,这一个有利就是系统帮我们把 tableView
的始末上下都插入一个安全区域大小的额外滚动距离来使界面用户自己,因此我们需要手动插入
contentInsets 来保证这一点。

06.横屏适配

国内 Nokia应用多数都不辅助横屏,当然也有两样,假设一个应用涉及到视频,不管是广播摄像或者录制视频,大多数情状下都急需在好几界面小范围协助横屏。倘诺您有横屏的题目,可以参考我此外一篇作品,关于在只匡助竖屏的运用中小范围协助横屏的一个实施:[iOS]顶点横竖屏切换解决方案

咱俩的类型中也有横屏页面,是大家的直播页面。横屏适配的标准化就是要让抱有的元素都布局到平安区域内,此时我们是要依靠
safeAreaInsets 来确定底部的商洛区域低度。假使您的连串中有横屏的
tableView,这你应该看一下方面的视频,视频里有详尽的牵线苹果如何使
WWDC 那多少个应用在 Nokia X 上支撑横屏。

07.网页适配

网页底部可能会略微需要互相的元素,假设不做其他处理就会被黑线挡住。由于旧网页设计的时候没有在底层留出对应的空当,所以,我们不得不用代码处理了。好在
UIWebView 有一个 scrollView 的性质,我们可以一本万利的给 UIWebView
在底层添加一个有惊无险滚动距离,固然对于有底色的网页,这种方案并不优雅,可是当前也只可以如此了。

可是这只是连着的方案,将来的 UI 设计上如故应当尽可能照顾到 华为 X,留出
34 的莫大来确保用户体验。

08.联动动画

我们的项目里一定少不了类似这样的动画。这一个动画不容易,在
-scrollViewDidScroll: 里算各样到场动画的要素的
frame,然后总计动画触发临界地点,做完一回之后再也不想做第二次了。

接下来跑到 OPPO X
上一看,地方全错。没办法,只好重头来一次了嘛,这又从未怎么捷径可走,只好先将元素起头地点相对于平安区域布局好,然后再总括终点地点的布局,中间过渡不就很简单了呢?

09.第三方库适配

布局使用的 梅森ry 已经援助相对安全区域布局。ASDK 也早已支撑,只需要将
SDK 更新一下就能够了。

自我的小说集合

上面这么些链接是自我有所作品的一个会合目录。这多少个著作凡是涉及实现的,每篇著作中都有
Github
地址,Github
上都有源码。

自我的篇章集合索引

您还足以关注我要好维护的简书专题 iOS开发心得。这多少个专题的篇章都是真正的干货。如果你有题目,除了在篇章最终留言,还足以在新浪 @盼盼_HKbuy上给自身留言,以及走访我的 Github

发表评论

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