前语
跟着近年来手机职业的飞速展开，手机从功能机进入到智能机，手机屏幕占比也跟着技能和系统的行进越来越大，特别是Android 10推出今后，折叠屏逐步成为Android手机展开的趋势。
图 1 Android手机屏幕展开趋势
京东小程序近年来也支撑了越来越多的业务和运用，做好小程序的折叠屏的适配也是契合未来的展开趋势，能为用户和业务方供应更好的领会和价值。
Android运用折叠屏适配摘要
运用在折叠屏工作时，可以从一个屏幕切换到另一个屏幕。运用应该做好配备改动的适配和界面情况的保存，以确保运用其时任务能无缝迁移到转化后的屏幕，然后为用户供应超卓的连续性领会。
1.resizeableActivity
默许情况下，Activity resizableActivity 特点为 true，系统假定该运用彻底支撑多窗口并且可调整大小。
图 2 Android手机折叠屏
假设您不希望自己的运用在多窗口方式下调整大小，你可以设置Activity resizableActivity 特点为false，系统会将运用置于兼容方式。某些原始设备制造商 (OEM) 或许会实施一项功能，即每逢 Activity 的闪现区域发生更改时，都会在屏幕上添加一个小型重启图标。这为用户供应了在新配备中重启 Activity 的时机。下图示例展现了一次内屏到外屏，外屏到内屏切换中系统相关处理。
图 3 折叠屏运用重启示例
此外，用户需求“设置”-“闪现”中翻开运用的“在外屏上继续运用运用程序”开关，不然，切换到外屏时系统将回到锁屏界面，运用会被压至后台。不支撑resize的运用会无法翻开此开关。
图 4 Android折叠屏展现开关
2.屏幕宽高比
Android 10 (API 级别 29) 或更高版别 支撑更多种宽高比。关于可折叠设备而言，设备类型可以是超长、超薄的屏幕（例如屏幕宽高比为 21:9 的折叠设备），也可以是 1:1 的屏幕。
如要与尽或许多的设备兼容，您应该尽量多针对以下屏幕宽高比检验自己的运用:
图 5 Android手机屏幕宽高比
假设无法支撑上述某些高宽比，您可以运用 maxAspectRatio（同之前相同）以及 minAspectRatio 来指明自己运用可以处理的最高宽高比和最低宽高比。假设屏幕宽高比超出这些束缚，运用或许会进入兼容方式。
3.处理配备改动
某些设备配备或许会在工作时发生改动（例如屏幕方向、键盘可用性，以及当用户启用多窗口方式时）。发生这种改动时，Android 会重启正在工作的 Activity（先后调用 onDestroy() 和 onCreate()）。重启行为旨在经过利用与新设备配备相匹配的备用资源来自动从头加载您的运用，然后协助它习惯新配备。
如要妥善处理重启行为，Activity 有必要恢复其先前的情况。您可以一同运用 onSaveInstanceState()、ViewModel 目标以及耐久存储，以在配备改动时保存并恢复 Activity 的界面情况。
但是，您或许会遇到这种情况：重启运用并恢复很多数据不只本钱高昂，并且会形成糟糕的用户领会。在此情况下，我们一般可以自行处理配备改动，以避免系统资源改动引起Activity重启，经过在标签中添加android:configChanges声明完结。android:configChanges 特点文档中列出该特点的或许值。最常用的值包括 “orientation”、”screenSize” 和 “keyboardHidden” 等。
总归，为了做好Android运用的折叠屏适配，运用应能妥善地保存界面情况和支撑配备改动，并进行具体的检验，具体适配教导方案可以参考官方文档。
小程序折叠屏适配现状
小程序不同于原生的Android运用，微信小程序结构现在是根据webview烘托，小程序逻辑层、视图层等进行相关视图、组件的计算烘托时依赖于获取到的设备标准数据，当屏幕标准发生改动时，不可避免的会形成布局款式的紊乱。小程序业内现在还没有官方的折叠屏适配方案。以健康宝微信小程序为例，发生折叠后，不只界面上存在问题，还存在无法从前史任务栈中翻开的问题。
图 6 微信运用Android手机折叠屏效果
此外，从微信开发社区我们了解到，有不少开发者关于小程序折叠屏适配仍是有诉求的。
图 7 微信小程序折叠屏适配诉求
京东小程序折叠屏适配
1.京东小程序折叠屏问题
京东小程序也存在元素标准不适宜、折叠后无法从任务栈中再次翻开等问题，我们看一下京东快递小程序的现象。
图 8 京东小程序适配前
内屏翻开小程序情况：
图 9 京东小程序适配前-内屏
内屏转外屏情况：
图 10 京东小程序适配前-内屏转外屏
外屏翻开小程序情况：
图 11 京东小程序适配前-外屏
外屏转内屏情况：
图 12 京东小程序适配前-外屏 转内屏
总归，就是在无论是内屏仍是外屏，初度翻开时获取到的屏幕标准数据是对的，小程序能按照适合的标准烘托元素；一旦发生折叠，在新的情况要么是元素过大不适合窄屏，要么是元素过小不适合宽屏。
那么问题来了，为什么在初试翻开情况页面上的元素是大小适宜的呢？
2.小程序多屏幕适配
rpx （ responsive pixel）照应单位
rpx是微信小程序独有的、处理屏幕自习惯的标准单位， 在小程序开发中，引荐运用rpx这种照应式的像素单位进行开发
可以根据屏幕宽度进行自习惯，不管大小屏幕，规则屏幕宽为750rpx，以 iPhone6 为基准，iPhone6 的屏幕宽度为 375px，则 750rpx = 375px
实在设备获取到的物理像素是多种多样的，在小程序内部经过实在物理像素与375的比值得到缩放比例，实在烘托运用时再转化为对应的像素，经过 rpx 设置元素和字体的大小，小程序在不同标准的屏幕下，可以完结自动适配。
3.折叠屏问题分析
元素标准问题：
在折叠屏翻开情况翻开小程序，此刻取到的设备标准等均为翻开时的数据，屏幕折叠后，元素大小没有发生改动，但是承载小程序的容器大小改动了，屏幕变窄了，所以按照原有的标准，一切的布局空间发生紧缩，导致页面挤压在一同。
相同的，在外屏翻开小程序时获取到的标准数据是适合外屏的，再折叠到内屏情况时也无法及时更新到内屏的标准。
究其原因，在发生屏幕折叠时，小程序没有获取到最新的屏幕数据，无法更新屏幕缩放比，一同没有机制告诉小程序进行从头烘托或加载。
无法重启问题：
小程序在Android端工作在独立的进程中，不同小程序工作在不同进程，小程序引擎具有自己独有的管理机制。在之前屏幕折叠后小程序被杀死进程，经过前史任务栈无法再次拉起该进程。
4.处理思路
监听屏幕折叠：
1.记录其时屏幕参数（宽、高、方向）
2.在onConfigurationChanged(Configuration newConfig)回调中获取最新屏幕配备
当屏幕发生折叠后，系统会将newConfig下发给运用程序，取出newConfig.orientation 、newConfig.screenWidthDp 和 newConfig.screenHeightDp ， 与 之前保存的屏幕参数进行对比。假设宽、高发生改动，一般以为屏幕发生折叠。
3.细节处理
a.因为视屏播放器全屏情况下一般会是横屏情况，当从全屏情况切回正常方式时往往会回到竖屏，这儿屏幕的 orientation 会与之前的不同，不能当做折叠处理。
b.折叠屏手机屏幕往往底部还有一个最近运用的方便导航条，假设是敞开情况，因为需求重汇的原因，在发生折叠后，系统会触发两次onConfigurationChanged(Configuration newConfig)回调，并且两次回调的参数中 newConfig.screenHeightDp 会前后不一致，这儿需求做一下兼容处理，不然会误判为多次折叠。
图 13 折叠屏导航条
图 14 折叠屏导航条2
不同的底部导航条
元素标准问题：
要处理此问题，就要在识别到屏幕标准发生改动时，及时告诉到业务，有两种方案：
1.部分改写：告诉业务自行改写
这种方案可以在必定程度上保存用户操作流程的完好，但是也存在非其时页面无法改写或许或退后再次改写等问题，对用户来说领会一般，并且需求小程序业务的开发者来监听页面改动，增加了开发者的业务复杂度。
2.整体改写：重启小程序
这种方案是客户端引擎监听到设备发生折叠时，关闭小程序，并进行从头翻开。可以很好地确保页面的从头适配，重启行为会对用户操作流程完好性有必定的损伤，对小程序开发者来说没有工作量。
无法重启问题：
针对此问题，引擎侧需求避免杀死小程序地点进程，一同结合上面 2 个页面改写方案，归纳考虑，采用在其时进程整体改写、重启小程序方案。一方面处理了前史任务栈无法重启问题，另一方面避免了创建新进程的开支，界面上给人的感官也更流程。
5.遇到的问题及处理方案
1.multiWindow、pictureInPicture问题
Android系统还有两个功能就是多窗口和画中画方式，activity可以缩放为一个小窗口，在屏幕中闪现一小块区域，可以很灵敏的拉伸缩放，关于此，小程序引擎忽略了窗口大小的改动，不然用户只需一缩放就会重启小程序，这是我们和用户都无法承受的。这种情况下，坚持不变是契合多窗口的规划初衷的，读者在处理相似的适配方案时应当留心多窗口、画中画问题。
2.onConfigurationChanged多次回调问题
不同的厂商或许不同的用户配备，会在发生折叠时，因为情况栏或许系统底部的虚拟按键等设置，触发不同次数的onConfigurationChanged回调，回调下发的screenHeightDp数值不一致。上文现已说到，需求针对回调参数下发的newConfig数据做实在的折叠判别，忽略“伪配备改动”。
3.onNewIntent问题
不考虑折叠屏的情况下，京东小程序在多栈方式下回来时并不是实在的关闭小程序，而是压到后台，没有触发activity的finish。当用户再次翻开时会触发onNewIntent事情，这儿会进行小程序的重启。
但是遇到折叠屏，就会触发onConfigurationChanged 和 onNewIntent 都回调的情况，经过查阅源代码和打印日志办法，我们可以发现onConfigurationChanged的回调早于onNewIntent的。所以onConfigurationChanged一旦识别到发生屏幕折叠就会重启小程序，在onNewIntent这儿应该避免再次重启小程序。
4.webview和js引擎获取屏幕宽高失真问题
在适配中我们遇到过在某些机器上“没问题”，在其他机器上“很简单复现”的窘境。在理论和实际上，客户端传递给逻辑层、视图层的标准数据都没问题，但是小程序体现上仍是存在问题。经过详尽的排查，发现js引擎上有些数据的是来自于window目标的宽高数据，此数据与折叠后的屏幕数据不一致，即webview和js引擎获取到的设备标准更新不及时，形成rpx计算失准。为此，我们替换了引擎中对window宽高的运用办法，替换为屏幕实在的数据。
6.修复效果展现
经过以上办法，经过验证，我们小程序在折叠屏上的相关领会达到了比较令人满意的效果。
内屏转外屏：
图 15 折叠屏适配后-内屏转外屏
外屏转内屏：
图 16 折叠屏适配后-外屏转内屏
外屏压后台，再转内屏：
图 17 折叠屏适配后-后台引发
总结
折叠屏作为未来Android屏幕展开的新趋势，具有很大的展开远景，做好折叠屏相关适配支撑也势在必行。小程序相关适配现已跟随京东主站、小家App、小家三星预装版等发布上线，本文是作者进行相关适配的一些心得领会，如有缺乏敬请见谅，欢迎沟通评论。
作者：京东零售 张磊
内容来源：京东云开发者社区
