Laya屏幕适配

屏幕适配

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

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

1. 缩放模式的选择

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

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

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

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

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

3. 画布对齐方式的选择

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

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

4. 布局方式

1. 布局的框架

• bg_img：场景背景图

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

宽高及其位置属性设置如下图：（居父容器的距离是重点）

• 全屏组件配置如下：（仅供参考，根据实际需求调整）

• 局部组建配置如下：（仅供参考，根据实际需求调整）

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

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);
}