Laya设置UI自动适配

一直使用的unity在开发游戏，最近要使用到Laya开发，发现Laya的sprite做UI适配没有unity那么方便。经过探索还是实现了类似unity的适配方式。

上图是unity做UI适配的界面，在界面上直接设置就可以了，不需要其他操作，很方便。UI会自动根据手机屏幕设置到对应位置。

我Laya的设置如下，采用宽屏，适配模式是高度适配

在场景中直接添加一个Image

Laya的Image属性面板上有left， right， top， bottom， centerX， centerY这几个参数设置，但是发现设置后效果并没有实现固定在屏幕的某个相对位置。

我添加一个背景，并在右下角添加了一个Image"程序猿"图标。  Image设置如下

设计尺寸显示如下：是正常的

宽拉长之后，右边出现黑边

宽减小之后，显示不完整了

这里需要先在Scene上添加一个组件widget，并设置left right top bottom都为0。

背景也同时添加，并设置一样。

这样设置之后，得到的结果就是想要的了，下面是正常，左右拉伸，左右缩短之后的情况。背景不会出现黑边，大猩猩也一直保持在右下角的相对位置。

这里主要是涉及到stage和scene，Laya中scene是在stage之下的，只是在编辑器中看不到stage节点，打开调试模式就能看到真实的节点样子。

舞台stage是和手机分辨率保持一直的，而场景scene不是，要scene和stage保持一直，需要添加widget，并像前面说的那样设置。

Laya还有一个问题，Image有参数设置适配，但是sprite,text这种没有left， right， top， bottom， centerX， centerY这几个参数可以设置，这种要做适配怎么做呢？

今天找到一个方式可以实现。

这里以右下角为例，首先在场景中添加一个sprite(这个不需要显示任何图片，所以不要设置texture)，设置这个适配点的名称为“rightDown”，然后设置位置在右下角。

再添加widget组件。并设置right和bottom都为0。如下图

再添加一个sprite显示一个钻石。注意位置设置好显示在右下角。

然后将这个钻石设置成rightDown的子级。

这样设置之后，就能保持这个钻石一直处于右下角显示。

同理制作了右上角（text文本和sprite牛），顶部中间(sprtie鸡蛋)，右侧中间（sprtie鸡蛋），底部中间（sprtie红包），左下角（sprite牛），左侧中间（sprtie红包），左上角（sprtie红包）等位置的适配。几个适配点的widget的设置如下：

在不同分辨率下，几个位置的图标始终保持在屏幕的相对位置不变。这样就和unity的适配比较一直了。

注意：步骤不能乱。我测试发现步骤不正确导致适配不正确。我的步骤如下

1、先制作scene的适配。

2、再先制作适配点的适配。

3、将显示的sprite或text在scene中设置到对应位置，再将这个sprite设置成对应适配点的子级。

4、widget不需要设置的参数不要填写0，要保持空的状态。