未验证 提交 094f79c8 编写于 作者: D duangavin123 提交者: Gitee

update zh-cn/third-party-cases/immersion-mode.md.

Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
上级 08955c55
# 沉浸式应用开发
# 沉浸式界面开发
## 场景说明
沉浸式界面通常是指全屏显示,即当前画面占据整个屏幕。画面放大的同时,让用户摆脱无关信息的干扰,带给用户沉浸式的体验。常见的场景有:视频播放、游戏等。本例即为大家介绍如何开发沉浸式界面。
......@@ -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
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册