“互联网+”
技术服务解决方案提供商

0371-61875577
”互联网+“
技术服务解决方案提供商

Laya屏幕适配

javascripthtmlNode.js
笨笨君 2019-08-30T04:00:36.000Z
561 0 0

屏幕适配

刚接触Laya屏幕适配的时候也是各种坑,感觉很难实现手机适配想要的效果,这里我们来总结一下Laya的APP屏幕适配解决方案

首先我们先了解一下屏幕适配的缩放模式,缩放模式是屏幕适配的重点和核心

1. 缩放模式的选择

image.png
image.png
image.png

通过上面的官方提供的API文档,我们对缩放模式有了初步的了解,如果还不是很清楚,可以参考下官方的实例加深了解Laya屏幕适配的缩放模式详解,这里我们需要选择适合的缩放模式

使用SCALE_FIXED_AUTO缩放模式,应用保持设计比例不变,全屏显示全部内容,做过屏幕适配的小伙伴应该都知道只有按比例才能实现不变形,全屏显示可兼容现在普遍的全面屏手机

2. 初始化舞台,宽高选择

在项目代码中初始化舞台Laya.init()中定义的宽高即为设计宽高,缩放模式选择了保持设计比例不变,所以这里的设计宽高的初始化也是至关重要

这里我们选择使用Laya.Browser.widthLaya.Browser.height来获取设备屏幕的物理宽高,以此作为舞台初始化的宽高

3. 画布对齐方式的选择

image.png
image.png

在这里我们选择使用画布垂直居中对其,避免画布显示偏移

Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//画布水平居中对齐 Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//画布垂直居中对齐

4. 布局方式

  1. 布局的框架

image.png

  • bg_img:场景背景图

宽高及其位置属性设置如下图:(其中1334*750是根据项目需求自定义的)
image.png- safeArea: 安全区域,所有布局UI组件都在其中

宽高及其位置属性设置如下图:(居父容器的距离是重点)
image.png

  • 全屏组件配置如下:(仅供参考,根据实际需求调整)

image.png

  • 局部组建配置如下:(仅供参考,根据实际需求调整)

image.png

总结:通过以上我们可以看出主要采用了相对布局的方式,主要核心属性如下

image.png

5. 屏幕适配工具类

/** * 屏幕适配工具 * * @class ScreenAdapterTool */ export default class ScreenAdapterTool { /** * 标准屏幕宽度(自己游戏使用的标准比例的宽) */ private static standardWidth = '初始化宽度'; /** * 标准屏幕高度 */ private static standardHeight = '初始化高度'; /** * 屏幕适配 * @param stage 场景 * @param safeArea 安全区 * @param isLandscape 是否是竖版 * @param background 背景图 */ public static screenAdapterMethod(stage: Laya.Scene, safeArea: Laya.Box, isLandscape: boolean = true, background: Laya.Image = null) { /** 宽度放大倍数 */ let scale_X = Laya.Browser.width / this.standardWidth; /** 高度放大倍数 */ let scale_Y = Laya.Browser.height / this.standardHeight; //如果宽度放大较多 if (scale_X > scale_Y) { //以高度放大 stage.scale(scale_Y, scale_Y); //修改场景宽度 stage.width = this.standardWidth * (scale_X / scale_Y); //iphoneX适配 if (MyConfig.isIPhoneX) { safeArea.left = 68; } } else { //以宽度放大 stage.scale(scale_X, scale_X); //修改场景高度 stage.height = this.standardHeight * (scale_Y / scale_X); //iphoneX适配 if (MyConfig.isIPhoneX) { safeArea.top = 68; } } if (background !== null) { background.left = 0; background.right = 0; background.bottom = 0; background.top = 0; } } }

6. class构造函数中调用工具类,适配页面

constructor() { super(); ScreenAdapterTool.screenAdapterMethod(this, this.safeArea, true, this.bg_img); }
0
0

点击展开全文

0/200

全部评论

    查看更多