开发者社区> 新零售淘系技术> 正文

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

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

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

image.png

1.gif

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

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

image.png

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

华为折叠屏形态简介

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

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

image.png

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

折叠屏适配原则

  • 应用不在屏幕上不留黑边(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 文件的 节点中增加 数据,设置最大/最小支持比例。

<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 文件,文件格式如下:

image.png

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

image.png

浏览商品同时咨询客服(设计稿)

image.png

商品对比(设计稿)

最终效果如下:

1.gif

mate x真机

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

One More Thing

淘系技术部依托淘系丰富的业务形态和海量的用户数据,我们持续以技术驱动产品和商业创新,不断探索和衍生颠覆型互联网新技术,以更加智能、友好、普惠的科技深度重塑产业和用户体验,打造新商业。我们不断吸引用户增长、机器学习、视觉算法、音视频通信、数字媒体、移动技术、端侧智能等领域全球顶尖专业人才加入,让科技引领面向未来的商业创新和进步。

请投递简历至邮箱:ruoqi.zlj@taobao.com

更多职位信息请阅读 「淘系技术部,“职”想要你」

版权声明:本文中所有内容均属于阿里云开发者社区所有,任何媒体、网站或个人未经阿里云开发者社区协议授权不得转载、链接、转贴或以其他方式复制发布/发表。申请授权请邮件developerteam@list.alibaba-inc.com,已获得阿里云开发者社区协议授权的媒体、网站,在转载使用时必须注明"稿件来源:阿里云开发者社区,原文作者姓名",违者本社区将依法追究责任。 如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
上一篇:30万“被消失”的视障用户,如何在淘宝剁手盖楼? 下一篇:大家都关注的Serverless,阿里怎么做的?
新零售淘系技术
使用钉钉扫一扫加入圈子
+ 订阅

淘系技术部隶旗下包含淘宝技术、天猫技术、农村淘宝技术、闲鱼、iHome等团队和业务,是一支是具有商业和技术双重基因的螺旋体。 我们致力于成为全球最懂商业的技术创新团队,打造消费者和商家一体化的新零售智能商业平台,创新商业赛道。随着新零售业务的持续探索与快速发展,我们不断吸引用户增长、机器学习、视觉算法、音视频通信、数字媒体、端侧智能等领域全球顶尖专业人才加入,让科技引领面向未来的商业创新和进步。欢迎投递简历至ruoqi.zlj@taobao.com

官方博客
淘系开源,欢迎star哟