手机管家iPhoneX的适配总结
WeTest 导读
随着苹果发布会的结束,Xcode的GM版也上线了,也意味着iPhoneX适配之旅的开始。
一、设计关注篇
注意设计的基本原则:(苹果呼吁的)
WWDC__Designing for iPhoneX最终说明见上面的官方说明
二、让App充满屏幕
刚升级完GM版Xcode,兴奋地build了一下手机管家
我们的_window依旧是使用[UIScreenmainScreen].bounds作为frame的,那问题出在哪呢?
关于我们用的[UIScreenmainScreen].bounds
敲黑板,划重点 ->看UIScreen的官方说明:
上文的 API说明 当中,意思大概可以通俗地理解为,我们所用的UIScreen的初始化是根据我们进入的第一个页面去进行参数化的,也就是说,我们的启动图(补上1125 x 2436的图)要换了。
如果你也跟我一样一下子没找到新建iPhoneX的入口.. 那就粗暴地删掉重新新建了一个
像此类多张尺寸图的Asset文件夹,我们往往还会进行一个操作,就是修改Content.json,令部分相同比例的尺寸共用同一个资源图(直接拖进Asset会直接创建一个新文件的)。
补充List—— 一些官方必备要领的传送门:
官方说明(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适配
三、整理一下发型
将旧版本App塞满屏幕后,来到我们最关心的“刘海”问题了
见图可知,我们默认的StatusBar在iPhoneX中也有了相对的调整,对于开发和布局设计(UI标注)也需要去注意这个问题。
另外,比较关注的是新交互方式下,底部的一些屏幕适配问题:
能想到的比较多的场景,就是底部的一些按钮与“Home键”重合了,直接上调按钮位置,按钮底部View拉长亦可以解决这问题。
其中一个可能会有坑的点,iPhoneX的宽度与6s是一样的,但使用的是@3x图。所以在处理比例和插图时,需要注意。这就意味着,我们用的一些通过比例对其切图和布局的方法将会出现问题。
俨然,这时候需要手动适配的地方,也可以这样操作掉。
避免影响原本的各机型代码,通常这样 :
设计师也需要注意的是,若要保持某种图片的Size比例一致,@3x图造成的变形也要进行对应比例的新切图~~
当然,基于iOS 11推荐使用AutoLayout的设计思路,这里引入了SafeArea的概念以更好地补充完善此类适配问题。(注意使用接口需要iOS 11+系统,方法前请务必进行系统判断)
SafeArea帮助我们将View设置在整个屏幕的可视化部分,即使把NavigationBar设置为透明的,系统也认为SafeArea是从NavigationBar的bottom开始的。
SafeArea可以确保可视区域不被系统的状态栏、或俯视图提供的View(如导航栏)覆盖。此外还可以使用additionalSafeAreaInsets去扩展SafeArea,包括自定义的content在你的界面,ViewController同理,如下图:
Listing 1文档中具体示例代码:
四、提一下关于测试的事
由于目前还没有iPhoneX的设备,只能通过模拟器去测试,就涉及到模拟器安装ipa包的问题了。
第1步,修改你的架构兼容设置BuildSetting -> Valid Architectures
第2步,重新编译
第3步,取出.app文件,塞进Payload文件夹,打包 || 直接拖.app去模拟器
(其实这里打不打都可以,基于程序员的仪式感我才打的包)
第4步,测试同学手上有这个.app文件,输入命令安装到模拟器上
请开着iPhoneX再去跑这命令
由于手机管家的适应力有点强,没有横屏和一些布局的情况,所以很快地就完成了适配工作,剩下的调整就交给设计师完成了~
腾讯WeTest兼容性测试团队积累了10年的手游测试经验,旨在通过制定针对性的测试方案,精准选取目标机型,执行专业、完整的测试用例,来提前发现游戏版本的兼容性问题,针对性地做出修正和优化,来保障手游产品的质量。目前该团队已经支持所有腾讯在研和运营的手游项目。
iPhone8/iPhoneX新机即将同步上线,欢迎进入:http://wetest.qq.com/product/expert-compatibility-testing 使用专家兼容测试服务。
WeTest兼容性测试团队期待与您交流!You Create,We Test!
手机管家iPhoneX的适配总结的更多相关文章
- 微信小游戏广告位iphonex底部适配问题
最近在公司开发游戏,使用cocos creator做微信小游戏,遇到一个很恶心的问题,如图: 如图所示,微信的广告位被iphonex的底部bar给弹出了一点位置,没有靠在底部. 在这里不得不吐槽一下微 ...
- Android手机安全软件的恶意程序检测靠谱吗--LBE安全大师、腾讯手机管家、360手机卫士恶意软件检测方法研究
转载请注明出处,谢谢. Android系统开放,各大论坛活跃,应用程序分发渠道广泛,这也就为恶意软件的传播提供了良好的环境.好在手机上安装了安全软件,是否能有效的检测出恶意软件呢?下边针对LBE安全大 ...
- Launcher知识的demo,手机管家小伙家与悬浮窗
Launcher知识的demo.主要仿的手机管家小伙家与悬浮窗的效果.东西比較简单.直接贴代码 主要用到了windowManager 中的更新updateViewLayout(view,params) ...
- web app变革之rem(手机屏幕实现全适配)
以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...
- iPhoneX快速适配,简单到你想哭。
研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...
- iPhoneX && iOS11 适配
最近实在是蛮闲的,这都得益于苹果爸爸给力的审核,已经半个月了(委屈) 这个问题已经很久了,但是还是希望分享给各位,当然网上的教程的确很多: 1.automaticallyAdjustsScrollVi ...
- Android仿腾讯手机管家实现桌面悬浮窗小火箭发射的动画效果
功能分析: 1.小火箭游离在activity之外,不依附于任何activity,不管activity是否开启,不影响小火箭的代码逻辑,所以小火箭的代码逻辑是要写在服务中: 2.小火箭挂载在手机窗体之上 ...
- android桌面悬浮窗仿QQ手机管家加速效果
主要还是用到了WindowManager对桌面悬浮进行管理. 需要一个火箭的悬浮窗 一个发射台悬浮窗 ,判断火箭是否放到了发射台,如果放上了,则使用AsyTask 慢慢将火箭的图片往上移.结束后., ...
- iphoneX的适配问题
iphoneX();function iphoneX(){ var oMeta = document.createElement('meta'); oMeta.setAttribute('name', ...
随机推荐
- Mybatis映射原理,动态SQL,log4j
1.理清mybatis中的#和$之间的区别? #{ }:表示一个预处理参数,参数类型不定,是根据传入的参数类型来设定的. 类似于JDBC中的? 特例使用,模糊查询:(针对oracle): and us ...
- Win10各版本区别
Win10各版本之间的区别.. ------------------- =============================================功能最强大的,不是日后绝大多数中国用户 ...
- WeQuant交易策略—MACD
MACD(指数平滑异同平均线)策略简介MACD指标应该是大家最常见的技术指标,在很多股票.比特币的软件中都是默认显示的.MACD是从双指数移动平均线发展而来的.意义和双移动平均线基本相同,即由快.慢均 ...
- BotVS配置托管者-基于新浪云
1. 创建SAE应用 登录新浪云平台,点击创建新应用 2. SAE环境部署 在新应用中选择自定义 相应选项如下 开发语言:自定义 运行环境:云容器 语言版本:自定义 部署方式:手工部署 操作系统:系统 ...
- Form表单提交,Ajax请求,$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
- [读书笔记] 二、条件注解@Conditional,组合注解,元注解
一.条件注解@Conditional,组合注解,元注解 1. @Conditional:满足特定条件创建一个Bean,SpringBoot就是利用这个特性进行自动配置的. 例子: 首先,两个Condi ...
- [2012-06-21]结合find的awk
源起:http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=3754423&page=1&extra=#pid221729 ...
- Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderL
Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderL 严重: Error config ...
- Spring-MVC请求参数值和向页面传值
读取请求参数值 方式一:通过HttpServletRequest req做参数 DispatcherServlet在调用处理的方法之前,利用Java反射分析方法的结构,通过分析,将req对象传过来 方 ...
- Windows上安装nvm--nodejs版本管理器
nvm最新的下载地址 Node版本管理器--nvm,可以运行在多种操作系统上.nvm for windows 是使用go语言编写的软件. 我电脑使用的是Windows操作系统,所以我要记录下在此操作系 ...