• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 沉浸式界面开发
2
3## 场景说明
4沉浸式界面通常是指全屏显示,即当前画面占据整个屏幕。画面放大的同时,让用户摆脱无关信息的干扰,带给用户沉浸式的体验。常见的场景有:视频播放、游戏等。本例即为大家介绍如何开发沉浸式界面。
5
6## 效果呈现
7本例中的沉浸式界面有三种实现方式,对应效果如下:
8
9| 方案一:颜色背景铺满                | 方案二:图片背景铺满                          | 方案三:背景铺满的同时、状态栏不可见  |
10| ----------------------------------- | --------------------------------------------- | ------------------------------------- |
11| ![fullcolor](figures/fullcolor.PNG) | ![fullbackground](figures/fullbackground.PNG) | ![fullscreen](figures/fullscreen.PNG) |
12
13
14## 运行环境
15本例基于以下环境开发,开发者也可以基于其他适配的版本进行开发:
16
17- IDE: DevEco Studio 3.1 Beta2
18- SDK: Ohos_sdk_public 3.2.11.9(API Version 9 Release)
19
20## 实现思路
21如果一个应用想要获得沉浸式的体验,开发者可以通过以下三种方式进行实现:
22
23- 颜色背景通铺:使应用页面的背景色和状态栏、导航栏的背景色一致。可通过setWindowSystemBarProperties进行设置。
24- 图片背景通铺:将状态栏、导航栏的背景色设置为透明以便呈现应用界面的背景,同时通过 windowClass.on接口获取到状态栏、导航栏的区域信息,进行规避处理,以免状态栏、导航栏的内容遮挡住应用内容。
25- 隐藏导航栏和状态栏:使用setWindowSystemBarEnable设置导航栏和状态栏为隐藏状态。
26
27> ![icon-note.gif](../device-dev/public_sys-resources/icon-note.gif) **说明:**
28> 沉浸式的设置最好放在ability的onWindowStageCreate的生命周期里,此时刚好可以获取窗口的信息,放在页面页面生命周期里会出现窗口大小不一致,影响体验。
29
30下文将分别介绍这三种方案的具体开发步骤。
31
32
33## 开发步骤
34### 颜色背景通铺
35此方案通过调用setWindowSystemBarProperties接口将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色,以达到界面全屏的效果。
36
37具体代码如下:
38
39```ts
40import window from '@ohos.window';
41import common from '@ohos.app.ability.common';
42
43@Entry
44@Component
45struct Type2 {
46  @State message: string = 'Hello World'
47  // 获取UIAbility上下文
48  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
49  async setSystemBar() {
50    // 获取当前应用窗口
51    let windowClass:window.Window = await window.getLastWindow(context)
52    // 将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色
53    await windowClass.setWindowSystemBarProperties({
54      navigationBarColor: "#00FF00",
55      statusBarColor: "#00FF00",
56      navigationBarContentColor: "#00FF00",
57      statusBarContentColor: "#00FF00"
58    })
59  }
60
61  aboutToAppear() {
62    this.setSystemBar()
63  }
64
65  build() {
66    Row() {
67      Column() {
68        Text(this.message)
69          .fontSize(50)
70          .fontWeight(FontWeight.Bold)
71      }
72      .width('100%')
73    }
74    .height('100%')
75  }
76}
77```
78此方案的优势在于不需要处理应用窗口和状态栏、导航栏窗口的遮挡关系,因为此方案没有使用setWindowLayoutFullScreen 接口设置沉浸式布局,所以三个窗口是平铺的,不会重叠。劣势在于无法将应用的背景图等信息延伸到状态栏、导航栏窗口中。适用于扁平化设计风格的应用。
79
80### 图片背景通铺
81这种方案可以实现图片背景的通铺,同时又能避免状态栏和导航栏的内容跟应用内容相互遮挡,导致显示效果异常。
82为了能让应用的有效显示范围避开系统的状态栏和导航栏,以免内容重叠,我们可以通过windowClass.on(type: ‘avoidAreaChange’, callback: Callback<{AvoidAreaType, AvoidArea}>) 获取系统规避区域的大小,并对这一块区域做出相应的规避。
83其中回调参数AvoidArea是规避区域,可以通过其获取规避区域的具体范围;AvoidAreaType是规避区域的类型其取值如下,示例中需要规避的状态栏和导航栏属于TYPE_SYSTEM类型。
84
85| 名称                  | 值   | 说明               |
86| -------------------- | ---- | ----------------- |
87| TYPE_SYSTEM           | 0    | 表示系统默认区域。 |
88| TYPE_CUTOUT           | 1    | 表示刘海屏区域。   |
89| TYPE_SYSTEM_GESTURE9+ | 2    | 表示手势区域。     |
90| TYPE_KEYBOARD9+       | 3    | 表示软键盘区域     |
91具体代码如下:
92
93**page代码**
94
95```ts
96// index.ets
97@Entry
98@Component
99struct Type3 {
100  @State message: string = 'Hello World'
101  @StorageLink("topHeight") topHeight: number = 0
102  @StorageLink("bottomHeight") bottomHeight: number = 0
103
104  build() {
105    Column() {
106      // 在界面顶部放置一个Row组件,用于占位
107      Row() {
108
109      }
110      .width("100%")
111      // 设置Row组件的高度为状态栏的高度,可避免界面内容与状态栏内容重叠
112      .height(px2vp(this.topHeight))
113      Row() {
114        Text(this.message)
115          .fontSize(50)
116          .fontWeight(FontWeight.Bold)
117          .position({ x: 0, y: 0 })
118      }
119      .width("100%")
120      .flexGrow(1)
121      // 在界面底部放置一个Row组件,用于占位
122      Row() {
123
124      }
125      .width("100%")
126      // 设置Row组件的高度为导航栏的高度,可避免界面内容与导航栏内容重叠
127      .height(px2vp(this.bottomHeight))
128    }
129    .backgroundImage($r("app.media.icon"))
130    .backgroundImageSize(ImageSize.Cover)
131    .width("100%")
132    .height("100%")
133  }
134}
135```
136**ability代码**
137```ts
138// MainAbility.ts
139import window from '@ohos.window';
140
141async function enterImmersion(windowClass: window.Window) {
142    // 获取状态栏和导航栏的高度
143    windowClass.on("avoidAreaChange", ({ type, area }) => {
144        if (type == window.AvoidAreaType.TYPE_SYSTEM) {
145            // 将状态栏和导航栏的高度保存在AppStorage中
146            AppStorage.SetOrCreate<number>("topHeight", area.topRect.height);
147            AppStorage.SetOrCreate<number>("bottomHeight", area.bottomRect.height);
148        }
149    })
150    // 设置窗口布局为沉浸式布局
151    await windowClass.setWindowLayoutFullScreen(true)
152    await windowClass.setWindowSystemBarEnable(["status", "navigation"])
153    // 设置状态栏和导航栏的背景为透明
154    await windowClass.setWindowSystemBarProperties({
155        navigationBarColor: "#00000000",
156        statusBarColor: "#00000000",
157        navigationBarContentColor: "#FF0000",
158        statusBarContentColor: "#FF0000"
159    })
160}
161
162export default class MainAbility extends Ability {
163  ...
164  async onWindowStageCreate(windowStage: window.WindowStage) {
165    let windowClass:window.Window = await windowStage.getMainWindow()
166    await enterImmersion(windowClass)
167    windowStage.loadContent('pages/page5')
168  }
169  ...
170}
171```
172### 隐藏状态栏、导航栏
173隐藏状态栏、导航栏可以达到完全沉浸的效果,使用setWindowSystemBarEnable接口即可实现。
174
175具体代码如下:
176
177```ts
178import window from '@ohos.window';
179import common from '@ohos.app.ability.common';
180
181@Entry
182@Component
183struct Type3 {
184  @State message: string = 'Hello World'
185  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
186  async setSystemBar() {
187	let windowClass = await window.getLastWindow(context)
188	//设置导航栏,状态栏不可见
189	await windowClass.setWindowSystemBarEnable([])
190  }
191
192  aboutToAppear() {
193	this.setSystemBar()
194  }
195
196  build() {
197	Row() {
198	  Column() {
199		Text(this.message)
200		  .fontSize(50)
201		  .fontWeight(FontWeight.Bold)
202	  }
203	  .width('100%')
204	}
205	.backgroundColor("#ffee33")
206	.height('100%')
207  }
208}
209```
210
211## 参考
212[窗口](../application-dev/reference/apis-as/js-apis-window.md)