[iOS]贝聊 红米 X 适配实战

03.起步页广告设计

此前所有的广告页面设计都是比照 红米 6s 的屏幕标准来设计的,那在并未
三星 X 的一时是不成问题的。现在有了 BlackBerry X,它的屏幕比例不是 16
:9,所以那个广告页面放到 华为 X 上就会出现左右被开除。但是倘若按照三星 X 的屏幕来布署,就会导致在非 华为 X
上显示出现前后被截掉的情事。

据此大家应用的措施是,如故选取 红米 6s
的屏幕来拓展规划,只是设计师注意在左右留出一部分距离,保险在 小米 X
上显示把左右开掉一部分事后如故可以健康显示。

07.网页适配

网页底部可能会稍稍要求彼此的元素,假设不做其余处理就会被黑线挡住。由于旧网页设计的时候从不在底层留出对应的当儿,所以,大家不得不用代码处理了。好在
UIWebView 有一个 scrollView 的性能,大家得以一本万利的给 UIWebView
在底部添加一个攀枝花滚动距离,即使对于有底色的网页,那种方案并不佳看,但是近来也只好这么了。

但是那只是过渡的方案,将来的 UI 设计上或者应该尽量照顾到 小米 X,留出
34 的冲天来保障用户体验。

自家的文章集合

上面那几个链接是自家拥有小说的一个会聚目录。这么些文章凡是涉及落成的,每篇作品中都有
Github
地址,Github
上都有源码。

自身的稿子集合索引

您仍可以关注本身要好维护的简书专题 iOS开发心得。这几个专题的稿子都是开诚布公的干货。若是您有问题,除了在篇章最后留言,仍能够在新浪 @盼盼_HKbuy上给自己留言,以及走访我的 Github

02.起步页适配

假定你是第五次下载 Xcode 9,运行起来,APP
并没有完全填充整个模拟器,那时你须求 UI
设计师给您切一张新的开行图,图片尺寸应该和 努比亚 X 一样,BlackBerry X
的屏幕尺寸为 375 * 812 pt,记得 酷派 X 的屏幕是 @3x 的。

此间还有一个细节,得到那张 vivo X 启动图之后在你的花色里找到
Assets.xcassets 里的 LaunchImage,可是并从未放 红米 X
启动图的地方,此时,你应当先把之前的启动图复制一份,然后将旧的
LaunchImage 删除,然后右键重新建立一个 LaunchImage,此时,你就足以看出
华为 X 启动图的岗位了。

01.适配原则

出于那篇小说是实战,就不巴拉巴拉说适配思想平安区域的定义了,不懂的可以去看苹果官方的
《为 摩托罗拉 X 更新您的
app》

上面那篇小说是中文版,而且下边还有多少个带普通话字幕的录像,从规划、编码和公理两个角度告诉你哪些是适配
三星 X。注意,Designing for iPhone X
那一个摄像,一般的设计师是看不懂的,所以这一个视频就算是设计学问,可是其实是给开发人士看的。所以最好是咱们开发人士看了讲给
UI 设计师听,告诉他们怎么适配。

06.横屏适配

境内 中兴应用多数都不扶助横屏,当然也有例外,如果一个使用涉及到视频,不管是广播视频或者录制视频,半数以上情状下都须要在少数界面小范围扶助横屏。假使您有横屏的题材,可以参见我其余一篇文章,关于在只帮助竖屏的拔取中小范围接济横屏的一个履行:[iOS]终点横竖屏切换解决方案

我们的系列中也有横屏页面,是大家的直播页面。横屏适配的准绳就是要让拥有的因素都布局到安全区域内,此时大家是要依赖
safeAreaInsets 来确定底部的平安区域中度。固然你的档次中有横屏的
tableView,那你应当看一下地点的视频,视频里有详实的牵线苹果怎么着使
WWDC 那么些动用在 OPPO X 上援救横屏。

08.联动动画

我们的档次里一定少不了类似那样的动画。那些动画不简单,在
-scrollViewDidScroll: 里算各个插足动画的要素的
frame,然后统计动画触发临界地方,做完五回之后再也不想做第二次了。

然后跑到 小米 X
上一看,地方全错。不可能,只可以重头来两回了呗,那又从不什么样抄小路可走,只可以先将元素开首地方相对于平安区域布局好,然后再总括终点地方的布局,中间过渡不就很简单了吧?

作者写了一个给 HTC X 去掉刘海的 APP,而且其余 中兴 也足以玩,有趣味的话去 App Store 看看。点击前往。

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

那款为天猫商城定制的
HTC,你买了啊?由于没摸过真机,所以严酷意义上的话,那篇文章应该有一个更是接地气的名字:“模拟器适配实战”。

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
的莫大来求得安全区域,然后将大家的界面布局在我们友好用地点多少个因素的可观构建的安全区域内。

那般我们就可以以追求最小的代码改动为尺度来适配 Motorola X。

05.tableView 适配

tableView
系统都帮我们适配好了,真的没什么可讲的。要是一定要讲就是有些界面我们须求把
tableViewcontentInsetAdjustmentBehavior 这一个特性给安装为
.never。当那样做未来,我们就不可以享受系统自动优化 tableView
的一个便民,这些有利就是系统帮我们把 tableView
的内容上下都插入一个安然无恙区域大小的额外滚动距离来使界面用户自己,因而大家须求手动插入
contentInsets 来有限支持那或多或少。

09.第三方库适配

布局使用的 梅森ry 已经协助相对安全区域布局。ASDK 也早已支撑,只须求将
SDK 更新一下就可以了。