【HarmonyOS实战开发】智慧多窗应用适配指南

于 2024-08-16 21:31:03 发布
阅读量433 收藏 10
点赞数 16
分类专栏： 鸿蒙 安卓 前端 文章标签： harmonyos 华为 ui 鸿蒙 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS007/article/details/141270160
版权
鸿蒙 同时被 3 个专栏收录
179 篇文章 2 订阅
订阅专栏
安卓
179 篇文章 0 订阅
订阅专栏
前端
179 篇文章 0 订阅
订阅专栏

概念

智慧多窗是一种多任务处理解决方案，它允许用户在同一时间、同一屏幕上以悬浮窗或分屏的方式同时运行多个应用窗口。在智慧多窗的显示模式下，用户可以根据自己的需求，合理安排应用窗口的位置和大小。

悬浮窗

悬浮窗是一种在设备屏幕上悬浮的、非全屏的应用窗口。一般用于在已有全屏任务运行的基础上，临时处理另一个任务，或短时间多任务并行使用。如浏览网页的同时回复消息。

针对手机，一个屏幕内最多支持显示一个悬浮窗；在折叠屏手机展开态、平板类设备上，一个屏幕内最多支持显示两个悬浮窗。在超出悬浮窗显示最大个数限制时，打开新的悬浮窗会替换最近久未操作的悬浮窗。

悬浮窗的类型

悬浮窗的常见类型主要分为如下两种：

  • 竖向悬浮窗：一般用于新闻资讯、社交以及购物类应用等场景。

image.png

  • 横向悬浮窗：主要用于横向游戏和视频全屏播放的场景。

image.png

悬浮窗的触发及恢复方式

悬浮窗的触发方式有以下两种：

  • 手势触发：应用全屏时从屏幕底部向上滑至右上方热区，松手后可开启悬浮窗模式。

image.png

  • 通知消息下拉触发：在系统接收到通知消息未收起时，可直接下拉此通知消息开启悬浮窗模式。

image.png

**悬浮窗的恢复方式主要有以下两种：**
  • 多任务中心中恢复：对于已开启悬浮窗模式的应用，在进入多任务中心时，悬浮窗应用同全屏应用一起显示在多任务中心，用户选择点击悬浮窗应用卡片时可恢复悬浮窗模式。

image.png

  • 侧边条恢复：对于已开启悬浮窗模式的应用，其最小化后会暂存在屏幕上的侧边条中，点击或者长按侧边条可展开任务选择界面，选择点击侧边条中悬浮窗应用卡片时可恢复悬浮窗模式。

image.png

分屏

分屏一般用于两个应用长时间并行使用的场景。例如边看购物攻略、边浏览商品；边看视频、边玩游戏；看学习类视频的同时做笔记等。

分屏的触发方式

分屏通过手势触发：应用全屏时，从屏幕底部向上滑至左上方热区，进入待分屏状态，点击桌面另一个支持分屏的应用图标或卡片，可形成分屏。

image.png

智慧多窗应用适配指导

适配智慧多窗

应用声明支持智慧多窗

当应用需要智慧多窗的能力时，可以通过在module.json5配置文件中对应标签添加相关字段声明支持。

声明支持悬浮窗

开发者可以通过在module.json5配置文件中abilities标签下的supportWindowMode属性增加“floating”字段或使用缺省值以声明应用支持悬浮窗。

说明

supportWindowMode缺省值为[“fullscreen”, “split”, “floating”]。

supportWindowMode属性主要标识当前UIAbility所支持的窗口模式，支持的字段及含义如下表所示。

image.png

在应用声明支持智慧多窗后，还可根据业务场景的需要配置是否支持横向悬浮窗或上下分屏模式。

当应用需要支持横向悬浮窗时，开发者可以通过在module.json5配置文件中abilities标签下的preferMultiWindowOrientation属性增加“landscape”或者“landscape_auto”配合API以声明应用支持横向悬浮窗或上下分屏模式。

