写给开发者的设计指南:折叠屏如何做界面设计?

三星开发者 2019-02-28

备受瞩目、科幻色彩十足的三星可折叠移动设备即将在几个月后来到用户手中,谷歌也在去年11月初宣布Android将对折叠屏设备提供原生支持。面对全新的显示技术,跃跃欲试的开发者们做好准备了吗?如何打造超群的新奇体验,请将阅读以下设计指南作为第一步吧!

导语

在可折叠设备上提供出色的用户体验,首要确保您的应用程序已准备好两件事:

其一,可在两个屏幕之间无缝切换;其二,在多窗口模式下处于活动状态。


1、APP连续性:展折开合,顺畅切换

可折叠设备展开时,当前应用页面必须无缝延续到另一个屏幕,并可自动调整大小匹配新的布局,反之亦然。也就是说,应用程序需要准备好在多个屏幕(不同分辨率、密度等)之间切换。


对于APP连续性,谷歌提供了屏幕连续性可应对这类需求。

运行时配置变更–系统默认

-折叠/展开的操作过程将触发系统向应用发送新布局的配置更改,包括smallestScreenSize,screenSize和screenLayout的配置。


每当发生配置更改时,Android默认情况下会重启正在运行的Activity(先后调用onDestroy()和onCreate())。目的是使用与新设备匹配的备用资源自动重新加载您的应用。

-当Activity重启时,恢复之前的状态很重要。在销毁Activity之前,可以调用onSaveInstanceState()来保存应用状态的数据;之后在onCreate()或onRestoreInstanceState()中恢复Activity状态。

-不要在活动的OnDestroy()中调用finish()或自行终止进程,否则将导致APP在设备折叠或展开时关闭。

运行时配置变更–自行处理

如果因性能限制等因素希望在不自动重启Activity的情况下处理配置更改,您需要在应用清单manifest中增加android:configChanges属性,并至少包含以下配置值:


当指定的属性(可折叠设备的折叠/展开时触发)发生变化时,MyActivity不会重启,而是会收到对onConfigurationChanged()的调用,在此方法中处理配置变更,更新视图布局、重新加载资源。通过此方法即能实现在系统不重启Activity的情况下重置UI。

参考资料

1)请参阅Android开发者指南中的详细信息–运行时配置变更:

https://developer.android.google ... ces/runtime-changes

2)三星开发者网站

https://developer.samsung.com/ga ... docs#app-continuity

2、Multi-resume:应用多开,引人入胜

“手机一秒变平板”,屏幕物理尺寸的变大,多窗口分屏预计将成为可折叠手机最常用的功能之一。而Multi-resume就是为了让多窗口分屏的体验更佳而出现的。

什么是Multi-resume

-谷歌在Android 7.0时代便支持了多窗口分屏功能,即多个应用可同时共享屏幕,但问题是多个应用无法同时使用,只有具有焦点的应用才能保持在活动(resume)状态,其它应用会暂停运行。

-从Android P(9.0)开始,谷歌提供了名为Multi-resume的新功能,允许设备厂商在多窗口模式下保持所有可见应用处于活动状态,解决了分屏的多个应用仅有一个能保持活动状态的问题。

-谷歌拟在下一个版本Android Q优化该功能的兼容性,Multi-resume有望成为必选行为。


APP如何在Multi-resume运行

在Android P(9.0)中启用Multi-resume,请在应用清单manifest中增加如下元数据:


3、更多指引:布局优化,面面俱到

最大纵横比

三星可折叠设备外屏将具有长纵横比(21:9),请确保您的应用程序支持长纵横比。

详细适配方法请参考:屏幕最大纵横比适配指导。

优化内外屏布局

可折叠移动设备中,应用程序可以运行在大小不同的显示屏幕中,我们首先建议添加一个单独的资源文件夹来展示更丰富更清晰的内容。

优化方法包括灵活布局、备用布局、可拉伸图片等方式:

-灵活布局,确保布局的调整适应屏幕尺寸的变化,核心原则是避免对界面组件的位置和大小硬编码,可使用”wrap_content”和”match_parent”尺寸值来代替硬编码尺寸;

使用RelativeLayout根据组件之间的空间关系指定布局。

-备用布局,Android允许应用针对不同屏幕配置提供多种备选布局。可以利用配置限定符实现此目的,它允许系统根据当前配置(如针对不同屏幕尺寸的不同布局设计)自动选择合适的资源。

例如:单窗格(默认)布局:res/layout/main.xml

双窗格布局:res/layout-large/main.xml(目录名称中的large为限定符)

-可拉伸图片,由于布局可拉伸以适应不同的屏幕,附加在视图之上的位图也应可拉伸。

但朝任意方向拉伸普通位图可能导致缩放失真或图片倾斜,解决方案是使用九宫格位图,这种特殊格式的PNG文件可指定可拉伸的小像素区域,哪些区域不可拉伸。

-详细资料请参考:https://developer.android.com/guide/practices/screens_support

显示屏配置参考


Foldable模拟器测试

-模拟器:FoldableEmulator_1.0.1.apk Version:1.0.1

-下载地址:https://developer.samsung.com/galaxy/foldable#essentials

您可在此网站查看使用模拟器进行测试的方法,我们也将在下一期专题介绍Foldable

模拟器测试,敬请期待!

来源:三星开发者ID:Samsung_Developers

最新评论
暂无评论
参与评论

商务合作 查看更多

编辑推荐 查看更多