OpenHarmony自定義全屏系統桌面

作者：拓維信息田怡婧 2022-02-21 15:05:09

系統 OpenHarmony

Launcher 作為系統人機交互的首要入口，提供應用圖標的顯示、點擊啟動、卸載應用，并提供桌面布局設置以及最近任務管理等功能。

??想了解更多內容，請訪問：??

??51CTO和華為官方合作共建的鴻蒙技術社區??

??https://harmonyos.51cto.com??

Launcher系統桌面應用

Launcher 作為系統人機交互的首要入口，提供應用圖標的顯示、點擊啟動、卸載應用，并提供桌面布局設置以及最近任務管理等功能。

Launcher 采用純 JS 語言開發，開發過程中不涉及任何 Java 部分的代碼。

https://gitee.com/openharmony/applications_launcher

開發環境

系統版本：OpenHarmony 3.0LTS / OpenHarmony 3.1beta
開發板：3516 / rk3568
IDE：DevEco3.0.0.800

前置知識

【甜甜醬OH實踐】OpenHarmony預置系統應用編譯安裝全流程記錄

https://harmonyos.51cto.com/posts/10395

實現桌面全屏

首先我們了解兩個重要的接口能力。

Window

窗口。

導入模塊

import window from '@ohos.window';

window.getTopWindow

getTopWindow(callback: AsyncCallback): void

獲取當前窗口，用于獲取到window實例。

Window實例 moveTo方法

moveTo(x: number, y: number, callback: AsyncCallback): void

窗口位置移動。

Window實例 resetSize方法

resetSize(width: number, height: number, callback: AsyncCallback): void

改變當前窗口大小。

Display

顯示設備屬性。

導入模塊

import display from '@ohos.display';

使用OpenHarmonySDK時，IDE是找不到對應的模塊的。這個時候，我們就可以使用忽略大法。

// @ts-ignore
import display from '@ohos.display';

display.getDefaultDisplay

getDefaultDisplay(callback: AsyncCallback): void;

獲取當前默認的display對象。

Display

描述display對象的屬性。

改變Launcher應用窗體

// app.ets
// @ts-ignore
import display from '@ohos.display'
import Window from '@ohos.window';

export default {
  onCreate() {
    console.info('Application onCreate')
    
    //在此改變應用窗體
    display.getDefaultDisplay().then(dis => {
      //獲取屏幕高寬 dis.width dis.height
      Window.getTopWindow()
        .then((windowData) => {
          //修改窗口定位
          windowData.moveTo(0, 0).then((result) => {
              //改變窗口大小
              windowData.resetSize(dis.width, dis.height)
              .then((result) => {});
          });
        });
    })
  },
  onDestroy() {
    console.info('Application onDestroy')
  },
}

簽名->編譯->安裝->重啟。

我們發現桌面看起來是改變了，但是還是被狀態欄和導航欄遮擋。

效果如圖：

重要的配置文件

OpenHarmony會為StatusBar，Launcher，NavigationBar三個應用分別初始化好各自窗體位置。

StatusBar，NavigationBar這兩個應用分別占據設備屏幕的最上和最下的位置，并始終保持在所有應用的最上層。

Launcher應用為配合StatusBar，NavigationBar，會空出上下區域。

計算桌面應用/其他應用的實際高度，是需要設備屏幕高度去減去空出的上下區域高度的。

OpenHarmony未提供一個實際計算應用實際展示區域高寬的接口

OpenHarmony提供了一個配置文件system/etc/ams_service_config.json。

在系統啟動時，會讀取該文件的配置信息，決定哪些系統應用需要啟動。

OpenHarmony 3.0LTS 與 3.1beta的配置信息有所不同

// 3.0LTS
{
  "service_startup_config": {
    "startup_launcher": true,
    "startup_system_ui_status_bar": true,
    "startup_system_ui_navigation_bar": true
  }
}

// 3.1beta
{
    "service_startup_config": {  
        "startup_launcher": true,
        "startup_settings_data": true,
        "startup_system_ui_status_bar": true,
        "startup_system_ui_navigation_bar": true,
        "startup_phone_service": true,
        "startup_contacts": true,
        "startup_mms": true,
        "mission_save_time": 43200000
    },
    "memorythreshold": {
        "home_application": "20"
    },
    "system_configuration": {
        "system_orientation": "vertical"
    }
}

這里我們只需要選擇不啟動StatusBar與NavigationBar應用即可。

// 修改文件內容
"startup_system_ui_status_bar": false,
"startup_system_ui_navigation_bar": false

替換開發板上的文件(記得對源文件進行備份)。

hdc_std file send E:\ams_service_config.json system/etc/ams_service_config.json

重啟系統。

hdc_std shell reboot

可以看到桌面占滿整個屏幕了。

若不改變桌面應用窗體，可以看到屏幕上方與下方會空出了一塊黑色區域。

我當前使用的系統的3.1beta，是會出現花屏問題。3.0LTS可以看到是一塊純黑的區域。

雖然改變了桌面的窗體，但是其他應用還是被限制在原來的窗體下。打開設置應用，會發現應用窗體上下出現了空白。

實現原理

自定義桌面

完成這一系列操作后，我們現在來自定義一個全屏桌面。

我這里寫了一個橫屏的Hello World。

創建工程

新建OpenHarmony工程，選擇[Standard]Empty Ability

配置工程，按照以下內容配置。

Bundle name：com.ohos.launcher (系統指定的桌面應用bundlename)
Languaget: eTS
Compatible API version: SDK: API Version 7

先按照之前的內容，實現桌面應用窗體全屏。

// app.ets
// @ts-ignore
import display from '@ohos.display'
import Window from '@ohos.window';

export default {
  onCreate() {
    console.info('Application onCreate')
    
    //在此改變應用窗體
    display.getDefaultDisplay().then(dis => {
      //獲取屏幕高寬 dis.width dis.height
      Window.getTopWindow()
        .then((windowData) => {
          //修改窗口定位
          windowData.moveTo(0, 0).then((result) => {
              //改變窗口大小
              windowData.resetSize(dis.width, dis.height)
              .then((result) => {});
          });
        });
    })
  },
  onDestroy() {
    console.info('Application onDestroy')
  },
}

頁面。

// index.ets
@Entry
@Component
struct Index {
  // 潤和3516
  private w: number = 480 
  private h: number = 960

  // rk3568
  // private w: number = 720
  // private h: number = 1920 
    
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text("Hello World").fontColor("#fff200").fontSize('150px')
    }
    .width(this.h + 'px')
    .height(this.w + 'px')
    .backgroundColor("blue")
    .translate({
      x: -(this.h - this.w) / 2 + 'px',
      y: (this.h - this.w) / 2 + 'px'
    })
    .rotate({ z: 1, angle: 90, centerX: '50%', centerY: '50%' })
  }
}