preferMultiWindowOrientation属性主要标识当前UIAbility组件多窗布局方向，支持的字段及含义如下表所示。
image.png

image.png

声明支持分屏

开发者可以通过在module.json5配置文件中abilities标签下的supportWindowMode属性增加“split”字段或使用缺省值以声明应用支持分屏。

说明

supportWindowMode缺省值为[“fullscreen”, “split”, “floating”]。

supportWindowMode属性主要标识当前UIAbility所支持的窗口模式，支持的字段及含义如下表所示。

image.png

应用布局适配智慧多窗的意义

由于应用从全屏进入智慧多窗（悬浮窗/分屏）模式后，窗口尺寸、宽高比例会发生变化，所以需要开发者适配应用窗口在不同尺寸、不同比例下的自适应布局，以确保应用窗口在各种形态下都能呈现出最佳的视觉效果，提供更好的用户体验。

悬浮窗的比例

不同设备支持悬浮窗的比例如下所示：

image.png

说明

  • 手机：悬浮窗模式下，应用窗口真实宽度为屏幕宽度。竖向时，高度根据宽高比3 : 4.575动态调整；横向时，高度根据宽高比16 : 9动态调整。
  • 折叠屏手机展开态：悬浮窗模式下，应用窗口真实宽度为折叠屏手机折叠态时的屏幕宽度。竖向时，高度根据宽高比9 : 16动态调整；横向时，高度根据宽高比16 : 9动态调整。

分屏的比例

目前支持两种分屏样式：“上下分屏”和“左右分屏”。

image.png

分屏比例指的是分屏下两应用间尺寸的比例，调整分屏比例会调整应用窗口的大小。

默认形成分屏后分屏比例为1:1，拖动中间的分屏条可以改变分屏比例档位。手机“上下分屏”可调节档位1:2、1:1、2:1，“左右分屏”可调节档位为1:1。手机折叠屏展开态可调节档位只有1:1。

image.png

应用布局可以通过自适应布局和响应式布局来更新自身布局，避免出现截断、挤压、堆叠等现象:

  • 自适应布局
  • 响应式布局

应用布局适配智慧多窗的方案

无论是悬浮窗还是分屏，当应用进入智慧多窗模式时，应用的窗口尺寸发生变化，所以应用需要根据不同的窗口尺寸调整自身布局。

主要可以通过窗口的on(‘windowSizeChange’)方法实现对窗口尺寸大小变化的监听。再根据窗口的尺寸变化，更新调整自身应用布局以实现适配。

主要步骤和示例如下：

  1. 在onWindowStageCreate方法中，获取Window对象。
  2. 通过getWindowProperties方法返回值中的windowRect获取窗口尺寸，写入AppStorage中用于UI侧窗口尺寸的首次初始化赋值。
  3. 使用on('windowSizeChange)注册窗口尺寸变化时的监听，并写入AppStorage中供UI侧布局使用。
  4. UI侧通过@StorageLink绑定窗口尺寸后，AppStorage中属性key值对应的数据一旦改变，UI侧会同步修改。
  5. @StorageLink装饰的数据本身是状态变量，所以窗口尺寸发生变化时，会引起组件的重新渲染，开发者可以根据最新的窗口尺寸动态调整应用布局。
// EntryAbility.ets
import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    console.info('Ability onWindowStageCreate.');
    windowStage.getMainWindow().then((windowClass) => {
      // 获取窗口尺寸，存入AppStorage
      AppStorage.setOrCreate('winWidth', windowClass.getWindowProperties().windowRect.width);
      AppStorage.setOrCreate('winHeight', windowClass.getWindowProperties().windowRect.height);
      // 监听窗口尺寸变化
      windowClass.on('windowSizeChange', (windowSize) => {
        AppStorage.setOrCreate('winWidth', windowSize.width);
        AppStorage.setOrCreate('winHeight', windowSize.height);
      });
    });
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        console.error('Failed to load the content. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in loading the content.');
    });
  }
}

