淘宝App 华为折叠屏适配终极方案！

点击“开发者技术前线”，选择“星标????”

13：21 在看|星标|留言, 真爱

来源：淘系技术

华为 5G 新品发布会上，Mate X 正式亮相，淘宝也作为重点展示应用出现在发布会的 PPT 上，同时也成为折叠屏生态联盟应用矩阵的第一位。

现场华为折叠屏上的淘宝多任务演示

伴随手淘技术团队对华为折叠屏适配工作的展开。半年前还只是概念方案的分屏设计方案已正式实现。华为折叠屏上的淘宝已全面支持分屏多任务，以后商品比价、边逛边聊更加轻松便捷，为大家带来不一样的购物体验。

折叠屏第二屏的多任务模式

华为折叠屏形态简介

华为mate x屏幕形态分为三种：

展开态 显示比例8:7.1（分辨率1536x2200）
折叠态正面屏 显示比例19.5:9（分辨率2480x1148）
折叠态背面屏 显示比例25:9（分辨率2480x892）

用户可以在三种形态上进行随意切换，因此第一步需要保证手淘在三种屏幕形态下的主功能没问题。

折叠屏适配原则

应用不在屏幕上不留黑边（Aspect-ratio最小最大比例支持,最小宽高比 1.0，最大宽高比 2.4）
屏幕切换、分屏 Switch/Resize 操作不能有 Crash/ANR
屏幕切换、分屏 Switch/Resize 操作后布局正常（无内容缺失/重叠等）
屏幕切换、分屏 Switch/Resize 操作 Activity 尽量不 Restart
Activity支持Multi-Resume（分屏应用失去焦点视频播放不停止/再次播放不重放等）

折叠屏适配点

允许改变应用尺寸。要适配折叠屏，首先是要让应用支持动态改变尺寸，需要在 menifest 中的 Application 或对应的 Activity 下声明。

<activity android:name="com.test..TestActivity" android:resizeableActivity="true" android:configChanges="orientation|screenSize|keyboardHidden" android:screenOrientation="portrait" android:exported="false"

在 Manifest 文件的 <application> 节点中增加 <meta-data> 数据，设置最大/最小支持比例。

<meta-data android:name="android.max_aspect" android:value="2.4" /> <meta-data android:name="android.min_aspect" android:value="1.0" />

APP 支持 Multi-Resume（Android P 开始支持），在Manifest 文件的<application>节点中增加 <meta-data> 数据，在设置了该元数据后，应用在分屏模式下失去焦点后不会收到 onPause() 回调，如果需要知道用户“焦点”是否还在应用上，使用 onWindowFocusChanged() 回调判断。

<meta-data android:name="android.allow_multiple_resumed_activities" android:value="true" />

Activity 支持显示动态尺寸/比例变化不重启，在 manifest 文件的 <activity> 节点中的android:configChanges 属性增加 screenSize|smallestScreenSize|screenLayout 字符串。

当屏幕比例变化时，系统会回调 Activity 的 onConfigurationChanged() 方法，而避免 Activity 重新启动。应用复写 onConfigurationChanged() 方法，通过该方法的 Configuration 参数获得屏幕的分辨率等信息，就可以针对不同比例屏幕下的应用界面布局做相应调整，如切换布局、调整控件位置和间距等。

如果 Activity 走 Restart 销毁模式，需要处理 onSaveInstanceState() 保存状态，以免信息丢失。在分屏模式下，如果希望获得应用实际显示的尺寸，使用 Activity 的 Context 调用 getDisplayMetrics 获取。

体验升级，Magic Window探索

经过几个月的适配，终于完成了第一个折叠屏可用版本的安装包。但是由于手淘是针对窄屏设计的 App ，在展开屏状态下，宽高比接近 1:1 ，可视内容会变得很少，无法发挥折叠屏的大屏优势。为了给用户最佳的使用体验。手淘团队决定适配华为 mate X 的 Magic Window 方案。

Magic window，是华为提供的系统级分屏的解决方案。应用可以根据自身业务设计分屏显示 Activity 组合，以实现符合应用逻辑的最佳单应用多窗口用户体验。

本次手淘适配 magic window ，使用自定义模式进行适配。即由设计师确定左右屏的交互逻辑，由技术同学针对交互逻辑在指定配置文件进行配置，实现分屏方案。

具体实现方法：在 Manifest 文件中新增 <meta-data> 标签

<meta-data android:name="EasyGoClient" android:value="true" />

在 asserts 目录下新增 easygo.json 文件，文件格式如下：

在 magic window 模式下，折叠屏优势得到充分体现，以下是几个经典场景。

浏览商品同时咨询客服（设计稿）

商品对比（设计稿）

最终效果如下：

关于折叠屏适配，大家有什么不同的见解？欢迎下方留言区探讨。

END

开发者技术前线，汇集技术前线快讯和关注行业趋势，大厂干货，是开发者经历和成长的优秀指南。

历史推荐

2019年，React 开发者应该掌握的 22 种神奇工具

大众点评 App 搜索基于知识图谱的深度学习排序实践

Python 3.9 正式发布！以及 Python 3.8 新特性详析

查看全文

http://www.taodudu.cc/news/show-5354112.html

手机 App 测试
手机淘宝APP主要视觉设计图分析【惠龙之：花骨朵儿】
Appium（Python）驱动手机淘宝App
android最新发布系统,首款Android 7.0手机LG V20发布 KingRoot教你玩转新系统
三星Mega 6.3（i9200）删除kingroot
kingroot pc版 v3.2.0.1129官方电脑版
note3 android l,KingRoot: 独家宣布,一键Root Android L版三星手机
下载问题汇总
呼吁大家：坚决抵制KingRoot，不要下载安装该流氓软件！
养老变身“坑老”？找家靠谱养老机构为何这么难
大学计算机实验报告示例,实验报告范例（学生）.doc
【人工智能】基于五笔字型规范和人工神经网络的简中汉字识别【四】
【人工智能】基于五笔字型规范和人工神经网络的简中汉字识别【三】
怎么把jpeg改成pdf格式
echart转换成pdf js_【jsPDF】jsPDF插件实现将html页面转换成PDF，并下载，支持分页...
基于PDFBox组件的JPEG转换为PDF输出的尝试
js将html转成pdf,js将html转换为pdf
java版 pdf转换_java如何将pdf转换成image
pdf转换成jpg python_Python 将pdf转成图片的方法
jpeg如何转换成pdf
前端html转换PDF,指定html转换成pdf
jpeg如何转换成pdf格式
如何将jpeg转换成pdf步骤
html转换成pdf
今日份安利：思维导图软件哪个好？
Win10连WIFL后显示（无Internet，安全）五种解决方案踩坑过程
Oracle 11g安装过程工作Oracle数据库安装图解
新萝卜家园GHOST WIN7系统32,64位官方版下载
从零开始学Oracle（一），下载安装Oracle-11g起步
电脑定屏死机，如何解决

淘宝App 华为折叠屏适配终极方案！相关推荐

XPosed+Charles抓包淘宝App
阿里系大多使用了MTOP来加签请求,所以需要通过hook的方式关掉这个加签.我这里使用的是xposed.也可以使用Frida @Overridepublic void handleLoadPackag ...
华为折叠屏从小屏启动APP，SHOW一个Dialog，显示问题
最近适配华为折叠屏的时间,遇到一个很坑的问题? 1.UI设计如下:打开一个Activity从底部弹出Dialog,横屏的时候从右侧弹出Dialog,并右侧弹出Dialog宽为屏幕的一半如果杀死APP ...
华为小米等折叠屏适配研究
市面上折叠屏陆续出了几款手机,我们产品也下发了适配折叠屏的需求,以下对折叠屏是撇工作做一个记录,中间也包含网络搜罗资料整理,供大家参考. 一.目前主流折叠屏机型: 厂商型号折叠分辨率展开分辨率 ...
淘宝App惊现“内测版本弹屏”P0级事故！5张淘宝架构PPT，剖析事故始末
点击"技术领导力"关注∆ 每天早上8:30推送作者| Mr.K 编辑| Emma 来源| 技术领导力(ID:jishulingdaoli) 老K跟朋友开玩笑:今天的心情和手 ...
互联网早报：淘宝App产品升级：微淘升级为订阅，买家秀社区升级为逛逛....
行业热点 1.淘宝App产品升级:微淘升级为订阅,买家秀社区升级为逛逛: 2.网易云音乐LOOK直播2.0版本开辟全新一级页面"音乐人LIVE",强化音乐人直播扶持: 3.字节跳动 ...
Android 折叠屏适配
最近,华为和三星都发布了各自的折叠屏华为折叠屏 Mate X和Samsung Galaxy Fold.最近也收到了华为应用市场人员反馈的App不适配折叠屏的情况. 下面,记录一下适配折叠屏的步骤. ...
腾讯狂砸2亿，给1万多员工送华为折叠屏手机！市价2万一台且断货
导读:今天国庆和中秋双节,想必不少同学都收到礼物了吧? 9月30日,腾讯PCG(平台与内容事业群)向1万名员工人手发了一部价格为16999元的华为折叠屏手机Mate Xs礼物,总价值约2亿. 一时引起 ...
再等等！华为折叠屏手机Mate X预计在7月底至8月初开售
今日,华为在武汉正式发布nova5系列手机新品.在会后的媒体专访环节中,华为消费者业务手机业务总裁何刚谈到了备受观点的折叠屏手机Mate X. 何刚表示,华为Mate X计划在今年7月底至8月初正式开 ...
获取各大电商平台，item_get_app - 获得淘宝app商品详情原数据API返回数据说明
今天跟大家分享的是item_get_app - 获得淘宝app商品详情原数据API返回数据说明 item_get_app 获得淘宝商品详情 [查看演示] API测试工具注册链接(获取Key和sec ...

淘宝App 华为折叠屏适配终极方案！

体验升级，Magic Window探索

相关文章：

淘宝App 华为折叠屏适配终极方案！相关推荐

最新文章

热门文章