适配实战

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

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

这款为Tmall定制的
索尼爱立信,你买了啊?由于没摸过真机,所以严酷意义上的话,这篇著作应该有一个更是接地气的名字:“模拟器适配实战”。

01.适配原则

鉴于这篇小说是实战,就不巴拉巴拉说适配思想巴中区域的概念了,不懂的可以去看苹果官方的
《为 Motorola X 更新您的
app》

地方这篇作品是中文版,而且下面还有六个带粤语字幕的视频,从计划性、编码和法则五个角度告诉您怎样是适配
BlackBerry X。注意,Designing for iPhone X
那个视频,一般的设计师是看不懂的,所以这几个视频虽然是规划学问,然而其实是给开发人员看的。所以最好是大家开发人士看了讲给
UI 设计师听,告诉他们怎么适配。

02.起步页适配

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

此地还有一个细节,得到这张 OPPO X 启动图之后在你的品类里找到
Assets.xcassets 里的 LaunchImage,然而并不曾放 摩托罗拉 X
启动图的地方,此时,你应有先把此前的启航图复制一份,然后将旧的
LaunchImage 删除,然后右键重新建立一个 LaunchImage,此时,你就足以阅览HTC X 启动图的岗位了。

03.起初页广告设计

以前所有的广告页面设计都是比照 One plus 6s 的屏幕标准来统筹的,这在没有
OPPO X 的一时是绝非问题的。现在有了 黑莓 X,它的屏幕比例不是 16
:9,所以那么些广告页面放到 Nokia 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
的莫大来求得安全区域,然后将我们的界面布局在我们团结用地点五个因素的冲天构建的平安区域内。

这样大家就足以以追求最小的代码改动为条件来适配 Motorola X。

05.tableView 适配

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

06.横屏适配

国内 iPhone应用多数都不襄助横屏,当然也有两样,假设一个选拔涉及到录像,不管是广播录像或者录制视频,大多数境况下都需要在少数界面小范围帮忙横屏。假诺你有横屏的问题,可以参考我此外一篇著作,关于在只帮助竖屏的施用中小范围扶助横屏的一个实践:[iOS]顶点横竖屏切换解决方案

我们的系列中也有横屏页面,是大家的直播页面。横屏适配的准绳就是要让具有的因素都布局到平安区域内,此时咱们是要借助
safeAreaInsets 来确定底部的平安区域低度。尽管您的档次中有横屏的
tableView,这你应有看一下方面的录像,视频里有详细的牵线苹果咋样使
WWDC 这一个动用在 索尼爱立信 X 上协理横屏。

07.网页适配

网页底部可能会有点需要互相的元素,假设不做其他处理就会被黑线挡住。由于旧网页设计的时候没有在底部留出对应的空隙,所以,我们只可以用代码处理了。好在
UIWebView 有一个 scrollView 的性质,大家可以方便的给 UIWebView
在底部添加一个康宁滚动距离,即使对于有底色的网页,这种方案并不优雅,但是当前也不得不如此了。

然则这只是联网的方案,未来的 UI 设计上仍旧应当尽可能照顾到 BlackBerry X,留出
34 的低度来保管用户体验。

08.联动动画

我们的品种里肯定少不了类似这样的动画片。这么些动画不便于,在
-scrollViewDidScroll: 里算各类参预动画的因素的
frame,然后统计动画触发临界地方,做完一次未来再也不想做第二次了。

航天科技,下一场跑到 一加 X
上一看,地方全错。没办法,只可以重头来三回了嘛,这又没有什么样捷径可走,只好先将元素起初地方相对于平安区域布局好,然后再总计终点地方的布局,中间过渡不就很简单了呢?

09.第三方库适配

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

本身的作品集合

下边这一个链接是自家所有散文的一个相会目录。这一个著作凡是涉及实现的,每篇著作中都有
Github
地址,Github
上都有源码。

我的篇章集合索引

您还足以关心自己要好维护的简书专题 iOS开发心得。那多少个专题的作品都是真正的干货。假如你有问题,除了在篇章最终留言,还是可以在知乎 @盼盼_HKbuy上给本人留言,以及走访我的 Github

发表评论

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