【代码分享】贴边UI功能！

由于手机尺寸各异，无论选择什么样的自适应模式都会被截取一部分内容，如果你刚好有一个按钮的设计是属于贴着边框的，通常可以通过选择“高度适配”或者“宽度适配”就可以解决，但是如果左右侧边和上下侧边同时都有贴边设计的按钮或者我们不希望有留边的话，就无法通过木疙瘩自带的适配来防止按钮被切割了，这时候就需要我们手动去计算这些贴边按钮应该出现的位置！（具体设置方法请看相关教程）
先来看看这个案例：http://102f1cea.u.mgd5.com/campaigns/57831537a3664e4735000300/20161219063748/5841517e92b57979951510a3/index.html
这个案例使用的是“覆盖”的自适应效果，也就是无论屏幕是怎样的比例，绝对不会出现留边的情况，高度超出比例时候按高度适配，宽度超出比例的时候就按宽度适配，配合贴边UI就可以让整个画面始终保持饱满的状态了！
 
进入正题，如何实现贴边UI？这个还需要通过当前显示范围大小配合选择的自适应效果，通过计算来实现！首先我们要先显示现在的显示窗口大小：
在舞台上新建两个文本框，分别命名为“窗口高度”“窗口宽度”
然后选择发布按钮左边的 [JS] 按钮，插入如下代码：

var mugeda = Mugeda.getMugedaObject();

mugeda.addEventListener('renderReady', function () {

     var scene = mugeda.scene;

     var yemianW = scene.getObjectByName('窗口宽度');

     var yemianH = scene.getObjectByName('窗口高度');

     var oldW;

     var oldH;

     var updateTime = function () {

         

        if(oldW != window.innerWidth || oldH != window.innerHeight){//防止持续更新文本框

            oldW = yemianW.text = window.innerWidth;

            oldH = yemianH.text = window.innerHeight;

        }

     }

     scene.addEventListener('enterframe', function () {

          updateTime();

     });

});

之后就可以通过“窗口高度”“窗口宽度”这两个文本框，知道现在显示的窗口大小了！
接下来就是分析显示窗口和木疙瘩舞台的关系了，就那“宽度适配”来举例说明吧！
宽度适配情况下，是显示的内容始终让宽度占满整个屏幕，并且宽高比不改变，内容居中显示，如下图：

我们想要按钮1贴着上边，按钮2贴着下边显示的话，我们需要先求出上下边界线在作品里的坐标。
由于宽度自适应，可以观察的出 显示区域高度/作品宽度 = 窗口高度/窗口宽度
所以  显示区域高度 = 窗口高度/窗口宽度*作品宽度。
由于作品内容是居中的，因此，显示的上边界所在上坐标为：  上边界上坐标 = (作品高度-显示区域高度)/2
所以按钮1上坐标应该为：(作品高度-窗口高度/窗口宽度*作品宽度)/2
同理按钮2上坐标应该为：作品高度-(作品高度-窗口高度/窗口宽度*作品宽度)/2-按钮高度
知道怎么算出来之后，就可以通过“改变元素属性”的行为，填入取值公式就可以实现贴边UI的功能了！为了每次窗口变化都能触发，行为需要添加在显示区域的文本框上，触发方式选择为“属性改变”，就可以确保每次窗口改变时候都能实时改变啦！赶快去试试吧！
觉得本篇文章对你有帮助的请点个赞！
 
PS：我上面制作的这个案例的翻页功能也是通过代码实现的，目前木疙瘩还不支持不受翻页影响的导航功能，据官方人员了解，这个功能可能需要到明年才能完成！
 
 
我的其它文章：
【高级互动】如何制用木疙瘩做游戏？ http://bbs.mugeda.com/?/article/392
【代码分享】用鼠标进行控制（鼠标响应事件）！ http://bbs.mugeda.com/?/article/267
手机上播放木疙瘩的H5动画很卡怎么办？5招教你解决！    http://bbs.mugeda.com/?/question/230​