写点什么

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

  • 2019-12-17
  • 本文字数:2680 字

    阅读完需:约 9 分钟

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

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




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


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



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

01 华为折叠屏形态简介

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


  • 展开态 显示比例 8:7.1(分辨率 1536x2200)

  • 折叠态正面屏 显示比例 19.5:9(分辨率 2480x1148)

  • 折叠态背面屏 显示比例 25:9(分辨率 2480x892)



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

02 折叠屏适配原则

  • 应用不在屏幕上不留黑边(Aspect-ratio 最小最大比例支持,最小宽高比 1.0,最大宽高比 2.4)

  • 屏幕切换、分屏 Switch/Resize 操作不能有 Crash/ANR

  • 屏幕切换、分屏 Switch/Resize 操作后布局正常(无内容缺失/重叠等)

  • 屏幕切换、分屏 Switch/Resize 操作 Activity 尽量不 Restart

  • Activity 支持 Multi-Resume(分屏应用失去焦点视频播放不停止/再次播放不重放等)

03 折叠屏适配点

允许改变应用尺寸。要适配折叠屏,首先是要让应用支持动态改变尺寸,需要在 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 获取。

04 体验升级,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 模式下,折叠屏优势得到充分体现,以下是几个经典场景。



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



商品对比(设计稿)


最终效果如下:



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


本文转载自淘系技术公众号。


原文链接:https://mp.weixin.qq.com/s/vJ3_guFLJrLeM7E6yxgzgA


2019-12-17 18:10918

评论

发布
暂无评论
发现更多内容

Apache Pulsar 社区周报:08-15 ~ 08-21

Apache Pulsar

云原生 Apache Pulsar 消息系统 消息中间件

架构师训练营第十一周作业

子豪sirius

etcd的高可用

李小匪

极客大学架构师训练营 0 期 week 11 作业

chun1123

高可用 密码校验

架构师训练营 第十一周 总结

CR

架构师训练营 - 第 11 周作业

Jam

用户密码验证函数

任小龙

Week 11命题作业

Jeremy

第十一周学习总结

菲尼克斯

安全架构和高可用系统的架构

周冬辉

高可用系统的架构

架构师训练营 Week 11 作业

Wancho

系统稳定高可用的方案以及用户密码验证函数

Acker飏

极客大学架构师训练营 0 期 week 11 学习笔记

chun1123

安全 高可用系统的架构

架构师训练营第 0 期第 11 周作业

无名氏

Flink算子状态-9

小知识点

scala 大数据 flink

架构师训练营 第十一周 作业

CR

Newbe.Claptrap 框架入门,第四步 —— 利用 Minion,商品下单

newbe36524

云计算 微服务 dock .net core ASP.NET Core

Week11作业1

熊威

第十一周命题作业

菲尼克斯

高可用的系统架构

莫莫大人

极客大学架构师训练营

【高并发】高并发秒杀系统架构解密,不是所有的秒杀都是秒杀!

冰河

高并发 分布式限流 秒杀系统 异步削峰 签约计划第二季

java安全编码指南之:拒绝Denial of Service

程序那些事

Java 安全编码指南 java安全编码 DOS攻击 zip炸弹

漫画解读:唐僧师徒如何帮助大唐官网打造CDN+OSS完美架构?

阿里云Edge Plus

架构师训练营 Week 11 总结

Wancho

Week 11 作业

鱼_XueTr

系统不可用的原因和解决方案

极客李

【华为云数据库技术大公开】机房失火后,还能拯救你的数据吗?

华为云开发者联盟

数据库 机房 华为云 数据存储 云数据库

Week11总结

熊威

极客时间架构师训练营 - week11 - 作业 2

jjn0703

极客大学架构师训练营

用户密码验证函数

周冬辉

加密

云上度假村木莲庄酒店助你远离城市的喧嚣

InfoQ_967a83c6d0d7

当手机淘宝遇见折叠屏,让购物更随心_语言 & 开发_淘系技术_InfoQ精选文章