【鸿蒙实战开发】基于子窗口实现应用内悬浮窗

CTrup

于 2024-09-05 17:15:18 发布

阅读量536

点赞数 4

分类专栏：鸿蒙开发 HarmonyOS 移动开发文章标签： harmonyos 系统架构鸿蒙移动开发软件开发界面布局 ArkUI

本文链接：https://blog.csdn.net/CTrup/article/details/141936203

版权

鸿蒙开发同时被 3 个专栏收录

98 篇文章 0 订阅

订阅专栏

移动开发

98 篇文章 1 订阅

订阅专栏

HarmonyOS

60 篇文章 0 订阅

订阅专栏

往期知识点整理

场景描述

app应用会使用悬浮窗/悬浮球的方式来给用户展示一些应用重要&便捷功能的入口，类似android和iOS应用中常见的应用内可拖拽的悬浮球和小窗口视频悬浮窗，点击悬浮窗修改悬浮窗样式和响应事件跳转页面，在跳转页面后依然可以显示在屏幕中上个页面拖拽后的固定位置等。

应用经常会遇到如下的业务诉求：

场景一：通过事件添加和移除悬浮窗，悬浮窗样式可定制（暂定两种，无白边圆球形和小视频播放窗口类型），可代码修改位置和布局。
场景二：创建悬浮窗后，主窗口的系统侧滑返回事件可正常使用。
场景三：可响应正常点击事件，可通过触发拖动使悬浮窗的移动，根据最后手势停留位置，做动画靠屏幕左或靠右显示，跳转和返回上级页面后悬浮窗依然存在，且相对手机屏幕位置不变。
场景四：悬浮窗内组件事件触发主窗口的页面跳转（Router和Navigation两种都要有）。
场景五：悬浮窗的窗口大小自适应组件，子窗口中页面设置了宽高，需要让子窗口自适应页面组件大小。
场景六：支持控制悬浮窗隐藏和销毁。
场景七：视频类应用主动调用画中画完成后台播放，以及返回桌面时自动启动画中画。

方案描述

场景一：

通过事件添加和移除悬浮窗，悬浮窗样式可定制（暂定两种，无白边圆球形和小视频播放窗口类型），可代码修改位置和布局。

效果图

方案

通过子窗口创建windowStage.createSubWindow(‘mySubWindow’)，和windowClass.setWindowLayoutFullScreen去除白边。

核心代码

在EntryAbility中获取WindowStage。

onWindowStageCreate(windowStage: window.WindowStage): void {

  // Main window is created, set main page for this ability

  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/Page', (err, data) => {

  if (err.code) {

  hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');

  return;

}

// 保存窗口管理器

AppStorage.setOrCreate("windowStage", windowStage);

hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');

});

}

创建子窗口，子窗口样式由子窗口加载的页面组件样式决定。

this.windowStage.createSubWindow("mySubWindow", (err, windowClass) => {

  if (err.code > 0) {

    console.error("failed to create subWindow Cause:" + err.message)

    return;

  }

  try {

    // 设置子窗口加载页

    windowClass.setUIContent("pages/MySubWindow", () => {

      windowClass.setWindowBackgroundColor("#00000000")

    });

    // 设置子窗口左上角坐标

    windowClass.moveWindowTo(0, 200)

    // 设置子窗口大小

    windowClass.resize(vp2px(75), vp2px(75))

    // 展示子窗口

    windowClass.showWindow();

    // 设置子窗口全屏化布局不避让安全区

    windowClass.setWindowLayoutFullScreen(true);

  } catch (err) {

    console.error("failed to create subWindow Cause:" + err)

  }

})

场景二：

创建悬浮窗后，主窗口的系统侧滑返回事件可正常使用。

效果图

方案

通过window.shiftAppWindowFocus转移窗口焦点实现创建子窗口后，主窗口依然可以响应事件。核心代码

在子窗口中将焦点转移到主窗口。

onPageShow(): void {

  setTimeout(() => {

  // 获取子窗口ID

  let subWindowID: number = window.findWindow("mySubWindow").getWindowProperties().id

  // 获取主窗口ID

  let mainWindowID: number = this.windowStage.getMainWindowSync().getWindowProperties().id

  // 将焦点从子窗口转移到主窗口

  window.shiftAppWindowFocus(subWindowID, mainWindowID)

}, 500)

}

场景三：

可响应正常点击事件，可通过拖动触发悬浮窗的拖拽移动，根据最后手势停留位置，做动画靠屏幕左或靠右显示，跳转和返回上级页面后悬浮窗依然存在，且相对手机屏幕位置不变。

效果图

方案

通过设置手势顺序模式识别PanGesture，实现拖拽悬浮窗。

核心代码

创建Position。

interface Position {

  x: number,

  y: number

}

设置拖拽选项。

private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });

通过在子窗口父组件绑定拖拽动作完成悬浮窗坐标移动。

