參考:
版本2.1.1.1
目錄
一 適配模式
二 UI組件適配
一 適配模式
基本和白鷺的適配模式一樣。
Laya官方也推薦了豎屏使用fiexedwidth,橫屏使用fixedheight。這也是我自己常用的適配模式。
修改適配模式在項目GameConfig.ts下
fixedWidth,屏幕過長時,下方會出現黑框
fixedWidth,屏幕過短時,會裁剪下方UI (下方兩個紅色方塊不見了)
fixedHeight,屏幕過長時,會裁剪右邊UI (右邊兩個紅色方塊不見了)
fixedheight,屏幕過短時,右邊會出現黑框
二 UI組件適配
Laya的頁面上UI如何適配,比如游戲中的圖標。需要在不同手機上恆定右上顯示,或者右下顯示。
在白鷺中組件的面板有個快捷約束,可以設置UI組件的適配。比如下圖中,這個Group組件始終居中顯示。
Laya中貌似只能設置屬性面板中的top,buttom,left,right屬性來適配。
首先設置頁面容器的top=0,buttom=0,left=0,right=0.表示頂層容器跟隨舞台大小變化。(頁面要選擇View,因為Scene是不支持適配的)
我界面上分別在左上,左下,右上,右下,中間放了5個按鈕,用於適配調試用。現在設置左下的按鈕始終居於左下。
選擇按鈕,然后設置按鈕屬性面板的left,right,top等。
設置左下按鈕left=0,buttom=0。表示按鈕始終離左邊0像素,離下面0像素。
設置右下按鈕right=0,buttom=0。其他按鈕如法炮制。
實際效果