HarmonyOS 鸿蒙Next基于原生能力的横竖屏旋转适配

场景描述

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

场景一：我们如何通过传感器自己感知方向，自己设置旋转；(使用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”;
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

第二步：设置旋转；

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

indow(getContext(this)).then((data) => {
data.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)
})<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

设置方向：

相关接口：

调用窗口的Orientation设置方向即可，具体的设置窗口的显示方向，属性设置参考下表；

场景二：

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

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

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

效果图：

关键步骤：

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

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

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

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

let pageOrientations: Record<string, window.Orientation> = {
“Logon”: window.Orientation.PORTRAIT,
“Detail”: window.Orientation.LANDSCAPE,
“Page2”: window.Orientation.PORTRAIT_INVERTED,
“Page3”: window.Orientation.LANDSCAPE_INVERTED,
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

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

//判断是否为空 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) {…}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

场景三：

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

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

window.getLastWindow(getContext(this), (err, win) => {
win.setPreferredOrientation(window.Orientation.USER_ROTATION_LANDSCAPE)
})<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

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

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

window.getLastWindow(getContext(this), (err, win) => {
win.setPreferredOrientation(window.Orientation.USER_ROTATION_LANDSCAPE)
})<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

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

其他常见问题：

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)<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>