Laya 屏幕适配

Laya 屏幕适配

@author ixenos 2021年4月9日

 

1.屏幕适配的主要痛点在于：如何让设计尺寸和屏幕尺寸融洽，比如说消除黑边，异形屏适配，还有固定居上居下居左居右居中等等的问题

2.这里直接给出一个刚出炉的code snippet，对竖屏页面进行适配

 1 Laya.stage.scaleMode = Stage.SCALE_FIXED_WIDTH;//竖屏，设置适配宽度
 2 Laya.stage.alignH = Stage.ALIGN_CENTER;//水平居中
 3 Laya.stage.alignV = Stage.ALIGN_MIDDLE;//垂直居中
 4 Laya.stage.screenMode = Stage.SCREEN_VERTICAL;//自动竖屏
 5 Laya.stage.on(Event.RESIZE, this, onResize);//监听resize
 6 
 7 ...
 8 
 9 private function onResize():void{
10    if(_index){
11       _index.size(Laya.stage.width,Laya.stage.height);
12    }
13 }

　　1）这里将index作为整个游戏的根节点，主要用于resize时动态设置宽高

　　2）其他容器在加入index时，需要使用布局属性 left，right， top，bottom， centerX，centerY等，因为重设size（width，height）的时候，会触发重新布局相关的代码。 

3.横屏同理，就不赘述了。

4.对于异形屏的适配，需要额外定义一个异形屏留空的常量尺寸（对应刘海头，左右摄像头等的位置），然后再定义一个触发异形适配的阈值，每个页面都监控resize事件，或者初始时只调用一次，从而对异形屏进行判断适配。这部分需要结合具体业务逻辑去处理，也不赘述了。

 

posted @ 2021-04-09 11:48  ixenos  阅读(670)  评论(0)  编辑  收藏  举报