Laya的屏幕適配,UI組件適配


參考:

屏幕適配API概述

版本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。其他按鈕如法炮制。

 

實際效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM