华为 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 下声明。

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

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

<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 文件的节点中增加数据，在设置了该元数据后，应用在分屏模式下失去焦点后不会收到 onPause() 回调，如果需要知道用户“焦点”是否还在应用上，使用 onWindowFocusChanged() 回调判断。

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

Activity 支持显示动态尺寸/比例变化不重启，在 manifest 文件的节点中的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 android:name="EasyGoClient" android:value="true" />

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

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

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

商品对比（设计稿）

最终效果如下：

mate x真机

手淘技术团队秉承客户第一原则，一直致力于用户体验优化，未来我们将在用户体验上做出更多努力，给用户带来更好的体验。关于折叠屏适配，大家有什么不同的见解？欢迎下方留言区探讨。

双11福利来了！先来康康#怎么买云服务器最便宜# [并不简单]参团购买指定配置云服务器仅86元/年，开团拉新享三重礼：1111红包+瓜分百万现金+31%返现，爆款必买清单，还有iPhone 11 Pro、卫衣、T恤等你来抽，马上来试试手气 https://www.aliyun.com/1111/2019/home?utm_content=g_1000083110

原文链接
本文为云栖社区原创内容，未经允许不得转载。

当手机淘宝遇见折叠屏，让购物更随心相关推荐

当手机淘宝遇见海尔电商
该文章来自阿里巴巴技术协会(ATA)精选集 7月的青岛,向来是旅游胜地.手机淘宝技术团队收到海尔的邀请,展开了一场别开生面的技术之旅,阿里无线事业部(手机淘宝)资深总监南天也应邀在[海尔电商技术沙龙] ...
苹果暗黑模式_苹果正式推送iOS13.4、iPadOS更新，微信安卓版暗黑模式来了，手机淘宝出现弹窗Bug，柔宇第二代折叠屏手机发布...
大家好今天是3月25日一起来看看今天的科技大新闻苹果正式推送iOS13.4.iPadOS 更新支持触控板操作 (新浪科技)北京时间3月25日凌晨,苹果公司正式推送了iOS 13.4.iPadOS ...
手机淘宝 521 性能优化项目揭秘
http://www.infoq.com/cn/articles/mobile-taobao-521-performance-optimization-project 又是一年双十一,亿万用户都会在这 ...
天猫11.11：手机淘宝 521 性能优化项目揭秘
又是一年双十一,亿万用户都会在这一天打开手机淘宝,高兴地在会场页面不断浏览,面对琳琅满目的商品图片,抢着添加购物车,下单付款.为了让用户更顺畅更方便地实现这一切,做到"如丝般顺滑" ...
【回顾】手机淘宝推荐系统实战
写在前面:昨天给大家分享了<文章推荐系统电子书>,有粉丝朋友问下载链接在那里,已经上传到省时查报告小程序中,到详情页点击下方菜单复制下载链接即可,以后公众号中分享的所有文档都会传到该小程序 ...
阿里无线11.11 | 手机淘宝主会场实践之路
传统会场在大促中的作用每次为了让消费者在大促时能更快挑选到商品和进行平台的营销互动,都会有一个页面来承载大促的核心内容和主要的营销要素,我们称之为主会场. 以前主会场开发,都是前端通过页面搭建系统或 ...
高效、稳定、可复用——手机淘宝主会场框架详解
导读: 为了让消费者在大促时能更快挑选到商品和进行平台的营销互动,手机淘宝都会有一个页面来承载大促的核心内容和主要的营销要素,称之为主会场.本文重点分享了从技术和业务上如何提升主会场效能,将浏览体验做 ...
手机淘宝的flexible设计与实现
手机淘宝的flexible设计与实现寒冬winter 发布在像winter一样冷2015年8月7日view:70095HTML5CSSCSS3移动开发在文章任何区域双击击即可给文章添加[评注]!浮 ...
手机淘宝——flexible.js 移动端自适应方案
一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...

当手机淘宝遇见折叠屏，让购物更随心

华为折叠屏形态简介

折叠屏适配原则

折叠屏适配点

体验升级，Magic Window探索

当手机淘宝遇见折叠屏，让购物更随心相关推荐

最新文章

热门文章