需求:
1均牢、場(chǎng)景底部UI包含3個(gè)按鈕糠雨;
2、3個(gè)按鈕寬度相同膨处,并能自適應(yīng)各種尺寸的手機(jī)屏幕见秤;
3、容器與按鈕之間有padding真椿;
4鹃答、3個(gè)按鈕之間有間隔;
效果圖
權(quán)重.png
實(shí)現(xiàn)
1突硝、設(shè)置Canvas
1.1测摔、設(shè)置Render Mode
共三種模式:
Screen Space-Overlay:不需要指定的攝像機(jī),且UI出現(xiàn)在所有攝像機(jī)的最前面解恰;
Screen Space-Camera:需要指定一個(gè)UICamrea,它支持UI前面顯示3D對(duì)象和粒子系統(tǒng)锋八;
World Space:UI和3D對(duì)象完全一樣;
1.2护盈、設(shè)置界面適配模式 Screen Match Mode
共三種模式:
Shrink: 保持縮放比例挟纱,裁切
Expand: 縮放不裁切
Match Width Screen Size:
如果是Match Width 那么就是適配寬度,把寬度設(shè)置為屏幕寬度腐宋,然后保持比例
如果Match height紊服,那么適配高度檀轨,首先把高度設(shè)置為屏幕高度,然后保持比例
image.png
2欺嗤、設(shè)置水平容器
2.1参萄、新建子物體,添加Horizontal Layout Group腳本
2.2煎饼、設(shè)置水平容器錨點(diǎn)
錨點(diǎn).png
2.3讹挎、設(shè)置Horizontal Layout Group腳本組件的padding和margin
間隔.png
2.4、添加3個(gè)按鈕
會(huì)根據(jù)容器設(shè)置的屬性吆玖,自動(dòng)均分寬度筒溃,且自適應(yīng)各種屏幕
image.png