网页悬浮窗设计 第1篇
那么要怎么解决这个问题？简单来说，我们期望对不同的布局，折叠机上能够有自适应的能力，不是简简单单地放大。比如对于横向有新内容的元素，我们推荐用延伸布局的方式，在宽屏时，将隐藏在屏幕外的内容展示出来。对于纵向的重复元素，我们推荐将重复元素左右摆放，一页展示更多的内容。对于横向没有新内容元素，直接将容器拉长，元素的内容尺寸不变。
那么，具体要怎么实现相关的效果？
对于延伸布局，需要做两个事情：
第一，对于横向的重复元素，固定住元素本身的尺寸。
第二，对于元素的容器，将高度进行固定，宽度设置成动态尺寸即可。
对于重复布局，也只需要做两个事情：
首先，我们无需对原样式进行任何改动，仅需要添加一个媒体查询的样式。在宽屏时，重复元素的尺寸相对原样式减半，同时，设置重复元素为inline属性，让元素能够自动补空。
网页悬浮窗设计 第2篇
拖出到悬浮窗
拖出到悬浮窗，使同一个应用可以同时存在多个任务。
以上就是折叠屏UX设计及开发指南解读（下篇）的全部内容。
网页悬浮窗设计 第3篇
Android 加入多窗口特性，分为分屏、悬浮窗、画中画：
分屏模式会以左右并排或上下并排的方式分屏显示两个应用。用户可以拖动两个应用之间的分隔线，放大其中一个应用，同时缩小另一个应用。
悬浮窗（自由窗口）模式下，窗口可以浮动显示，用户可以自由调整应用窗口的大小。
画中画模式可让用户在与另一个应用互动的同时继续播放视频。
华为EMUI 10 开始对多窗口特性深度优化，并持续演进，除了常见的使用方式外，还支持应用内元素一步打开悬浮窗、全屏应用手势操作一步悬浮窗、一步分屏，具有较好的易用性和用户体验。
悬浮窗的打开方式：
（1）通过一步小窗的手势操作快速让应用从全屏到悬浮窗
网页悬浮窗设计 第4篇
使用方法
以页面维度，自动调整内容布局大小和位置，简单方便。
接入方式
修改AndroidManifest文件：在“”文件的“application”中新增“meta-data”：
新增配置文件：在工程中assets目录新增文件，json文件中配置适配策略、activity名称等信息。目录结构为：
若应用已经有该文件，只需要在“logicEntities”字段新增内容。
__文件模板以及字段详细说明：
二、H5页面开发指南
网页悬浮窗设计 第5篇
关注到大多数应用在折叠屏形态上存在内容拉伸放大的现象，针对这一问题我们提供了控件自适应、整体自适应、Web页面3种适用场景来解决在折叠屏上的页面显示问题，方便在Android页面和Web页面上拥有更好的展示效果，从而避免应用内容被过量放大的现象。
1）控件自适应：应用布局优化提供一套具备响应式能力的控件，帮助开发者对Android页面的局部区域进行快速的适配：HwRspGridView、HwRspLinearLayout、HwRspListView、HwRspRecyclerView、HwRspViewPager。
2）整体自适应：应用布局优化提供Android整体/页面级别的统一重布局能力，手机的UI系统会在运行时分析用户的界面，将原本大图大字体的页面调整为正常的尺寸，同时识别不同类型的元素并进行智能重排版，尽可能优化用户界面。
3）Web页面：应用布局优化对以下Web结构提供自适应排版的能力，满足不同页面设计的需求。
•单行元素（包含轮播图等特殊类型）：整体缩放
•列表元素：元素缩放，自动换行并左对齐
•瀑布流：元素缩放，位置按照瀑布流自动排列
•大图元素：整体缩放并添加背景
•大弹窗、大字体、通栏：整体缩放
网页悬浮窗设计 第6篇
(1)如何声明支持多窗口?在 或 节点中设置resizeableActivity 属性，启用或禁用多窗口：
若开发者没有声明该属性，系统会根据应用的targetSDKVersion 及Activity的screenOrientation 属性来综合判断是否可以在多窗口显示。
如何调试：通过开启以下设置项：“开发者选项 > 强制将活动设为可调整大小”，然后重启手机，之后系统就会强制应用可进入多窗口模式，以方便开发者测试和验证。
(2)多窗口适配建议
①识别多窗口状态
调用该方法以确认 Activity 是否处于多窗口模式
isInMultiWindowMode()
当Activity进入或退出多窗口模式时，系统将回调此方法
onMultiWindowModeChanged()
②正确处理Configuration变化
建议在android:configChanges配置中增加如下配置，避免窗口大小变化时Activity发生relaunch：
不要在onDestroy()中调用finish()或其他方法自行终止进程，这可能导致应用在多窗口模式切换过程中出现关闭、闪退。应用不要自行控制资源上下文的 config，由系统统一创建 config和 Resources 对象。onConfigurationChanged 使用入参 newConfig 对象做相关的处理逻辑，不要通过 ().getConfiguration()等方式去获取,可能存在 Configuration 内容还没有被更新的情况。
③正确使用应用资源
推荐使用 Activity 作为Context 上下文加载合适的资源及做布局运算。如果使用的是Application Context，加载的资源无法感知到多窗口。
使用 activity 上下文从 display 中获取窗口大小：
().getDefaultDisplay().getMetrics(dm)
().getDefaultDisplay().getSize(point)
R 版本之后可使用：
().getCurrentWindowMetrics ()
使用 activity 上下文从 display 中获取屏幕真实大小（获取屏幕大小也要尽量使用activity上下文，非activity上下文在多屏场景无法正确取到页面所在对应屏幕信息）：
().getDefaultDisplay().getRealMetrics(dm)
().getDefaultDisplay().getRealSize(point)
R 版本之后可使用：
().getMaximumWindowMetrics ()
不要保存屏幕或窗口尺寸信息，使用时获取在进程级变量中保存的布局信息，会导致屏幕/窗口大小变化后，布局位置计算错位，出现重叠、截断等问题。
④正确获取View 的控件位置
多窗口情况下 和 接口含义不同，前者拿到的控件在屏幕上的位置（相对屏幕左上角起点），后者是控件在窗口内部的位置（相对于窗口左上角起点）
⑤使用自适应布局
由于多窗口情况下，窗口尺寸会变化，最佳的用户体验，需要实现响应式布局，不同的尺寸下展示不同的布局。尽量根据应用的窗口尺寸大小进行动态布局，不要使用绝对布局。
使用自适应布局，建议将 ConstraintLayout 用作界面中的基本布局，根据布局中视图之间的空间关系指定每个视图的位置和大小。当屏幕尺寸改变时，所有视图都可以随之移动和调整大小。
⑥尽量使用可滑动的页面/控件
在分屏中，窗口高度有限，如果控件不可滑动，那么用户可能无法上下滚动应用界面，部分内容显示不全，甚至无法进行下一步操作。这类页面常见于Splash Screen、登录注册页、音乐播放页、弹窗页等。
⑦尽可能使用相对位置
分屏时，屏幕的高度和宽度会发生变化，开发者在设计控件布局时，尽量使用相对位置，以避免窗口大小改变时，出现截断或者重叠等问题。
四、平行视界开发指南
网页悬浮窗设计 第7篇
在移动端，我们web的开发，通常会使用rem/vw等动态尺寸做响应式设计。使用这种方式，在我们常见的直板机上问题不大。但是，如果在折叠机上，就会出现各种各样的问题。最典型的就是信息密度大幅下降的问题。
假设网页是基于300像素的设计稿开发的，那在325像素的手机上，能够显示的内容是设计稿的92%，400像素的手机上则是75%，而在折叠机上则变成了42%。首先是内容明显地变少了，其次是由于内容整体放大了，对于手机这种手持设备，视距很近，用户的感受会非常不好。
这里有两个例子，能看到折叠机上的内容相对窄屏，虽然屏幕变大，但是内容却变少了。
网页悬浮窗设计 第8篇
使用方法
以控件维度接入，实现局部区域自适应，适配灵活。可直接使用华为响应式控件，或者修改控件继承关系。以下是开发控件总览和控件在设备上最小SDK版本要求：
代码集成示例
步骤一：Maven方式引入aar包
使用前需在的dependencies中添加所引用控件的依赖。implementation _:{version}_
步骤二（方式1）：XML集成方式
XML配置示例：原listview调整为响应式控件（原代码不需要修改）。
步骤二（方式2）：代码集成方式
①导入控件包。
import
②创建自定义控件类，调整原控件继承关系。
③代码代码使用示例如下。
网页悬浮窗设计 第9篇
为了降低开发者的适配成本，为开发者开发了一个折叠机适配插件，希望能够帮助到大家。对于常见的布局进行了总结归纳，设计一个自适应插件，可自动识别常见的布局，并对网页进行重新排版。下图是使用插件重排后的效果。
如何使用插件呢？重排插件的使用方式很简单，它有两种模式，一种是自动重排模式，一种是手动重排模式。自动模式的情况下，仅需要集成插件，插件能够自动地识别布局并重排。手动模式的情况下，可以由开发者来指定元素的布局模式，插件会根据开发者输入的布局信息，对布局进行样式的改造，使其能够自适应折叠屏。
大家可以从下面的地址获取到插件：
三、多窗开发指南