// Index.ets
@Entry
@Component
struct Index {
  // 初始化参数，这里会初始化为AppStorage中存储的值
  @StorageLink('winWidth') winWidth: number = 1260;
  @StorageLink('winHeight') winHeight: number = 2224;

  aboutToAppear() {
    console.info('Current window size. width: ' + this.winWidth + ', height: ' + this.winHeight);
  }

  build() {
    Row() {
      // 根据winWidth、winHeight动态调整应用布局
      // ...
    }
    .size({
      width: px2vp(this.winWidth),
      height: px2vp(this.winHeight)
    })
  }
}

顶部窗口控制条避让适配智慧多窗

顶部窗口控制条是应用窗口处于智慧多窗模式下，应用顶部的操作横条image.png

顶部窗口控制条示意图如下所示：

image.png

顶部横条的避让可通过以下两种方式适配：

  • 使用窗口的避让能力：通过setWindowLayoutFullScreen设置窗口布局是否为沉浸式布局。

    沉浸式布局是指应用布局不避让状态栏、导航栏以及智慧多窗顶部横条，这可能发生组件与顶部横条的重叠，导致文字遮挡、点击事件冲突等情况。非沉浸式布局是指布局避让状态栏、导航栏以及智慧多窗顶部横条，组件不会与其重叠。因此可设置isLayoutFullScreen值为false使窗口的布局为非沉浸式布局。

image.png

示例：

// Index.ets
import { BusinessError } from '@kit.BasicServicesKit';
import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = '非沉浸式布局';
  private windowClass: window.Window | undefined = undefined;

  aboutToAppear(): void {
    try {
      window.getLastWindow(getContext(this), (err: BusinessError, data) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
          return;
        }
        this.windowClass = data;
        console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
      });
    } catch (exception) {
      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
    }
  }

  private setWindowLayoutFullScreen(isLayoutFullScreen: boolean) {
    if (!this.windowClass) {
      return;
    }
    try {
      this.windowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err: BusinessError) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in setting the window layout to full-screen mode.');
      });
    } catch (exception) {
      console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(exception));
    }
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column() {
        Text(this.message)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
          .margin({
            top: '2%',
            bottom: '40%'
          })

        Button() {
          Text('设置窗口为沉浸式布局')
            .fontSize(18)
            .fontWeight(FontWeight.Normal)
        }
        .type(ButtonType.Normal)
        .borderRadius(15)
        .margin({ top: 20 })
        .stateStyles({
          normal: {
            .backgroundColor('#ff6b89d4')
          },
          pressed: {
            .backgroundColor('#ffc81f2a')
          }
        })
        .width('60%')
        .height('6%')
        .onClick(() => {
          this.setWindowLayoutFullScreen(true);
          this.message = '沉浸式布局';
        })

        Button() {
          Text('设置窗口为非沉浸式布局')
            .fontSize(18)
            .fontWeight(FontWeight.Normal)
        }
        .type(ButtonType.Normal)
        .borderRadius(15)
        .margin({ top: 20 })
        .stateStyles({
          normal: {
            .backgroundColor('#ff6b89d4')
          },
          pressed: {
            .backgroundColor('#ffc81f2a')
          }
        })
        .width('60%')
        .height('6%')
        .onClick(() => {
          this.setWindowLayoutFullScreen(false);
          this.message = '非沉浸式布局';
        })
      }
      .width('100%')
    }
    .backgroundColor('#fceaeaea')
    .height('100%')
  }
}
  • 应用主动避让：应用不使用窗口避让能力（即设置窗口为沉浸式布局），还通过getWindowAvoidArea接口可获取屏幕顶部需要规避的矩阵区域topRect，获取到该值后应用可对应做布局避让。同时可通过on(‘avoidAreaChange’)监听系统规避区域变化以进行布局的动态调整。
