鸿蒙应用中如何为画中画窗口添加自定义UI？

Question

我想在画中画窗口上方显示一些自定义的UI元素，如播放时间、当前播放进度等。鸿蒙系统提供了相关API，但我不知道如何整合。能否给出一段代码，展示如何在画中画窗口中添加自定义UI？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

我来解答一下，
步骤概述

导入模块：首先，需要导入@ohos.PiPWindow模块。
创建画中画配置：配置画中画窗口的相关参数，如内容宽度、高度、导航ID等。
添加自定义UI控制器：在画中画配置中，添加自定义UI控制器。
创建并启动画中画：使用配置创建画中画控制器，并启动画中画窗口。

// 导入必要的模块
import { PiPWindow } from '@kit.ArkUI';

// 自定义UI控制器类
class CustomUIController extends NodeController {
    constructor(message: string) {
        super();
        this.message = message;
    }

    // 加载自定义布局
    makeNode(context: UIContext): FrameNode | null {
        this.textNode = new BuilderNode(context);
        this.textNode.build(wrapBuilder<[Params]>(buildText), new Params(this.message));
        return this.textNode.getFrameNode();
    }

    // 更新布局
    update(message: string) {
        if (this.textNode !== null) {
            this.textNode.update(new Params(message));
        }
    }
}

// 自定义布局构建函数
@Builder
function buildText(params: Params) {
    Column() {
        Text(params.text)
            .fontSize(20)
            .fontColor(Color.Red);
        // 可以在这里添加更多的UI元素，如进度条等
    }
    .width('100%') // 宽度方向充满画中画窗口
    .height('100%') // 高度方向充满画中画窗口;
}

// 画中画配置
let config: PiPWindow.PiPConfiguration = {
    context: getContext(this),
    componentController: mXComponentController, // 确保你已初始化XComponentController
    navigationId: 'page_1', // 假设当前页面的导航id为page_1
    templateType: PiPWindow.PiPTemplateType.VIDEO_PLAY,
    contentWidth: 800, // 假设当前内容宽度800px
    contentHeight: 600, // 假设当前内容高度600px
    controlGroups: [PiPWindow.VideoPlayControlGroup.VIDEO_PREVIOUS_NEXT],
    customUIController: new CustomUIController('自定义UI内容') // 设置自定义UI控制器
};

// 创建并启动画中画
PiPWindow.create(config)
    .then((pipController: PiPWindow.PiPController) => {
        pipController.startPiP();
        console.info('画中画窗口启动成功');
    })
    .catch((err: BusinessError) => {
        console.error('启动画中画窗口失败:', err);
    });

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。