.gesture(

  // 声明该组合手势的类型为Sequence类型

  PanGesture(this.panOption)

    .onActionStart((event: GestureEvent) => {

      console.info('Pan start');

    })// 发生拖拽时，获取到触摸点的位置，并将位置信息传递给windowPosition

    .onActionUpdate((event: GestureEvent) => {

      this.windowPosition.x += event.offsetX;

      this.windowPosition.y += event.offsetY;

      this.subWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y)

    })

    .onActionEnd((event: GestureEvent) => {

      // 贴边判断

      if (event.offsetX > 0) {

        this.windowPosition.x = display.getDefaultDisplaySync().width - this.subWindow.getWindowProperties()

          .windowRect

          .width;

      } else if (event.offsetX < 0) {

        this.windowPosition.x = 0;

      }

      this.subWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y)

      console.info('Pan end');

    })

)

场景四：

悬浮窗内组件事件触发主窗口的页面跳转（Router和Navigation两种都要有）。

方案

通过获取窗口上下文，实现在悬浮窗点击后，实现主窗口Router跳转。

通过配置NavPathStack全局变量，实现主窗口navigation跳转。

核心代码

通过windowStage获取主窗口的Router，实现主窗口的Router跳转。

.onClick((event: ClickEvent) => {

  this.windowStage.getMainWindowSync()

    .getUIContext()

    .getRouter()

    .back()

})

通过AppStorage获取NavPathStack，实现主窗口navigation跳转。

.onClick((event: ClickEvent) => {

  let navPath = AppStorage.get("pageInfos") as NavPathStack;

  navPath.pushPath({ name: 'pageOne' })

})

场景五：

悬浮窗的窗口大小自适应组件，子窗口中页面设置了宽高，需要让子窗口自适应页面组件大小。

效果图

方案

通过监听通用事件ComponentObserver，设置window的resize调整窗口大小。

核心代码

查找子窗口。

@State subWindow: window.Window = window.findWindow("mySubWindow");

注册监听事件。

//监听id为COMPONENT_ID的组件回调事件listener: inspector.ComponentObserver = inspector.createComponentObserver('COMPONENT_ID');

通过onClick()事件，实现对组件变化的监听。

