ugui權重適配手機屏幕

需求:

1、場景底部UI包含3個按鈕;
2、3個按鈕寬度相同,并能自適應各種尺寸的手機屏幕;
3、容器與按鈕之間有padding;
4、3個按鈕之間有間隔;

效果圖

權重.png

實現

1、設置Canvas
1.1、設置Render Mode

共三種模式:
Screen Space-Overlay:不需要指定的攝像機,且UI出現在所有攝像機的最前面;
Screen Space-Camera:需要指定一個UICamrea,它支持UI前面顯示3D對象和粒子系統(tǒng);
World Space:UI和3D對象完全一樣;

1.2、設置界面適配模式 Screen Match Mode

共三種模式:
Shrink: 保持縮放比例,裁切
Expand: 縮放不裁切
Match Width Screen Size:
如果是Match Width 那么就是適配寬度,把寬度設置為屏幕寬度,然后保持比例
如果Match height,那么適配高度,首先把高度設置為屏幕高度,然后保持比例
image.png

2、設置水平容器
2.1、新建子物體,添加Horizontal Layout Group腳本
2.2、設置水平容器錨點


錨點.png

2.3、設置Horizontal Layout Group腳本組件的padding和margin


間隔.png

2.4、添加3個按鈕
會根據容器設置的屬性,自動均分寬度,且自適應各種屏幕
image.png
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,104評論 1 92
  • ¥開啟¥ 【iAPP實現進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 7,307評論 0 17
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 28,780評論 1 45
  • 在我們學習如何進行屏幕適配之前,我們需要先了解下為什么Android需要進行屏幕適配。 由于Android系統(tǒng)的開...
    知青的葉閱讀 1,625評論 0 2
  • iOS零碎知識點<初級版>iOS零碎知識點<中階版>iOS零碎知識點<中階版>iOS零碎知識點<工具篇> 查看動態(tài)...
    nenhall閱讀 307評論 1 1

友情鏈接更多精彩內容