第一次使用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提示

 

 

 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