DEV Community

wei chang
wei chang

Posted on

A Detailed explanation of the full-screen mode in the Cangjie development language of HarmonyOS Next

Hello everyone. Today, I'd like to share with you the full-screen mode in the Cangjie development language.

Just like ArkTS, the default mode for creating new projects in Cangjie is non-full-screen mode. If your application has rich colors, you will notice the blank Spaces at the top and bottom of the screen. This is because the application automatically avoids the camera area at the top of the screen and the navigation bar area at the bottom.

Image description

However, usually we don't need these blank Spaces. Instead, we want the application to fill up the entire screen. At this time, the immersive mode is needed. Now, let's share the specific implementation process with you.

First, come to the onWindowStageCreate method of the main_ability.cj file of the application to set the full-screen mode. We need to obtain the main window first, and then set the full-screen mode. The implementation code is as follows:

windowStage.getMainWindow().setWindowLayoutFullScreen(true)
Enter fullscreen mode Exit fullscreen mode

At this time, run the program and you will find that the screen has been fully occupied by applications. However, a new problem has emerged. If you don't allow the system to automatically avoid it, you have to avoid the camera and navigation bar areas above and below yourself.

To avoid these areas, first of all, you need to know their dimensions, mainly their heights. Still in the previous method, the way to obtain the top avoidance area is as follows:

let topArea = windowStage.getMainWindow().getWindowAvoidArea(AvoidAreaType.TYPE_SYSTEM)
let topAreaHeight = topArea.topRect.height
Enter fullscreen mode Exit fullscreen mode

topAreaHeight refers to the height dimension of the top avoidance area. The acquisition method for the bottom avoidance area is slightly different and needs to be obtained separately:

let bottomArea = windowStage.getMainWindow().getWindowAvoidArea(AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
let bottomAreaHeight = bottomArea.bottomRect.height
Enter fullscreen mode Exit fullscreen mode

Then you can save topAreaHeight and bottomAreaHeight and obtain them for use elsewhere in the application:

AppStorage.setOrCreate('topHeight',topAreaHeight.toString())
AppStorage.setOrCreate('bottomHeight',bottomAreaHeight.toString())
Enter fullscreen mode Exit fullscreen mode

Here, everyone should try to save the string type as much as possible, because You LAN Jun encountered a problem when using the Int64 type.

In this way, an application that fills the screen without being blocked will be obtained.

Image description

In addition, in some cases, you may need to use the screen size. The method to obtain the screen size is as follows:

let windowRect =  windowStage.getMainWindow().getWindowProperties().windowRect
AppLog.info('屏幕宽度:'+ windowRect.width.toString())
AppLog.info('屏幕高度:'+ windowRect.height.toString())
Enter fullscreen mode Exit fullscreen mode

Finally, it should be noted that the size units obtained by the above code are all px. When using them, please convert as needed.

That's all for today. Thank you for reading。

Top comments (0)