// Index.ets
import { BusinessError } from '@kit.BasicServicesKit';
import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State topSafeHeight: number = 0;

  aboutToAppear(): void {
    try {
      let windowClass: window.Window | undefined = undefined;
      window.getLastWindow(getContext(this), (err: BusinessError, data) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
          return;
        }
        windowClass = data;
        windowClass.setWindowLayoutFullScreen(true);
        this.topSafeHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height);
        windowClass.on('avoidAreaChange', (data) => {
          if (data.type == window.AvoidAreaType.TYPE_SYSTEM) {
            this.topSafeHeight = px2vp(data.area.topRect.height)
          }
        })
        console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
      });
    } catch (exception) {
      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
    }
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      // 顶部避让区域
      Row() {
      }
      .height(this.topSafeHeight)
      .width("100%")

      // 根据topSafeHeight动态调整应用布局
      // ...
    }
    .height('100%')
  }
}

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

在这里插入图片描述

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (HarmonyOS)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档

在这里插入图片描述

代码改变世界996
关注
  • 16
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
精通HarmonyOS：高级应用开发技术与实战指南"
07-07
### 精通HarmonyOS：高级应用开发技术与实战指南 #### 一、深入理解HarmonyOS架构 - **架构概述**：HarmonyOS采用了微内核设计，旨在为多设备提供统一的操作系统框架。这包括分布式软总线、分布式数据管理等核心...
HarmonyOS应用开发进阶.pdf
11-14
总的来说，HarmonyOS 应用开发进阶涵盖了从系统原理到实践操作的全方位知识，旨在帮助开发者充分利用 HarmonyOS 的优势，构建创新、高效的多设备应用。随着 HarmonyOS 生态的不断壮大，掌握这些技能对于开发者来说将...
OpenHarmony开发记录-屏幕方向配置（横屏、竖屏、自动）
m0_65179181的博客
11-15 1314
abilities标签描述UIAbility组件的配置信息，标签值为数组类型，该标签下的配置只对当前UIAbility生效。表6abilities标签说明属性名称含义数据类型是否可缺省name标识当前UIAbility组件的名称，确保该名称在整个应用中唯一。取值为长度不超过127字节的字符串，不支持中文。字符串该标签不可缺省。srcEntry标识入口UIAbility的代码路径，取值为长度不超过127字节的字符串。字符串该标签不可缺省。launchType。
HarmonyOS Next开发学习手册——智慧多窗
maniuT的博客
07-21 1021
智慧多窗是一种多任务处理解决方案，它允许用户在同一时间、同一屏幕上以悬浮窗或分屏的方式同时运行多个应用窗口。在智慧多窗的显示模式下，用户可以根据自己的需求，合理安排应用窗口的位置和大小。
HarmonyOS开发实战—如何实现应用悬浮窗
m0_70749039的博客
03-20 1808
本文主要介绍如何利用应用子窗口实现应用内全局悬浮窗，创建应用子窗口需要先拿到窗口管理器 WindowStage 对象，在 EntryAbility.onWindowStageCreate() 回调中取。
HarmonyOS Next开发学习手册——应用数据迁移适配指导指南（二）
maniuT的博客
07-24 843
开发者可以在BackupExtension.ts文件中自定义类继承BackupExtensionAbility，通过重写其中的onBackup和onRestore方法，自定义应用数据的转换和迁移。开发者需要在应用配置文件module.json5中进行注册，其中注册类型type需要设置为backup，元数据信息metadata需要新增一个name为ohos.extension.backup的条目。单个应用设定的最长数据迁移时间为十五分钟，超过十五分钟还未完成应用数据迁移的应用，应用数据迁移会失败。
HarmonyOS 鸿蒙应用开发(十、第三方开源js库移植适配指南)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
02-07 7114
js-e2e是基于eslint进行封装、配置规则，用于分析JS库代码对NodeJS和Web浏览器的内置模块、对象的依赖及兼容ES标准版本的工具，支持检查指定源码目录和指定三方库的兼容性。te。
HarmonyOS开发实战指南：横竖屏开发实践
DMZDAMS的博客
07-14 1595
在开发时，部分应用需要提供全屏按钮，让用户选择开启横竖屏播放，另外我们也需要考虑系统是否开启了方向锁定，在方向锁定的情况下，用户只能通过手动横屏来实现全屏，而在方向没有锁定下，用户将设备横向的情况下，应用需要自动切换到横屏进行播放。
HarmonyOS驱动开发实战指南：分层架构设计
DMZDAMS的博客
07-12 1146
HarmonyOS应用的分层架构主要包括三个层次：产品定制层、基础特性层和公共能力层，为开发者构建了一个清晰、高效、可扩展的设计架构。
HarmonyOS Next开发学习手册——设备升级应用数据迁移适配指南（一）
maniuT的博客
07-24 926
终端设备从HarmonyOS 3.1 Release API 9及之前版本（简称HarmonyOS）升级到HarmonyOS NEXT Developer Preview1及之后版本（简称HarmonyOS NEXT）时，原HarmonyOS中运行的APK应用，升级后需要切换为HarmonyOS NEXT中的HarmonyOS原生应用（简称HarmonyOS应用）。开发者完成适配，APK应用切换为HarmonyOS应用后，可继承原APK应用中适配HarmonyOS应用的数据。
harmonyos 应用开发者高级介绍文档
07-06
总之，作为一个 HarmonyOS 应用开发者，深刻理解并熟练掌握上述知识点对于开发出高质量、多场景适配的应用程序至关重要。随着 HarmonyOS 生态系统的不断完善和发展，未来将有更多的机会等待着开发者们去探索和挖掘。
HarmonyOS 开发平台和工具
02-11
- **超级终端应用/服务**：针对多设备间的协作，HarmonyOS支持超级终端应用开发，允许应用在不同设备之间自由切换和协同工作。 - **服务化无处不在**：通过原子化服务，开发者可以构建小型、独立的功能模块，这些...
华为鸿蒙HarmonyOS开发者资料大全鸿蒙系统开发资料汇总.zip
06-16
鸿蒙系统是面向全场景的分布式操作...HarmonyOS应用开发之页面开发.pdf HarmonyOS开发必备基础知识.pdf WLAN开发指南.pdf 图像开发.pdf 方舟编译器使用指南.pdf 相机设备的开发.pdf 视频开发.pdf 音频开发与管理.pdf
【鸿蒙学习】Stage模型与FA模型的对比与应用选择
一个不断前行的程序者
08-12 394
Stage模型是一种基于应用生命周期和功能模块划分的架构设计理念。它将应用分为多个阶段（Stage），每个阶段对应一个特定的任务或界面，使得应用结构更加清晰、开发更加高效。FA模型（Feature Ability Model）是鸿蒙OS中另一种应用架构设计理念，它以功能为单元，将应用划分为多个功能模块（Feature Ability），每个模块具有独立的生命周期和功能。Stage模型和FA模型各有优势，适用于不同的开发场景。普通开发者应根据项目需求、团队协作、性能要求等因素，选择最合适的模型。
HarmonyOS应用开发学习-ArkUI-容器组件
最新发布
08-15 838
设置导航点样式:-left: 设置导航点距离Swiper组件左边的距离。-size:设置导航点的直径。例如,"1fr 1fr 2fr'是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。例如,"1fr 1fr 2fr”是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。网格容器，由“行”和“列”分割的单元格所组成，通过指定”项目”所在的单元格做出各种各样的布局。设置为false是为横向Tabs，设置为true时为纵向Tabs。
鸿蒙（API 12 Beta3版）【扩展屏投播开发指导】使用投播组件
鸿蒙的技术博客
08-14 1135
通过本节开发指导，可在系统镜像投屏后，获取投屏设备信息，实现扩展屏模式的投播，实现双屏协作的能力。
HarmonyOS Developer之生成二维码
weixin_47988426的博客
08-14 314
生成二维码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值