[iOS]贝聊 vivo X 适配实战

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

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

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

01.适配原则

由于那篇著作是实战,就不巴拉巴拉说适配思想有惊无险区域的定义了,不懂的可以去看苹果官方的
《为 Nokia X 更新您的
app》

地方这篇随笔是闽南语版,而且下面还有多少个带中文字幕的录像,从计划性、编码和原理多少个角度告诉您哪些是适配
中兴 X。注意,Designing for iPhone X
这么些视频,一般的设计师是看不懂的,所以这么些录像即便是计划学问,可是实际是给开发人士看的。所以最好是我们开发人员看了讲给
UI 设计师听,告诉他们怎么适配。

02.启动页适配

假定你是率先次下载 Xcode 9,运行起来,APP
并不曾完全填充整个模拟器,这时你需要 UI
设计师给您切一张新的启航图,图片尺寸应该和 BlackBerry X 一样,索尼爱立信 X
的屏幕尺寸为 375 * 812 pt,记得 Motorola X 的屏幕是 @3x 的。

这里还有一个细节,得到这张 中兴 X 启动图之后在你的品类里找到
Assets.xcassets 里的 LaunchImage,不过并从未放 Motorola X
启动图的职务,此时,你应该先把以前的开行图复制一份,然后将旧的
LaunchImage 删除,然后右键重新创建一个 LaunchImage,此时,你就可以看看
Motorola X 启动图的职务了。

03.起动页广告设计

事先所有的广告页面设计都是遵照 中兴 6s 的屏幕标准来统筹的,这在并未
One plus X 的时日是绝非问题的。现在有了 Samsung X,它的屏幕比例不是 16
:9,所以这多少个广告页面放到 红米 X 上就会冒出左右被炒鱿鱼。可是如果遵照BlackBerry X 的屏幕来统筹,就会造成在非 摩托罗拉 X
上出示出现前后被截掉的景色。

为此我们使用的格局是,依旧使用 Samsung 6s
的屏幕来拓展统筹,只是设计师注意在左右留出一部分相距,保证在 Motorola 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
的可观来求得安全区域,然后将我们的界面布局在大家团结一心用地方两个元素的低度构建的安全区域内。

如此我们就可以以追求最小的代码改动为基准来适配 小米 X。

05.tableView 适配

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

06.横屏适配

境内 小米应用多数都不协理横屏,当然也有不同,假如一个选用涉及到录像,不管是广播录像或者录制录像,大多数境况下都亟待在少数界面小范围帮助横屏。假诺您有横屏的题目,可以参考我其余一篇著作,关于在只扶助竖屏的应用中小范围协理横屏的一个执行:[iOS]顶点横竖屏切换解决方案

咱俩的档次中也有横屏页面,是大家的直播页面。横屏适配的标准化就是要让具备的因素都布局到平安区域内,此时我们是要依靠
safeAreaInsets 来确定底部的平安区域低度。倘若你的连串中有横屏的
tableView,这您应有看一下方面的视频,视频里有详细的牵线苹果怎么样使
WWDC科技美学, 那个动用在 One plus X 上支撑横屏。

07.网页适配

网页底部可能会略带需要互相的要素,倘使不做任何处理就会被黑线挡住。由于旧网页设计的时候从不在底层留出对应的空子,所以,我们只好用代码处理了。好在
UIWebView 有一个 scrollView 的性质,我们得以便宜的给 UIWebView
在底层添加一个康宁滚动距离,即使对于有底色的网页,这种方案并不优雅,不过当前也不得不如此了。

只是这只是连着的方案,未来的 UI 设计上或者应该尽可能照顾到 One plus X,留出
34 的冲天来担保用户体验。

08.联动动画

我们的体系里肯定少不了类似那样的动画。这一个动画不易于,在
-scrollViewDidScroll: 里算各个出席动画的元素的
frame,然后总计动画触发临界地点,做完三次之后再也不想做第二次了。

然后跑到 一加 X
上一看,地点全错。没办法,只好重头来两次了呗,这又没有什么捷径可走,只可以先将元素先导地点相对于平安区域布局好,然后再总计终点地方的布局,中间过渡不就很简短了吗?

09.第三方库适配

布局使用的 Masonry 已经帮助绝对安全区域布局。ASDK 也早就支撑,只需要将
SDK 更新一下就可以了。

自家的著作集合

下面这么些链接是自个儿有所著作的一个聚众目录。这一个著作凡是涉及实现的,每篇著作中都有
Github
地址,Github
上都有源码。

自家的随笔集合索引

您还可以够关心我要好维护的简书专题 iOS开发心得。那一个专题的作品都是实事求是的干货。即便你有问题,除了在篇章最终留言,仍可以够在今日头条 @盼盼_HKbuy上给自家留言,以及走访我的 Github