默认
开启辅助访问
打赏 发表评论 0
即时通讯网»社区 › 专项技术区 › 其它分享 › 腾讯手机管家iOS版的iPhoneX适配实践分享
想开发IM：买成品怕坑？租第3方怕贵？找开源自已撸？尽量别走弯路了... 找站长给点建议
推荐 方案：MobileIMSDK框架、RainbowChat产品、RainbowChat-Web产品 / 签到领积分！ / 官方技术交流群：185926912
腾讯手机管家iOS版的iPhoneX适配实践分享
阅读（66370） | 评论（0） 收藏1 淘帖 赞
JackJiang Lv.9 精华之王 白金版主 终身成就 7 年前 | 只看该作者 |只看大图 倒序浏览 |阅读模式
微信扫一扫关注！

本文原作者：龙伟炜， 腾讯手机管家移动端开发工程师。


1、前言


随着苹果发布会的结束，Xcode的GM版也上线了，也意味着iPhoneX适配之旅的开始。

2、UI设计规范


注意设计的基本原则：（苹果呼吁的）
腾讯手机管家iOS版的iPhoneX适配实践分享_1.jpg

腾讯手机管家iOS版的iPhoneX适配实践分享_3.jpg

官方设计规格原帖：
https://developer.apple.com/library/content/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

WWDC__Designing for iPhoneX：
https://developer.apple.com/videos/play/fall2017/801/，最终说明见上面的官方说明。

3、让App充满屏幕


刚升级完GM版Xcode，兴奋地build了一下手机管家：
腾讯手机管家iOS版的iPhoneX适配实践分享_4.jpg

我们的_window依旧是使用[UIScreenmainScreen].bounds作为frame的，那问题出在哪呢？

关于我们用的[UIScreenmainScreen].bounds，（敲黑板，划重点）看UIScreen的官方说明：
腾讯手机管家iOS版的iPhoneX适配实践分享_5.jpg

上文的API说明（https://developer.apple.com/docu ... ndow/1621597-screen）当中，意思大概可以通俗地理解为，我们所用的UIScreen的初始化是根据我们进入的第一个页面去进行参数化的，也就是说，我们的启动图(补上1125 x 2436的图)要换了。

腾讯手机管家iOS版的iPhoneX适配实践分享_6.jpg

如果你也跟我一样一下子没找到新建iPhoneX的入口..  那就粗暴地删掉重新新建了一个：
腾讯手机管家iOS版的iPhoneX适配实践分享_7.jpg

像此类多张尺寸图的Asset文件夹，我们往往还会进行一个操作，就是修改Content.json，令部分相同比例的尺寸共用同一个资源图(直接拖进Asset会直接创建一个新文件的)：
腾讯手机管家iOS版的iPhoneX适配实践分享_8.jpg

补充：一些官方必备要领的传送门
官方说明：https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
WWDC__Building Apps for iPhone X：https://developer.apple.com/videos/play/fall2017/201/，主要提及SafeArea的概念以及横屏情况下的区域如何设计，还有TableView的SearchBar适配。

4、整理一下发型


将旧版本App塞满屏幕后，来到我们最关心的“刘海”问题了：
腾讯手机管家iOS版的iPhoneX适配实践分享_9.jpg

见图可知，我们默认的StatusBar在iPhoneX中也有了相对的调整，对于开发和布局设计(UI标注)也需要去注意这个问题。

另外，比较关注的是新交互方式下，底部的一些屏幕适配问题：
能想到的比较多的场景，就是底部的一些按钮与“Home键”重合了，直接上调按钮位置，按钮底部View拉长亦可以解决这问题。

其中一个可能会有坑的点，iPhoneX的宽度与6s是一样的，但使用的是@3x图。所以在处理比例和插图时，需要注意。这就意味着，我们用的一些通过比例对其切图和布局的方法将会出现问题。

腾讯手机管家iOS版的iPhoneX适配实践分享_8.png

俨然，这时候需要手动适配的地方，也可以这样操作掉。

避免影响原本的各机型代码，通常这样 ：
腾讯手机管家iOS版的iPhoneX适配实践分享_9.png

设计师也需要注意的是，若要保持某种图片的Size比例一致，@3x图造成的变形也要进行对应比例的新切图~~

当然，基于iOS 11推荐使用AutoLayout的设计思路，这里引入了SafeArea的概念以更好地补充完善此类适配问题。(注意使用接口需要iOS 11+系统，方法前请务必进行系统判断)

腾讯手机管家iOS版的iPhoneX适配实践分享_10.jpg

SafeArea帮助我们将View设置在整个屏幕的可视化部分，即使把NavigationBar设置为透明的，系统也认为SafeArea是从NavigationBar的bottom开始的。

SafeArea可以确保可视区域不被系统的状态栏、或俯视图提供的View(如导航栏)覆盖。此外还可以使用additionalSafeAreaInsets去扩展SafeArea，包括自定义的content在你的界面，ViewController同理，如下图：
腾讯手机管家iOS版的iPhoneX适配实践分享_11.jpg

Listing 1文档中具体示例代码：
腾讯手机管家iOS版的iPhoneX适配实践分享_12.png

关于SafeArea的原文：
https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area

5、提一下关于测试的事


由于目前还没有iPhoneX的设备，只能通过模拟器去测试，就涉及到模拟器安装ipa包的问题了。

第1步：修改你的架构兼容设置BuildSetting -> Valid Architectures
腾讯手机管家iOS版的iPhoneX适配实践分享_13.jpg

第2步：重新编译

第3步：取出.app文件，塞进Payload文件夹，打包 OR 直接拖.app去模拟器
腾讯手机管家iOS版的iPhoneX适配实践分享_14.jpg
（其实这里打不打都可以，基于程序员的仪式感我才打的包）

第4步：测试同学手上有这个.app文件，输入命令安装到模拟器上
腾讯手机管家iOS版的iPhoneX适配实践分享_15.png
（请开着iPhoneX再去跑这命令）

由于手机管家的适应力有点强，没有横屏和一些布局的情况，所以很快地就完成了适配工作，剩下的调整就交给设计师完成了~

（原文链接：http://wetest.qq.com/lab/view/337.html）

即时通讯网 - 即时通讯开发者社区！ 来源： - 即时通讯开发者社区！

标签:腾讯 iOS iOS iOS iOS iOS iPhoneX
上一篇：月活8.89亿的超级IM微信是如何进行Android端兼容测试的▪下一篇：QQ 18年：解密8亿月活的QQ后台服务接口隔离技术
相关文章
推荐方案
返回列表 发新帖 发表评论
打赏楼主 ×
使用微信打赏！ 使用支付宝打赏！
即时通讯技术的分享和传播需要您的支持，感谢打赏！

返回顶部