if (this.flag) {

  Image($r("app.media.voice2"))

    .id("COMPONENT_ID")

    .borderRadius(5)

    .width(75)

    .height(75)

    .onClick(() => {

      // 设置图标切换标识

      this.flag = !this.flag

      this.listener.on('layout', () => {

        // 监听布局变更后调整子窗大小

        this.subWindow.resize(componentUtils.getRectangleById("COMPONENT_ID").size.width,

          componentUtils.getRectangleById("COMPONENT_ID").size.height)

      })

    })

} else {

  Image($r("app.media.voice"))

    .id("COMPONENT_ID")

    .borderRadius(50)

    .width(100)

    .height(100)

    .onClick(() => {

      this.flag = !this.flag

      this.listener.on('layout', () => {

        this.subWindow.resize(componentUtils.getRectangleById("COMPONENT_ID").size.width,

          componentUtils.getRectangleById("COMPONENT_ID").size.height)

      })

    })

场景六：

支持控制悬浮窗隐藏和销毁。

效果图

方案

通过设置窗口windowClass.minimize和windowClass.destroyWindow，实现悬浮窗的隐藏和销毁。

核心代码

通过调用minimize，实现子窗口最小化。

.onClick((event: ClickEvent) => {

  this.subWindow.minimize()

})

通过实现destroyWindow，实现子窗口的资源销毁。

// 通过查找子窗口名称对子窗口进行销毁

window.findWindow("mySubWindow").destroyWindow()

场景七：

视频类应用主动调用画中画完成后台播放，以及返回桌面时自动启动画中画。

效果图

方案

1.通过pipController.startPiP()完成主动调用画中画功能。

2.通过pipController.setAutoStartEnabled(true)在返回桌面时完成全局画中画播放。

核心代码

创建XComponent组件。

XComponent({ id: 'pipDemo', type: 'surface', controller: this.mXComponentController })

  .onLoad(() => {

    this.surfaceId = this.mXComponentController.getXComponentSurfaceId();

    // 需要设置AVPlayer的surfaceId为XComponentController的surfaceId

    this.player = new AVPlayerDemo(this.surfaceId);

    this.player.avPlayerFdSrcDemo();

  })

  .onDestroy(() => {

    console.info(`[${TAG}] XComponent onDestroy`);

  })

  .size({ width: '100%', height: '800px' })

创建pipWindowController和startPip方法。

startPip() {

  if (!pipWindow.isPiPEnabled()) {

    console.error(`picture in picture disabled for current OS`);

    return;

  }

  let config: pipWindow.PiPConfiguration = {

    context: getContext(this),

    componentController: this.mXComponentController,

    // 当前page导航id

    navigationId: this.navId,

    // 对于视频通话、视频会议等场景，需要设置相应的模板类型

    templateType: pipWindow.PiPTemplateType.VIDEO_PLAY,

    // 可选，创建画中画控制器时系统可通过XComponent组件大小设置画中画窗口比例

    contentWidth: 800,

    // 可选，创建画中画控制器时系统可通过XComponent组件大小设置画中画窗口比例

    contentHeight: 600,

  };

  // 步骤1：创建画中画控制器，通过create接口创建画中画控制器实例

  let promise: Promise<pipWindow.PiPController> = pipWindow.create(config);

  promise.then((controller: pipWindow.PiPController) => {

    this.pipController = controller;

    // 步骤1：初始化画中画控制器

    this.initPipController();

    // 步骤2：通过startPiP接口启动画中画

    this.pipController.startPiP().then(() => {

      console.info(`Succeeded in starting pip.`);

    }).catch((err: BusinessError) => {

      console.error(`Failed to start pip. Cause:${err.code}, message:${err.message}`);

    });

  }).catch((err: BusinessError) => {

    console.error(`Failed to create pip controller. Cause:${err.code}, message:${err.message}`);

  });

}

初始化pipWindowController。

initPipController() {

  if (!this.pipController) {

    return;

  }

  // 通过setAutoStartEnabled接口设置是否需要在应用返回桌面时自动启动画中画，注册stateChange和controlPanelActionEvent回调

  this.pipController.setAutoStartEnabled(true/*or true if necessary*/); // 默认为false

  this.pipController.on('stateChange', (state: pipWindow.PiPState, reason: string) => {

    this.onStateChange(state, reason);

  });

  this.pipController.on('controlPanelActionEvent', (event: pipWindow.PiPActionEventType) => {

    this.onActionEvent(event);

  });

}

完成画中画播放使用stopPip方法停止。

stopPip() {

  if (this.pipController) {

    let promise: Promise<void> = this.pipController.stopPiP();

    promise.then(() => {

      console.info(`Succeeded in stopping pip.`);

      this.pipController?.off('stateChange'); // 如果已注册stateChange回调，停止画中画时取消注册该回调

      this.pipController?.off('controlPanelActionEvent'); // 如果已注册controlPanelActionEvent回调，停止画中画时取消注册该回调

    }).catch((err: BusinessError) => {

      console.error(`Failed to stop pip. Cause:${err.code}, message:${err.message}`);

    });

  }

}

其他常见问题

Q：windowStage怎么获取？

A：WindowStage需要在EntryAbility中的onWindowStageCreate中用AppStorage.setOrCreate()获取。

Q：子窗口可以用于应用外么？

A：子窗口只能在应用内使用。

Q：子窗口的默认大小是多大？

A：子窗口默认不设置大小的话是除安全区外的屏幕区域。

Q：UIExtension可以用子窗口么？

A：UIExtension不是窗口对象，没有办法调用窗口接口。

Q：Har和Hsp中可以使用子窗口么？

A：只要能获取到windowStage就能创建并使用子窗口。

总是有很多小伙伴反馈说：OpenHarmony开发不知道学习哪些技术？不知道需要重点掌握哪些OpenHarmony开发知识点？ 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开发学习路线与学习文档给大家用来跟着学习。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等）技术知识点。

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）:`https://gitcode.com/HarmonyOS_MN/733GH/overview`

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

在这里插入图片描述

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

在这里插入图片描述

鸿蒙开发面试真题（含参考答案）:`https://gitcode.com/HarmonyOS_MN/733GH/overview`

在这里插入图片描述

OpenHarmony 开发环境搭建

《OpenHarmony源码解析》:`https://gitcode.com/HarmonyOS_MN/733GH/overview`

搭建开发环境
Windows 开发环境的搭建
Ubuntu 开发环境搭建
Linux 与 Windows 之间的文件共享
……
系统架构分析
构建子系统
启动流程
子系统
分布式任务调度子系统
分布式通信子系统
驱动子系统
……

OpenHarmony 设备开发学习手册:`https://gitcode.com/HarmonyOS_MN/733GH/overview`

CTrup

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【鸿蒙实战开发】基于子窗口实现应用内悬浮窗

app应用会使用悬浮窗/悬浮球的方式来给用户展示一些应用重要&便捷功能的入口，类似android和iOS应用中常见的应用内可拖拽的悬浮球和小窗口视频悬浮窗，点击悬浮窗修改悬浮窗样式和响应事件跳转页面，在跳转页面后依然可以显示在屏幕中上个页面拖拽后的固定位置等。：可响应正常点击事件，可通过触发拖动使悬浮窗的移动，根据最后手势停留位置，做动画靠屏幕左或靠右显示，跳转和返回上级页面后悬浮窗依然存在，且相对手机屏幕位置不变。：悬浮窗的窗口大小自适应组件，子窗口中页面设置了宽高，需要让子窗口自适应页面组件大小。
复制链接

扫一扫