HarmonyOS NEXT Development Tutorial: Global Floating Window

Today, I'd like to share with you the floating Windows in the development of HarmonyOS.

For floating Windows, some students may wonder if it is possible to achieve this by using a stacked layout, stacking the floating Windows on the navigation bar component Tabs, like this:

Stack({alignContent:Alignment.BottomEnd}){
  Tabs({barPosition:BarPosition.End}){
    TabContent(){
      Text('page1')
        .fontColor(Color.Black)
        .fontSize(40)
    }
    .tabBar(this.Tabbar())
    TabContent(){
      Page2()
    }
    .tabBar(this.Tabbar())

  }
  Row(){
   //这是悬浮窗
  }
  .width(60)
  .height(60)
  .borderRadius(30)
  .backgroundColor(Color.Blue)
} 

Such a layout will cause the floating window to disappear when pushing to the next page, so it won't work.

HarmonyOS has a dedicated method for creating floating Windows, which is to use createSubWindow to create a sub-window. This sub-window will float above the entire application. The specific implementation code is as follows:

windowStage.createSubWindow('floatWindow',(err: BusinessError, data) =>})  

After the creation is completed, you can set the size, position and content of the floating window and other attributes. Please note that the unit here is px and only positive integer types can be passed:

//size
data.resize(300,300,(err: BusinessError) =>})    

//location
data.moveWindowTo(400,400,(err: BusinessError) =>})    

//show
data.showWindow((err: BusinessError) =>}); 

Sometimes you may need to set the floating window to be circular. The solution is to first go to the corresponding content page and set the rounded corners, only to find that there is still a white background. Then, set the window background color to transparent. This method is best set in the callback of setUIContent

data?.setWindowBackgroundColor('#00000000');    

When it is necessary to close the floating window, the destroyWindow method can be called to destroy it:

window.findWindow(FloatUntil.windowName).destroyWindow()    

The above are the common usage methods of floating Windows. To facilitate their use, I have simply encapsulated the above methods, allowing you to perform operations such as displaying, moving, and closing the floating window with just one line of code

import EntryAbility from "../entryability/EntryAbility";
import { BusinessError } from "@kit.BasicServicesKit";
import { display, window } from "@kit.ArkUI";
export class FloatUntil{
  static  screen_width = display.getDefaultDisplaySync().width
  static screen_height = display.getDefaultDisplaySync().height
  static float_size = 420
  static  float_positon_x = FloatUntil.screen_width - FloatUntil.float_size - 40
  static  float_positon_y = FloatUntil.screen_height - FloatUntil.float_size - 440
  static  windowName = 'floatWindow'
 static  creatAndShowSubWindow(){
    EntryAbility.gloabalWindowStage.createSubWindow(FloatUntil.windowName, (err: BusinessError, data) => {
      let errCode: number = err.code;
      if (errCode) {
        return;
      }
      //The position and size units are px, and only positive integers are supported
      data.moveWindowTo(FloatUntil.float_positon_x, FloatUntil.float_positon_y, (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          return;
        }
        console.info('Succeeded in moving the window.');
      });
      data.resize(FloatUntil.float_size, FloatUntil.float_size, (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          return;
        }
      });
      //Is the suspended window touchable
      data.setWindowTouchable(true);
      data.setUIContent("pages/FloatWindow", (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          console.error('Failed to load the content. Cause:' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in loading the content.');
        // Set the background color of the window to be transparent. Only when called here will no error be reported
        data?.setWindowBackgroundColor('#00000000');
        data.showWindow((err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in showing the window.');
        });
      });
    })
  }
  static moveWindowTo(x:number,y:number){
    window.findWindow(FloatUntil.windowName).moveWindowTo(x,y)
  }
  static destroyFloatWindow(){
     window.findWindow(FloatUntil.windowName).destroyWindow()
  }
}

HarmonyOS Language ##ArkTs## Tool Efficiency