基于鸿蒙API10的RTSP播放器(四:沉浸式播放窗口)

前言:

典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条,其中状态栏和导航条,通常在沉浸式布局下称为避让区;避让区之外的区域称为安全区。

开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感,从而使用户获得最佳的UI体验。

我们在前面三节中的播放器,都有顶部状态栏何底部导航栏,为此我们可以通过把应用设置为全屏来实现沉浸式播放的效果。

方法:

  • 窗口全屏布局方案:调整布局系统为全屏布局,界面元素延伸到状态栏和导航条区域实现沉浸式效果。当不隐藏避让区时,可通过接口查询状态栏和导航条区域进行可交互元素避让处理,并设置状态栏或导航条的颜色等属性与界面元素匹配。当隐藏避让区时,通过对应接口设置全屏布局即可。
  • 组件安全区方案:布局系统保持安全区内布局,然后通过接口延伸绘制内容(如背景色,背景图)到状态栏和导航条区域实现沉浸式效果。该方案下,界面元素仅做绘制延伸,无法单独布局到状态栏和导航条区域,针对需要单独布局UI元素到状态栏和导航条区域的场景建议使用窗口全屏布局方案处理。

代码:

TS 复制代码
// 这里是ArkTS代码,写TS是为了代码有颜色效果

import AbilityConstant from '@ohos.app.ability.AbilityConstant';  
import hilog from '@ohos.hilog';  
import UIAbility from '@ohos.app.ability.UIAbility';  
import Want from '@ohos.app.ability.Want';  
import window from '@ohos.window';  
import { BusinessError } from '@kit.BasicServicesKit';  
  
export default class EntryAbility extends UIAbility {  
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');  
  }  
  
  onDestroy(): void {  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');  
  }  
  
  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/Index', (err) => {  
  
      // 设置全屏  
      let windowClass:window.Window = windowStage.getMainWindowSync();  
      windowClass.setWindowLayoutFullScreen(true)  
        .then(()=>{  
          console.info("plumcarefree Successfully set Full Window")  
        })  
        .catch((err:BusinessError)=>{  
          console.error("plumcarefree Nosuccessfully set Full Window")  
        })  
  
      if (err.code) {  
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');  
        return;  
      }  
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');  
    });  
  }  
  
  onWindowStageDestroy(): void {  
    // Main window is destroyed, release UI related resources  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');  
  }  
  
  onForeground(): void {  
    // Ability has brought to foreground  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');  
  }  
  
  onBackground(): void {  
    // Ability has back to background  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');  
  }  
}
相关推荐
xmdy586611 分钟前
Flutter+开源鸿蒙实战|智联邻里Day5 闲置详情页+删除功能+下拉刷新+交互优化
flutter·开源·harmonyos
maaath34 分钟前
【maaath】Flutter for OpenHarmony 媒体工具应用开发实战
flutter·华为·harmonyos
研究点啥好呢1 小时前
网易Java后端开发工程师面试题精选:10道高频考题+答案解析
华为·数据挖掘·数据分析
nashane1 小时前
HarmonyOS 6学习:应用推广引擎评论管理与长截图自动拼接实战
学习·华为·harmonyos·harmonyos 5
key_3_feng1 小时前
鸿蒙基于润和DAYU200(RK3568)开发板的系统移植与实战开发
华为·harmonyos
Swift社区1 小时前
Store + System:鸿蒙游戏黄金分层
游戏·华为·harmonyos
_waylau1 小时前
历时三年《鸿蒙系统(HarmonyOS)移动开发实战》简介
华为·harmonyos·鸿蒙·鸿蒙系统
想你依然心痛1 小时前
HarmonyOS 6(API 23)实战:打造“空间相册“——基于 Face AR 表情驱动 + 沉浸光感悬浮导航的 PC 端沉浸式照片浏览系统
华为·ar·harmonyos·悬浮导航·沉浸光感
maaath1 小时前
【maaath】 Flutter for OpenHarmony 快捷工具箱应用实战开发
flutter·华为·harmonyos
maaath2 小时前
【maaath】Flutter for OpenHarmony 实战:茶叶茶艺应用开发详解
flutter·华为·harmonyos