OpenHarmony自定義全屏系統桌面
??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%' })
}
}
Previewer設置
想先在Previewer中查看效果的話，請按以下內容進行設置。
使用rk3568開發板的小伙伴請按以下新增Previewer Profile。
- Device type：phone
- Resolution：720 x 1280
- DPI：160
使用3516開發板的小伙伴請按以下新增Previewer Profile。
由于profile有分辨率大小有限制，所以3516模擬建議使用以下配置。
// 模擬代碼請相應地將高寬*2，編譯時記得去掉就好了
private w: number = 480 * 2
private h: number = 960 * 2
- Device type：phone
- Resolution：960 x 1920
- DPI：320
最終效果
簽名->編譯->安裝->重啟，完成!
- RK3568效果
- 3516效果
??https://harmonyos.51cto.com??
