HarmonyOS のウィンドウ管理機能は、ユーザーに没入感のある体験を提供し、アプリケーションのコンテンツに集中できる環境を実現します。この記事では、主ウィンドウ、サブウィンドウ、フローティングウィンドウの作成と設定方法、およびステータスバー・ナビゲーションバーを非表示にするイマーシブモードの実装について解説します。

主ウィンドウのタッチ可否設定

主ウィンドウのタッチ可否属性は、ユーザーが画面をタップして操作できるかどうかを制御します。モバイルデバイスでは通常、この属性を有効に設定します。

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';

export default class MainAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.getMainWindow((err, win) => {
      if (err) {
        console.error('Main window acquisition failed:', JSON.stringify(err));
        return;
      }

      // タッチ操作を有効化
      win.setWindowTouchable(true, (touchErr) => {
        if (touchErr) {
          console.error('Failed to enable touch:', JSON.stringify(touchErr));
        } else {
          console.info('Touch enabled successfully.');
        }
      });
    });

    // ページ読み込み
    windowStage.loadContent('pages/Index', (err) => {
      if (err) {
        console.error('Page load failed:', JSON.stringify(err));
      }
    });
  }
}

サブウィンドウの作成と管理

サブウィンドウは、主ウィンドウ内に独立した機能領域を提供します。ダイアログ、ツールパレット、分割ビューなどに活用できます。

import UIAbility from '@ohos.app.ability.UIAbility';

let mainStage: any = null;
let subWin: any = null;

export default class SubWindowAbility extends UIAbility {
  createSubWindow() {
    mainStage.createSubWindow('toolPanel', (err, win) => {
      if (err) {
        console.error('Subwindow creation failed:', JSON.stringify(err));
        return;
      }
      subWin = win;

      // 位置とサイズを設定
      win.moveWindowTo(200, 200, (moveErr) => {
        if (!moveErr) console.info('Window moved.');
      });
      win.resize(400, 300, (resizeErr) => {
        if (!resizeErr) console.info('Window resized.');
      });

      // コンテンツをロードして表示
      win.setUIContent('pages/ToolPanel', (loadErr) => {
        if (!loadErr) {
          win.showWindow((showErr) => {
            if (!showErr) console.info('Subwindow shown.');
          });
        }
      });
    });
  }

  destroySubWindow() {
    if (subWin) {
      subWin.destroyWindow((err) => {
        if (!err) console.info('Subwindow destroyed.');
      });
    }
  }

  onWindowStageCreate(windowStage) {
    mainStage = windowStage;
    // 例として起動時にサブウィンドウを作成（実際はイベント駆動が望ましい）
    this.createSubWindow();
  }

  onWindowStageDestroy() {
    this.destroySubWindow();
  }
}

イマーシブモードの実装

イマーシブモードでは、システムバー（ステータスバー・ナビゲーションバー）を非表示にしてフルスクリーン表示を実現します。

import UIAbility from '@ohos.app.ability.UIAbility';

export default class ImmersiveAbility extends UIAbility {
  onWindowStageCreate(windowStage) {
    windowStage.getMainWindow((err, win) => {
      if (err) {
        console.error('Failed to get main window:', JSON.stringify(err));
        return;
      }

      // システムバーを無効化（空配列で全非表示）
      win.setWindowSystemBarEnable([], (barErr) => {
        if (barErr) {
          console.error('Failed to hide system bars:', JSON.stringify(barErr));
        } else {
          console.info('Immersive mode activated.');
        }
      });
    });

    windowStage.loadContent('pages/FullscreenView', (err) => {
      if (err) console.error('Content load error:', JSON.stringify(err));
    });
  }
}

フローティングウィンドウの実装

フローティングウィンドウは、他のアプリの上に重ねて表示される小型ウィンドウです。通知やクイック操作に適しています。

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';

export default class FloatWindowAbility extends UIAbility {
  onWindowStageCreate(windowStage) {
    const config = {
      name: 'quickNote',
      windowType: window.WindowType.TYPE_FLOAT,
      ctx: this.context
    };

    window.createWindow(config, (err, floatWin) => {
      if (err) {
        console.error('Floating window creation failed:', JSON.stringify(err));
        return;
      }

      floatWin.moveWindowTo(100, 100, () => {});
      floatWin.resize(350, 250, () => {});

      floatWin.setUIContent('pages/QuickNote', (loadErr) => {
        if (!loadErr) {
          floatWin.showWindow((showErr) => {
            if (!showErr) {
              console.info('Floating window displayed.');

              // 使用後は明示的に破棄（例として即時破棄）
              setTimeout(() => {
                floatWin.destroyWindow((destroyErr) => {
                  if (!destroyErr) console.info('Floating window destroyed.');
                });
              }, 10000);
            }
          });
        }
      });
    });
  }
}