鸿蒙5.0实战案例：基于原生能力的横竖屏旋转适配

往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）

场景描述

目前很多应用和场景需要用到横竖屏旋转，下面列举一些目前遇到的高频问题：

场景一：我们如何通过传感器自己感知方向，自己设置旋转；(使用sensor感知设备是不关心设备是否启用系统自带的旋转锁定)
场景二：在一个应用内，不同的页面有不同的旋转策略；如：首页仅竖屏，详情页面允许横竖屏切换；

概念说明：

本文的旋转策略是：旋转策略是指当前页面支持的设备旋转方向。

页面方向是：页面方向是手机的页面当前的显示方向。

场景一：

我们如何通过传感器自己感知方向，自己设置旋转；(使用sensor感知设备是不关心设备是否启用系统自带的旋转锁定)

效果图：

关键步骤：

第一步：感知方向；使用sensor感知设备的真实朝向。

复制代码

// 1 原始数据（3维度）
sensor.on(sensor.SensorId.GRAVITY, (data: sensor.GravityResponse) => {
let degree: number = -1;
let rotation: string = 'INVALID';
// 2 将三维的角度变二维
degree = CalDegree(data.x, data.y, data.z)
// 3 将角度转化到方向
if (degree >= 0 && (degree <= 30 || degree >= 330)) {
rotation = "ROTATION_0";
} else if (degree >= 60 && degree <= 120) { // Use ROTATION_90 when degree range is [60, 120]
rotation = "ROTATION_90";
} else if (degree >= 150 && degree <= 210) { // Use ROTATION_180 when degree range is [150, 210]
rotation = "ROTATION_180";
} else if (degree >= 240 && degree <= 300) { // Use ROTATION_270 when degree range is [240, 300]
rotation = "ROTATION_270";
}

第二步：设置旋转；

相关接口：setPreferredOrientation;设置窗口的显示方向属性

复制代码

indow(getContext(this)).then((data) => {
          data.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)
        })

设置方向：

UNSPECIFIED	表示未定义方向模式，由系统判定。
PORTRAIT	表示竖屏显示模式。
LANDSCAPE	表示横屏显示模式。
PORTRAIT_INVERTED	表示反向竖屏显示模式。
LANDSCAPE_INVERTED	表示反向横屏显示模式。

场景二：

竖屏，允许横竖屏，仅竖屏，仅横屏；首页竖屏，进去就横屏。支持切换竖屏；给最外层组件设置旋转；

在一个应用内，不同的页面有不同的旋转策略；如，首页仅竖屏，详情页面允许横竖屏切换；

从横屏跳竖屏；两个页面不同的跳转；

效果图：

关键步骤：

第一步：在应用统一的位置注册无感监听；

第二步：建立页面与旋转方向的映射表；

第三步：结合全局埋点的能力，实现不同页面的旋转适配

说明：该映射表开发者可以根据实际的诉求使用从本地配置文件更新或者直接使用全局状态变量实现动态修改。

复制代码

let pageOrientations: Record<string, window.Orientation> = {
  "Logon": window.Orientation.PORTRAIT,
  "Detail": window.Orientation.LANDSCAPE,
  "Page2": window.Orientation.PORTRAIT_INVERTED,
  "Page3": window.Orientation.LANDSCAPE_INVERTED,
}

第三步：根据映射表在无感监听的回调里控制旋转策略；

复制代码

//判断是否为空 mainWindow
if (!windowName || windowName == 'mainWindow') {
  windowName = 'mainWindow'
}
let name = windowName as string
windows[name] = curWindow;

let myObserve = curWindow.getUIContext().getUIObserver();
mypagestack[name] = new Stack<pageTracking>();

// mypagestack.push <windowName, Stack<pageTracking>>
//监听navDestination组件生命周期变化
myObserve.on('navDestinationUpdate', (info) => {
  //映射成mypage
  let mypage = new MyPage
  mypage.id = info.navDestinationId
  mypage.name = info.name
  mypage.path = info.param?.toString()
  mypage.type = 'NavDestination'
  mypage.lifeCricle = info.state
  //
  tracking(mypage, name)

})
//监听page生命周期变化
myObserve.on('routerPageUpdate', (info) => {... })
}

