沉浸式界面開發(fā)—OpenHarmony
想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：
場景說明
沉浸式界面通常是指全屏顯示，即當(dāng)前畫面占據(jù)整個(gè)屏幕。畫面放大的同時(shí)，讓用戶擺脫無關(guān)信息的干擾，帶給用戶沉浸式的體驗(yàn)。常見的場景有：視頻播放、游戲等。本例即為大家介紹如何開發(fā)沉浸式界面。
效果呈現(xiàn)
本例中的沉浸式界面有三種實(shí)現(xiàn)方式，對應(yīng)效果如下：
方案一：顏色背景鋪滿 | 方案二：圖片背景鋪滿 | 方案三：背景鋪滿的同時(shí)、狀態(tài)欄不可見 |
|
|
|
運(yùn)行環(huán)境
本例基于以下環(huán)境開發(fā)，開發(fā)者也可以基于其他適配的版本進(jìn)行開發(fā)：
- IDE: DevEco Studio 3.1 Beta2
- SDK: Ohos_sdk_public 3.2.11.9(API Version 9 Release)
實(shí)現(xiàn)思路
如果一個(gè)應(yīng)用想要獲得沉浸式的體驗(yàn)，開發(fā)者可以通過以下三種方式進(jìn)行實(shí)現(xiàn)：
- 顏色背景通鋪：使應(yīng)用頁面的背景色和狀態(tài)欄、導(dǎo)航欄的背景色一致。可通過setWindowSystemBarProperties進(jìn)行設(shè)置。
- 圖片背景通鋪：將狀態(tài)欄、導(dǎo)航欄的背景色設(shè)置為透明以便呈現(xiàn)應(yīng)用界面的背景，同時(shí)通過 windowClass.on接口獲取到狀態(tài)欄、導(dǎo)航欄的區(qū)域信息，進(jìn)行規(guī)避處理，以免狀態(tài)欄、導(dǎo)航欄的內(nèi)容遮擋住應(yīng)用內(nèi)容。
- 隱藏導(dǎo)航欄和狀態(tài)欄：使用setWindowSystemBarEnable設(shè)置導(dǎo)航欄和狀態(tài)欄為隱藏狀態(tài)。
說明：
沉浸式的設(shè)置最好放在ability的onWindowStageCreate的生命周期里，此時(shí)剛好可以獲取窗口的信息，放在頁面頁面生命周期里會(huì)出現(xiàn)窗口大小不一致，影響體驗(yàn)。
下文將分別介紹這三種方案的具體開發(fā)步驟。
開發(fā)步驟
顏色背景通鋪
此方案通過調(diào)用setWindowSystemBarProperties接口將狀態(tài)欄和導(dǎo)航欄的背景色設(shè)置為跟應(yīng)用窗口相同的顏色，以達(dá)到界面全屏的效果。
具體代碼如下：
import window from '@ohos.window';
import common from '@ohos.app.ability.common';
@Entry
@Component
struct Type2 {
@State message: string = 'Hello World'
// 獲取UIAbility上下文
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
async setSystemBar() {
// 獲取當(dāng)前應(yīng)用窗口
let windowClass:window.Window = await window.getLastWindow(context)
// 將狀態(tài)欄和導(dǎo)航欄的背景色設(shè)置為跟應(yīng)用窗口相同的顏色
await windowClass.setWindowSystemBarProperties({
navigationBarColor: "#00FF00",
statusBarColor: "#00FF00",
navigationBarContentColor: "#00FF00",
statusBarContentColor: "#00FF00"
})
}
aboutToAppear() {
this.setSystemBar()
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}此方案的優(yōu)勢在于不需要處理應(yīng)用窗口和狀態(tài)欄、導(dǎo)航欄窗口的遮擋關(guān)系，因?yàn)榇朔桨笡]有使用setWindowLayoutFullScreen 接口設(shè)置沉浸式布局，所以三個(gè)窗口是平鋪的，不會(huì)重疊。劣勢在于無法將應(yīng)用的背景圖等信息延伸到狀態(tài)欄、導(dǎo)航欄窗口中。適用于扁平化設(shè)計(jì)風(fēng)格的應(yīng)用。
圖片背景通鋪
這種方案可以實(shí)現(xiàn)圖片背景的通鋪，同時(shí)又能避免狀態(tài)欄和導(dǎo)航欄的內(nèi)容跟應(yīng)用內(nèi)容相互遮擋，導(dǎo)致顯示效果異常。
為了能讓應(yīng)用的有效顯示范圍避開系統(tǒng)的狀態(tài)欄和導(dǎo)航欄，以免內(nèi)容重疊，我們可以通過windowClass.on(type: ‘a(chǎn)voidAreaChange’, callback: Callback<{AvoidAreaType, AvoidArea}>) 獲取系統(tǒng)規(guī)避區(qū)域的大小，并對這一塊區(qū)域做出相應(yīng)的規(guī)避。
其中回調(diào)參數(shù)AvoidArea是規(guī)避區(qū)域，可以通過其獲取規(guī)避區(qū)域的具體范圍；AvoidAreaType是規(guī)避區(qū)域的類型其取值如下，示例中需要規(guī)避的狀態(tài)欄和導(dǎo)航欄屬于TYPE_SYSTEM類型。
名稱 | 值 | 說明 |
TYPE_SYSTEM | 0 | 表示系統(tǒng)默認(rèn)區(qū)域。 |
TYPE_CUTOUT | 1 | 表示劉海屏區(qū)域。 |
TYPE_SYSTEM_GESTURE9+ | 2 | 表示手勢區(qū)域。 |
TYPE_KEYBOARD9+ | 3 | 表示軟鍵盤區(qū)域 |
具體代碼如下： |
page代碼
// index.ets
@Entry
@Component
struct Type3 {
@State message: string = 'Hello World'
@StorageLink("topHeight") topHeight: number = 0
@StorageLink("bottomHeight") bottomHeight: number = 0
build() {
Column() {
// 在界面頂部放置一個(gè)Row組件，用于占位
Row() {
}
.width("100%")
// 設(shè)置Row組件的高度為狀態(tài)欄的高度，可避免界面內(nèi)容與狀態(tài)欄內(nèi)容重疊
.height(px2vp(this.topHeight))
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.position({ x: 0, y: 0 })
}
.width("100%")
.flexGrow(1)
// 在界面底部放置一個(gè)Row組件，用于占位
Row() {
}
.width("100%")
// 設(shè)置Row組件的高度為導(dǎo)航欄的高度，可避免界面內(nèi)容與導(dǎo)航欄內(nèi)容重疊
.height(px2vp(this.bottomHeight))
}
.backgroundImage($r("app.media.icon"))
.backgroundImageSize(ImageSize.Cover)
.width("100%")
.height("100%")
}
}ability代碼
// MainAbility.ts
import window from '@ohos.window';
async function enterImmersion(windowClass: window.Window) {
// 獲取狀態(tài)欄和導(dǎo)航欄的高度
windowClass.on("avoidAreaChange", ({ type, area }) => {
if (type == window.AvoidAreaType.TYPE_SYSTEM) {
// 將狀態(tài)欄和導(dǎo)航欄的高度保存在AppStorage中
AppStorage.SetOrCreate<number>("topHeight", area.topRect.height);
AppStorage.SetOrCreate<number>("bottomHeight", area.bottomRect.height);
}
})
// 設(shè)置窗口布局為沉浸式布局
await windowClass.setWindowLayoutFullScreen(true)
await windowClass.setWindowSystemBarEnable(["status", "navigation"])
// 設(shè)置狀態(tài)欄和導(dǎo)航欄的背景為透明
await windowClass.setWindowSystemBarProperties({
navigationBarColor: "#00000000",
statusBarColor: "#00000000",
navigationBarContentColor: "#FF0000",
statusBarContentColor: "#FF0000"
})
}
export default class MainAbility extends Ability {
...
async onWindowStageCreate(windowStage: window.WindowStage) {
let windowClass:window.Window = await windowStage.getMainWindow()
await enterImmersion(windowClass)
windowStage.loadContent('pages/page5')
}
...
}隱藏狀態(tài)欄、導(dǎo)航欄
隱藏狀態(tài)欄、導(dǎo)航欄可以達(dá)到完全沉浸的效果，使用setWindowSystemBarEnable接口即可實(shí)現(xiàn)。
具體代碼如下：
import window from '@ohos.window';
import common from '@ohos.app.ability.common';
@Entry
@Component
struct Type3 {
@State message: string = 'Hello World'
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
async setSystemBar() {
let windowClass = await window.getLastWindow(context)
//設(shè)置導(dǎo)航欄，狀態(tài)欄不可見
await windowClass.setWindowSystemBarEnable([])
}
aboutToAppear() {
this.setSystemBar()
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.backgroundColor("#ffee33")
.height('100%')
}
}
