When displayed in landscape mode, the page content is blocked by the hole area

#mobile #ui #ux

Read the original article：When displayed in landscape mode, the page content is blocked by the hole area

Problem Description

The application does not avoid the hole area in the horizontal screen, and the page content is blocked by the hole area.

Background Knowledge

When developing an application interface, the application interface is usually more focused on the content, and users are not wanted to be distracted by irrelevant elements. In order to maximize the user experience, immersive adaptation of the page is often required .
Immersive page development is mostly done by extending the application page to the status bar and navigation bar, which usually includes the following steps:

Use the setWindowLayoutFullScreen method to set the window to full-screen mode.
Use the getWindowAvoidArea method to obtain the height of the avoidance area, and set the upper and lower padding (or margin) of the application page content accordingly to avoid the status bar and navigation bar.
Use the Window.getCutoutInfo method to obtain the width, height, and position information of the cutout area, and set the padding (or margin) of the corresponding avoidance element to avoid the cutout area.

Troubleshooting Process

Check whether the application uses the expandSafeArea property to expand the safe area and expand the layout to the hole area SafeAreaType.CUTOUT, causing the hole area to block the content on the page.

Analysis Conclusion

When the application uses the expandSafeArea property to expand the safe area, the type setting item of the extended safe area contains SafeAreaType.CUTOUT, which causes overlap with the hole area.

Solution/Suggestions

1.Add configuration items in the module.json5 file to treat the camera hole area as a non-safe area, so that the page can avoid the hole by default.

"metadata": [
  {
    "name": "avoid_cutout",
    "value": "true",
  }
],

2.Modify the expandSafeArea type of the extended safe area in the corresponding page file of the application and remove SafeAreaType.CUTOUT.

Column()
  .height('100%')
  .width('100%')
  .backgroundImage($r('app.media.startIcon'))
  .backgroundImageSize(ImageSize.Cover)
  .expandSafeArea([SafeAreaType.CUTOUT], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.END, , SafeAreaEdge.START])

3.You can also use the Display.getCutoutInfo() method to obtain the width, height, and position information of the cutout area, and dynamically set the margin property of the corresponding component to avoid the cutout area.

import { BusinessError } from '@kit.BasicServicesKit';
let displayClass: display.Display | null = null;
async getCutoutInfo() {
   //  Get the default display device
  const displayClass = display.getDefaultDisplaySync();
   // Get hole digging information
  const res = await displayClass.getCutoutInfo();
  return res.boundingRects;
}
 build() {
 // Set the left and right margin values of the corresponding top button component according to the state variable statusBarMargin.
    Row() {
       Image($r('app.media.game_props'))
            .width(80)
            .margin({ left: this.statusBarMargin.left + 'px' })
        Blank()
        Image($r('app.media.game_pause'))
            .width(48)
            .margin({ right: this.statusBarMargin.right + 'px' })
}
  }