//使用mypage埋点  存生命周期信息
function tracking(mypage: MyPage, windowname: string) {
  let stack: Stack<pageTracking> = mypagestack[windowname]
  // 1.存页面信息(abouttoappear)，同时打印当前所有路径 打印当前栈的顺序
  // 如果当前栈元素为一个且当前元素为navd页面，仅修改对应页面的类型
  // 不入栈 ，而是将对应的栈顶元素的page类型改为navPage
  if (mypage.lifeCricle == 2) {...}
  // 2.更新页面信息 ：onshown(刷新开始时间)
  else if (mypage.lifeCricle == 0) {
    // 改变方向：
    windows[windowname].setPreferredOrientation(pageOrientations[mypage.name as string])
  }
  // 3.更新页面信息 ：onhidden(累计值 刷新停留时间)
  else if (mypage.lifeCricle == 1) {...}

  // 4.输出页面信息 abouttodistoappear 删除页面信息
  else if (mypage.lifeCricle == 3) {...}

}

场景三：

某些页面会存在设置临时方向，如视频竖屏转横屏；视屏播放临时方向的设置

接口：USER_ROTATION_LANDSCAPE；表示临时横屏后受开关控制和系统判定的自动旋转模式。

复制代码

window.getLastWindow(getContext(this), (err, win) => {
  win.setPreferredOrientation(window.Orientation.USER_ROTATION_LANDSCAPE)
})

视频播放的过程中，用户可能在竖屏状态下，通过点击最大化按钮将视频变为横屏播放。该场景下要求手机的整体策略不变。

接口：USER_ROTATION_LANDSCAPE；表示临时横屏后受开关控制和系统判定的自动旋转模式。

复制代码

window.getLastWindow(getContext(this), (err, win) => {
  win.setPreferredOrientation(window.Orientation.USER_ROTATION_LANDSCAPE)
})

视频播放的过程中，用户可能在竖屏状态下，通过点击最大化按钮将视频变为横屏播放。该场景下要求手机的整体策略不变。

其他常见问题：

Q1：如何感知系统的自动旋转开关：如果是开的，app页面内适配？

A：监听方法sensor模块、seting info（单独get）

复制代码

//1.传感器的监听方法sensor模块 (对应的回调一直触发，建议仅在需要的页面开启)
// 1 原始数据（3维度）
sensor.on(sensor.SensorId.GRAVITY, (data: sensor.GravityResponse) => {
  let degree: number = -1;
  let rotation: string = 'INVALID';
  // 2 3wei bian erwei
  degree = CalDegree(data.x, data.y, data.z)
  // 3 角度=》方向
  if (degree >= 0 && (degree <= 30 || degree >= 330)) {
    rotation = "ROTATION_0";
  } else if (degree >= 60 && degree <= 120) { // Use ROTATION_90 when degree range is [60, 120]
    rotation = "ROTATION_90";
  } else if (degree >= 150 && degree <= 210) { // Use ROTATION_180 when degree range is [150, 210]
    rotation = "ROTATION_180";
  } else if (degree >= 240 && degree <= 300) { // Use ROTATION_270 when degree range is [240, 300]
    rotation = "ROTATION_270";
  }
  // 4 设置方向
  // setxxxx
  console.log("QH- sensor.on" + rotation)
});
2.setings 模块只能获取不能监听
// 获取 控制中心的 自动旋转开关：值为1，表示启用；值为0，表示不启用。
settings.getValueSync(getContext(), settings.general.ACCELEROMETER_ROTATION_STATUS, '-1')

// 自动旋转关闭时，获取当前设备的方向：值为0，表示屏幕旋转0度；值为1，表示屏幕旋转90度；值为2，表示屏幕旋转180度；值为3，表示屏幕旋转270度
orientation = settings.getValueSync(getContext(), settings.display.DEFAULT_SCREEN_ROTATION, '-1')
console.log("QH- settings.getValueSync" + orientation)

鸿蒙5.0实战案例：基于原生能力的横竖屏旋转适配

往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）

✏️ 鸿蒙（HarmonyOS）北向开发知识点记录~

✏️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✏️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✏️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✏️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✏️ 记录一场鸿蒙开发岗位面试经历~

✏️ 持续更新中......

场景描述

概念说明：

场景一：

场景二：

场景三：