diff --git a/zh-cn/third-party-cases/immersion-mode.md b/zh-cn/third-party-cases/immersion-mode.md index 0a25d80d9c2a2e1d8ecd36a1341e9a8815eaf12c..3932d60fb5483843e5499c8537d4c83773a05d88 100644 --- a/zh-cn/third-party-cases/immersion-mode.md +++ b/zh-cn/third-party-cases/immersion-mode.md @@ -1,4 +1,4 @@ -# 沉浸式应用开发 +# 沉浸式界面开发 ## 场景说明 沉浸式界面通常是指全屏显示,即当前画面占据整个屏幕。画面放大的同时,让用户摆脱无关信息的干扰,带给用户沉浸式的体验。常见的场景有:视频播放、游戏等。本例即为大家介绍如何开发沉浸式界面。 @@ -8,7 +8,7 @@ | 方案一:颜色背景铺满 | 方案二:图片背景铺满 | 方案三:背景铺满的同时、状态栏不可见 | | ----------------------------------- | --------------------------------------------- | ------------------------------------- | -| ![fullcolor](figures/fullcolor.PNG) | ![fullbackground](figures/fullbackground.PNG) | ![fullscreen](figures/fullscreen.png) | +| ![fullcolor](figures/fullcolor.PNG) | ![fullbackground](figures/fullbackground.PNG) | ![fullscreen](figures/fullscreen.PNG) | ## 运行环境 @@ -24,10 +24,12 @@ - 图片背景通铺:将状态栏、导航栏的背景色设置为透明以便呈现应用界面的背景,同时通过 windowClass.on接口获取到状态栏、导航栏的区域信息,进行规避处理,以免状态栏、导航栏的内容遮挡住应用内容。 - 隐藏导航栏和状态栏:使用setWindowSystemBarEnable设置导航栏和状态栏为隐藏状态。 -**说明**:沉浸式的设置最好放在ability的onWindowStageCreate的生命周期里,此时刚好可以获取窗口的信息,放在页面页面生命周期里会出现窗口大小不一致,影响体验。 +> ![icon-note.gif](../device-dev/public_sys-resources/icon-note.gif) **说明:** +> 沉浸式的设置最好放在ability的onWindowStageCreate的生命周期里,此时刚好可以获取窗口的信息,放在页面页面生命周期里会出现窗口大小不一致,影响体验。 下文将分别介绍这三种方案的具体开发步骤。 + ## 开发步骤 ### 颜色背景通铺 此方案通过调用setWindowSystemBarProperties接口将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色,以达到界面全屏的效果。 @@ -73,7 +75,7 @@ struct Type2 { } } ``` -此方案的优势在于不用像方案2一样,需要处理应用窗口和状态栏、导航栏窗口的遮挡关系,因为此方案没有使用setWindowLayoutFullScreen 接口设置沉浸式布局,所以三个窗口是平铺的,不会重叠。劣势在于无法将应用的背景图等信息延伸到状态栏、导航栏窗口中。适用于扁平化设计风格的应用。 +此方案的优势在于不需要处理应用窗口和状态栏、导航栏窗口的遮挡关系,因为此方案没有使用setWindowLayoutFullScreen 接口设置沉浸式布局,所以三个窗口是平铺的,不会重叠。劣势在于无法将应用的背景图等信息延伸到状态栏、导航栏窗口中。适用于扁平化设计风格的应用。 ### 图片背景通铺 这种方案可以实现图片背景的通铺,同时又能避免状态栏和导航栏的内容跟应用内容相互遮挡,导致显示效果异常。 @@ -87,6 +89,7 @@ struct Type2 { | TYPE_SYSTEM_GESTURE9+ | 2 | 表示手势区域。 | | TYPE_KEYBOARD9+ | 3 | 表示软键盘区域 | 具体代码如下: + **page代码** ```ts