企业网站的特点,教师个人网站建设,芜湖先锋网站两学一做,wordpress 小说连载文章目录 一、概述二、窗口旋转说明1、配置module.json5的orientation字段2、调用窗口的setPreferredOrientation方法 四、性能优化1、使用自定义组件冻结2、对图片使用autoResize3、排查一些耗时操作 四、常见场景示例1、视频类应用横竖屏开发2、游戏类应用横屏开发 五、其他常… 文章目录 一、概述二、窗口旋转说明1、配置module.json5的orientation字段2、调用窗口的setPreferredOrientation方法 四、性能优化1、使用自定义组件冻结2、对图片使用autoResize3、排查一些耗时操作 四、常见场景示例1、视频类应用横竖屏开发2、游戏类应用横屏开发 五、其他常见问题1、Tabs栏中的视频横屏播放无法隐藏Tabs栏2、如何解决直板机和平板上默认旋转行为不一致的问题?3、通过调用window.getLastWindow的方式获取窗口实例出现延迟如何解决4、自动旋转和旋转锁定按钮的关系是什么与Orientation字段的关系如何判断 一、概述
横竖屏切换功能即实现应用内既支持竖屏显示也支持横屏显示的效果。对于应用内不同页面显示方向不同的情况需要在应用逻辑中动态修改窗口方向来实现该效果例如包含视频播放功能的应用首页内容是采用竖屏方式而视频详情页则采用横屏方式展示。
本文主要介绍横竖屏功能的开发过程中需要关注的内容包括如下部分
窗口旋转策略的选择常用应用类型的横竖屏开发常见的横竖屏开发问题
二、窗口旋转说明
目前在HarmonyOS系统中窗口的旋转形态包括以下四种窗口的状态对应真机实际状态如下
有两种设置窗口旋转策略的方式 通过module.json5文件中“orientation”字段进行设置 在代码中通过调用窗口window的setPreferredOrientation方法进行设置
这两种方式触发设置旋转的时机不同总的来说module.json5文件中的字段在窗口启动时就会生效对于应用启动时就需要设置横屏或者竖屏的应用需要进行配置。而setPreferredOrientation是在调用该方法时进行窗口方向的设置用于在应用启动之后还需要改变显示方向的场景。
1、配置module.json5的orientation字段
此字段配置的是应用启动时的窗口显示状态对于开屏时就需要以默认的横屏或者竖屏方式显示需要在此字段进行相应的配置
{module: {// ...abilities: [{name: EntryAbility,// ...orientation: portrait}]}
}其支持的参数可以参考module.json5配置项中orientation字段相关配置的orientation字段说明
根据应用默认的旋转行为进行相应的配置
如果应用是竖屏应用建议配置portrait为默认旋转策略。 如果应用是横屏应用例如游戏类应用进入游戏时默认就是横屏此时有两种情况 仅支持横屏建议配置landscape为默认旋转策略。 支持在横屏和反向横屏中切换建议设置为auto_rotation_landscape。
如果应用为可旋转应用建议应用配置auto_rotation_restricted为默认旋转策略。 如果一个应用在直板机和折叠机折叠态是竖屏应用在平板和折叠机展开态默认是可旋转应用推荐配置follow_desktop为默认旋转策略。 注意 对于需要通过控制中心进行旋转锁定控制的可以选择字段后方带有restricted字段的旋转策略此字段表示旋转行为受到控制中心按钮控制开关打开情况下不随设备方向旋转关闭情况下则会发生跟随设备旋转。 以如下文件管理应用为例在系统关闭了旋转锁定后应用的页面都会随着手机旋转而发生展示上的切换而打开时则不会发生旋转行为此时就需要配置为auto_rotation_restricted。 2、调用窗口的setPreferredOrientation方法
对于需要进入应用后修改应用窗口显示横竖屏状态的情况下可以调用setPreferredOrientation 方法进行设置典型场景如一些视频类应用、图片类应用等。 此类应用在进入时为竖屏而在视频播放页面可以显示为横屏则需要支持用户临时修改窗口方向。由于setPreferredOrientation 方法调用的是窗口的显示方向是整个应用窗口级别都发生了旋转窗口将一直保持最后一次设置窗口方向的效果即使发生页面跳转等行为窗口方向也不会发生变化。
四、性能优化
由于在窗口旋转时屏幕的尺寸会发生变化界面会发生重新布局为了提高横竖屏切换时的流畅度需要进行相应的性能优化。
1、使用自定义组件冻结
旋转时由于整窗一起旋转会导致页面重新布局但是实际上需要展示的可能只有播放内容对于其他的组件可以使用自定义组件冻结功能避免由于旋转导致的UI更新操作。例如视频播放底下的详情内容可能是单独的组件。
Component({ freezeWhenInactive: true }) // 添加自定义组件冻结功能
struct VideoDetailView {build() {Scroll() {// ... 详情内容}}
}2、对图片使用autoResize
如果当前旋转页面存在一些图片未经合理的裁剪图片过大可以对图片设置autoResize属性使图片裁剪到合适的大小进行绘制。该属性的作用是将组件显示区域作为绘制的图源尺寸可以减少内存占用例如原图是19201080但是显示区域是200100则在解码时会降低采样编码到200*100尺寸。
Builder
function ImageItem(imageSrc:ResourceStr) {Stack({}) {Image(imageSrc).width(100%).height(100%).autoResize(true) // 对图片使用auto_resize属性.borderRadius(8).objectFit(ImageFit.Fill).backgroundColor(#1AFFFFFF)}
}3、排查一些耗时操作
排查当前页面是否存在一些冗余的OnAreaChange事件、blur模糊或者一些线性变化linearGradient的属性这些都比较耗时可以根据是否必须使用来决定是否进行优化。
四、常见场景示例
1、视频类应用横竖屏开发
监听窗口变化
由于传感器变化或者用户手动设置窗口方向时窗口的显示会发生变化对应窗口的尺寸也会发生改变此时可以通过拿到窗口的宽高并对宽高进行对比判断当前显示是竖屏还是横屏状态并利用该数据对布局进行适配。
监听窗口尺寸的变化可以通过window.on(‘windowSizeChange’)进行实现。具体的措施如下在需要进行横竖屏切换的页面进行以下窗口的监听一般建议是在aboutToAppear中执行
aboutToAppear(): void {// ...this.windowClass.on(windowSizeChange, (size) {// ...});// ...
}并在aboutToDisappear中取消监听
aboutToDisappear(): void {// ...this.windowClass.off(windowSizeChange);
}需要注意的是当用户手动触发setOrientation设置为横屏状态时即使当前手机处于垂直方向窗口的状态也是横屏方向即如下所示 此时窗口的宽是竖屏状态下的高高变为竖屏状态的宽。所以在监听窗口变化时可以通过窗口的宽高大小关系来确定当前窗口的方向并决定实际的横竖屏状态。
this.windowClass.on(windowSizeChange, (size) {let viewWidth px2vp(size.width);let viewHeight px2vp(size.height);if (viewWidth viewHeight) {// ...} else {// ...}
});进行布局适配
对应视频播放这类应用属于只有播放窗口需要进行横竖屏所以只需要对视频播放的组件内容进行横屏并进入全屏所以可以利用UI状态更新的特点来让播窗变为全屏将播窗的尺寸定义为State状态并设置到Xcomponent组件上。
State xComponentWidth: number px2vp(display.getDefaultDisplaySync().width);
State xComponentHeight: number px2vp(display.getDefaultDisplaySync().width * this.aspect);将状态变量与播窗绑定。
XComponent({ id: video_player_id, type: XComponentType.SURFACE, controller: this.xComponentController }).onLoad(() {// ...}).width(this.xComponentWidth).height(this.xComponentHeight)并且在之前监听窗口变化的回调中对XComponentWidth和XComponentHeight进行动态修改完成窗口变化时横屏和竖屏的视频窗口布局。需要注意的是在横屏时视频播放的宽高应该和窗口的宽高一样并且需要进入全屏状态。而竖屏时视频播放的宽应该等于窗口的宽但是高度应该是按照播窗比例乘以窗口的宽进行设置并退出全屏状态。 具体实现如下进入视频详情页面内需要监听窗口尺寸的变化并根据当前状态实现对横竖屏状态的监听根据状态变化修改对应XComponent的宽高实现全屏或者隐藏状态栏和导航条的逻辑。
this.windowClass.on(windowSizeChange, (size) {let viewWidth px2vp(size.width);let viewHeight px2vp(size.height);if (viewWidth viewHeight) {// 实现横屏逻辑if (display.getFoldStatus() display.FoldStatus.FOLD_STATUS_EXPANDED || display.getFoldStatus() display.FoldStatus.FOLD_STATUS_HALF_FOLDED) {this.xComponentHeight viewWidth * this.aspect;this.xComponentWidth viewWidth;} else {this.xComponentWidth viewHeight / this.aspect;this.xComponentHeight viewHeight;this.isLandscape true;}this.windowClass.setSpecificSystemBarEnabled(navigationIndicator, false); // hide bottom navigation bar} else {// 实现竖屏逻辑this.xComponentHeight viewWidth * this.aspect;this.xComponentWidth viewWidth;this.windowClass.setSpecificSystemBarEnabled(navigationIndicator, true); // show bottom navigation barthis.isLandscape false;}
});2、游戏类应用横屏开发
对于游戏类应用以横屏游戏居多此类应用不需要在应用内进行开关控制所以只需要在module.json5配置文件中进行相应的配置即可。一般有以下几种情况
默认仅为横屏 如果该应用默认为横屏状态那么则需要在module.json5中的“orientation”字段进行配置为landscape。 支持横屏和反向横屏 如果应用需要根据设备方向决定是横屏还是反向横屏则可以对module.json5配置中“orientation”设置为auto_rotation_landscape。 注意 如果需要跟随控制中心的旋转锁定则可以选择配置为auto_rotation_landscape_restricted 支持竖屏切换横屏 此类适用于一些游戏大厅等应用由于游戏大厅内主页可能为竖屏部分应用为横屏。那么从竖屏进入横屏时则需要调用设置窗口旋转方法进行窗口控制。
五、其他常见问题
1、Tabs栏中的视频横屏播放无法隐藏Tabs栏
对于首页中有部分视频可以直接播放并且不会跳转至详情页播放的需要支持直接在首页发生旋转当前可以通过设置XComponent的宽高实现但是会发现即使全屏后Tabs栏并不会消失。而是会一起发生旋转并存在于页面上。解决方案如下
进入全屏时隐藏Tabs退出全屏时展示Tabs栏。
Component
struct TabsView {State isLayoutFullScreen:boolean false;build() {Tabs() {// ... 省略布局内容}.barHeight(this.isLayoutFullScreen ? 0 : 50) // 通过用户是否需要点击进入全屏隐藏Tabs标签栏的高度可以实现隐藏}
}2、如何解决直板机和平板上默认旋转行为不一致的问题?
对于部分应用在直板手机上默认是采用竖屏显示的策略但是在平板或者折叠屏上是需要支持自动旋转的如果在Ability的生命周期中调用setPreferredOrientation可能会出现在应用启动时出现旋转动画的情况所以可以将module.json5文件中的“orientation”字段设置为“follow_desktop”。
3、通过调用window.getLastWindow的方式获取窗口实例出现延迟如何解决
由于getLastWindow底层原因需要经过查找获取实例一定程度上会有性能损耗可能会出现已经发生横屏或者竖屏切换的情况下状态栏还没切换的情况。对此类场景的同步要求较高情况下可以使用windowStage.getMainWindowSync的同步方式获取窗口实例。
4、自动旋转和旋转锁定按钮的关系是什么与Orientation字段的关系如何判断
控制中心的旋转开关控制的是当前是否可以跟随屏幕旋转,“旋转锁定”高亮状态是锁定不可旋转。“旋转锁定”灰色是解锁状态可以旋转。对于希望跟随控制中心的旋转开关的行为可以选择带RESTRICTED后缀字段的旋转方式。
例如想实现跟随控制中心的自动旋转如果想旋转到横屏竖屏反向横屏反向竖屏。则可以设置为AUTO_ROTATION_RESTRICTED。
如果不想跟随控制中心的控制开关那么只需要设置为AUTO_ROTATION此时应用的旋转不受到控制中心的锁定控制。其他的旋转方式同理。 其他更详细内容可参见官网《最佳实践》
