Egret适配解决方案

第一次使用Egret进行开发的时候，原以为使用showAll进行适配是可以的，结果负责人说不允许屏幕有黑边，而其他屏幕适配模式也不能够满足需求。这时候就想，如果Egret的显示对象能够像H5标签设置样式然后能做到类似“cover”、"contain"、"left"、"top"等等的适配、布局的话，那么问题就能够很好解决了。然后决定自己实现、封装这样功能的一个工具。

工具的目标是，容器的布局更为方便

比如现在有个bg（显示对象）对象，我希望它的大小相对父元素为cover，那么我只需要像下面这样调用这个方法：

    DisUtil.get(bg).cover();

我希望content对象（显示对象）的大小相对父元素是contain：

    Disutil.get(content).beCon();

对应居左、居上等等：

    Disutil.get(content).top();

甚至使得元素能够链式调用：

    Disutil.get(content).beCon().top();

在实际的过程中，处理的对象不止能够参考其父元素，其能够参考它的任一祖先元素进行布局，所以Disutil.get函数第二个参数要为它的一个祖先元素：

    Disutil.get(content, ancietn).beCon().top();

另外，缺省ancient时参考的祖先元素为浏览器窗口，这仅在适配模式为noScale时才可以生效

给出实现的最终结果的demo（仅一个ts文件）的git下载地址：https://github.com/JULIUSJIANG/DisUtil/tree/master

 

 

更具体的使用说明：

DisUtil.get(childObj, ancientObj).beCon();

DisUtil.get的第一个参数childObj为 "需要操作的显示对象"，第二个参数parentObj为 “操作对象的参考祖先”, beCon的意思是使得ancientObj内childObj看起来是"contain"(保持缩放尽可能显示全部，垂直居中)，然后结果会如下所示：

对childObj的操作支持链式写法，如：DisUtil.get(childObj, parentObj).cover().centerHor().top();，显示结果如下所示：

代码意思为，参照ancientObj，先覆盖，再水平居中，再居顶

如果有需要参照浏览器窗口，那么适配模式要为“noScale”。举个例子，一般显示对象都是放进Main这个显示对象里面的。

在Main类里面：

//假定设计图大小为750 * 1206

DisUtil.size(this, 750, 1206); //设置大小为750 * 1206，如下图

DisUtil.get(this).beCon(); //缺省ancientObj的话参考的显示对象为浏览器窗口，然后this就参考浏览器窗口“显示全部”，如下图

于是乎，整个显示的效果就和适配模式设置了"showAll"是一样的，然后

var bg //bg为你要设置的整个项目的一个背景

this.add(bg); //this指的是main，如下图

DisUtil.get(bg).cover(); //缺省ancientObj的话参考的显示对象为浏览器窗口，然后bg就参考浏览器窗口“覆盖全部”，如下图

于是很简单地，就在保持元素宽高比的基础上完成了“内容尽可能显示”，“背景刚好覆盖全屏”

更多操作具体看demo提示