文档管理中心
HiCar Guides其它应用接入构建界面应用迁移

应用迁移

应用在手机与车机间迁移

手机与车机建立HiCar连接后,应用可以在手机端和车机端之间无缝迁移,例如手机上安装了音乐应用,通过HiCar连接车机后,在车机端也会出现该音乐应用,在车机端点击音乐应用,就能在车机上使用该音乐应用,就像该音乐应用在车机上安装了一样,但是实际上使用的还是手机端的应用。应用已经在车机端显示,解锁手机在手机端打开应用,应用就会从车机端迁移回手机端,显示在手机屏幕上。

监听屏幕变化

由于手机端和车机端屏幕不一样,应用迁移后会造成应用的窗口大小和屏幕参数发生变化,应用需要监听这些变化,并刷新应用界面。

  • 应用可以通过window.on('windowSizeChange')监听窗口大小变化,示例代码如下所示:
    onWindowStageCreate(windowStage: window.WindowStage): void {
        windowStage.getMainWindow().then((windowClass) => {
            windowClass.on('windowSizeChange', (windowSize) => {
                // 窗口变化后刷新界面
            });
        });
    }
  • 应用可以通过Ability.onConfigurationUpdate监听屏幕变化,示例代码如下所示:
    onConfigurationUpdate(newConfig: Configuration): void {
        // 当前应用所在屏幕的id
        const displayId = newConfig.displayId;
        // 获取屏幕像素密度
        try {
            const density = display.getDisplayByIdSync(newConfig.displayId).densityPixels;
            // 获取到新的像素密度后刷新界面
        } catch (err) {
            ...
        }
    }

监听避让区变化

应用在手机侧一般会设置避让区,比如避让顶部状态栏、底部导航条等,HiCar在车机侧显示布局与手机布局并不一样,因此应用在适配HiCar时需要合理设置避让区,否则界面显示可能会出现问题。例如,应用在车机侧打开或是从手机侧流转到车机时顶部和底部会出现大片空白,如下图所示。

图1 界面显示异常示意

出现该类问题的原因是:

  1. 应用在手机侧避让了顶部状态栏和底部三键导航,但未开启避让区变化的监听,应用流转到车机侧依然进行了避让,导致出现上下的空白区域。
  2. 部分应用在未获取到避让区时在顶部以默认值进行了避让。

如果应用设置了避让,请按照如下步骤进行操作,避免出现显示问题。

  1. 在windowStage创建之后开启avoidAreaChange监听。针对AvoidAreaType取值进行相应的处理:

    • TYPE_SYSTEM:获取顶部状态栏高度进行避让。
    • TYPE_NAVIGATION_INDICATOR:获取底部导航条的高度进行避让。
    • 未获取到避让区:不进行避让。
    onWindowStageCreate(windowStage: window.WindowStage): void {
      windowStage.getMainWindow((err, data) => {
        try {
          // 监听避让区域变化
          windowClass.on('avoidAreaChange', (data) => {
            if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
              AppStorage.setOrCreate('top_avoid', data.area.topRect.height);
            }
            if (data.type === window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
              AppStorage.setOrCreate('bottom_avoid', data.area.bottomRect.height);
            }
          });
        } catch (exception) {
          hilog.error(0x0000, 'testTag',
            'Failed to enable the listener for system avoid area changes. Cause: ' + JSON.stringify(exception));
        }
      });
    }

  2. 根据避让区域高度,刷新UI界面。

    build() {
      Column() {
        ...
      }
      .padding({
        top: `${this.topAvoid}px`,
        bottom: `${this.bottomAvoid}px`
      })
    }

在 指南 中进行搜索
请输入您想要搜索的关键词