Foreword
this article is based on Api12
immersive effects, in addition to avoiding the abrupt effect of the status bar, application interface and navigation bar is more to improve the user experience. For example, the following effect is obviously very abrupt visually when the color of the title bar in the page is different from that of the status bar. You can look at most mainstream applications in the market, such as Alipay, WeChat, or various games, and you will find that all of them adopt immersive effects.
Hongmeng to achieve immersive effect, you can use security zone settings or application window management to achieve.
Safe area for immersive
the security area refers to the display area of the page, that is, the area outside the status bar and navigation bar area. There are no special circumstances. By default, the interfaces developed by developers are all in the security area. As shown in the following figure, the pink area is the security area.
How to make the safe zone, extend to the outside of the safety zone, to achieve immersive effect, the system provides us the expandSafeArea property is a generic property that can be set to any component.
expandSafeArea(types?: Array<SafeAreaType>, edges?: Array<SafeAreaEdge>): T;
Two parameters, the first parameter types, the type is Array < SafeAreaType >, not required, configure the type of extended security zone, when no metadata configuration item is added, the page does not avoid digging holes, and the CUTOUT type does not take effect; The second parameter edges, type Array < SafeAreaEdge>, which is also not required, configure the direction of the extended security zone.
SafeAreaType
enumeration Types for Extended Security Zones
| name | description |
|---|---|
| SYSTEM | the system default non-security area, including the status bar, navigation bar. |
| CUTOUT | non-safe areas of equipment, such as bangs or dug-out screen areas. |
| KEYBOARD | soft keyboard area. |
SafeAreaEdge
direction of extended security area
| name | description |
|---|---|
| TOP | upper area. |
| BOTTOM | lower area. |
| START | front area. |
| END | the tail area. |
For example, on the page above, we set the expandSafeArea property:
to achieve the effect
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
it can be found that the safe area has been extended to the status bar and navigation bar to achieve an immersive effect. Of course, the specific direction can be dynamically set by itself.
Precautions
In use there are several points to note when using the expandSafeArea property:
the first point, if your parent container is a Scroll container, such as Scroll, the expandSafeArea attribute set has no effect, so be careful.
The second point is that the expandSafeArea attribute is set for the component, that is, it will not affect other pages, but only have an effect on the current page. Therefore, if all pages are immersive, you can choose to apply window management for implementation.
Third, if the expandSafeArea attribute is used, it will extend to the non-secure area, that is, the page of the secure area will move up or down. Then in the content area, components must be drawn to prevent the status bar or navigation bar from covering the content area. This is also very important. Generally, it is necessary to obtain the height of the navigation bar or status bar and let the content be on or under it.
Navigation bar and status bar height get:
let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;
let avoidArea = windowClass.getWindowAvoidArea(type);
let bottomRectHeight = avoidArea.bottomRect.height;
let type = window.AvoidAreaType.TYPE_SYSTEM;
let avoidArea = win.getWindowAvoidArea(type);
let topRectHeight = avoidArea.topRect.height;
immersive application window management
the advantage of applying window management is that all pages can be unified to achieve immersive effects. The main function of using the setWindowLayoutFullScreen method in window is sets whether the layout of the main window or child window is immersive.
The relevant code is as follows:
let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
let isLayoutFullScreen = true;
windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {
console.info('Succeeded in setting the window layout to full-screen mode.');
}).catch((err: BusinessError) => {
console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
});
due to the need window.WindowStage parameter, which can be specified inThe onWindowStageCreate method in UIAbility is implemented. After setting, the immersive effect is realized, and it is all pages.
In window management, it is also necessary to pay attention to the fact that after immersive setting, the content of the safe area must avoid the navigation bar and status bar, which is the same as the implementation of the above safe area. This must be paid attention.
Status Bar Property Settings
of course, window management, not only can achieve immersive effect, but also can change the status bar background, font color and other functions, for example, we set the status bar background to red background, white font.
let SystemBarProperties: window.SystemBarProperties = {
statusBarColor: '#ff0000',
statusBarContentColor: "#ffffff",
};
try {
windowClass.setWindowSystemBarProperties(SystemBarProperties).then(() => {
console.info('Succeeded in setting the system bar properties.');
}).catch((err: BusinessError) => {
console.error(`Failed to set the system bar properties. Cause code: ${err.code}, message: ${err.message}`);
});
} catch (exception) {
console.error(`Failed to set the system bar properties. Cause code: ${exception.code}, message: ${exception.message}`);
}
There are other properties in window. Systemproperties, such navigationBarColor: navigation bar background color, navigationBarContentColor : navigation bar text color, etc., can be set according to their own needs.
The navigation bar and status bar are hidden and generally appear in the game.
Set status bar to hide
windowClass.setSpecificSystemBarEnabled('status', false).then(() => {
console.info('Succeeded in setting the status bar to be invisible.');
}).catch((err: BusinessError) => {
console.error(`Failed to set the status bar to be invisible. Code is ${err.code}, message is ${err.message}`);
});
set navigation bar to hide
windowClass.setSpecificSystemBarEnabled('navigationIndicator', false).then(() => {
console.info('Succeeded in setting the navigation indicator to be invisible.');
}).catch((err: BusinessError) => {
console.error(`Failed to set the navigation indicator to be invisible. Code is ${err.code}, message is ${err.message}`);
});
related Summary
after the immersive effect is realized, we must pay attention to the content avoidance of the safe area to prevent the content from being blocked by the navigation bar or status bar after extension. Specifically, we must select the safe area or window management method and process it according to the requirements. If it is only a certain page, we can directly use the safe area.
Top comments (0)