前言

UI在項(xiàng)目中必不可少，需求不一定都是16:9，各種比例分辨率的屏幕層出不窮，這樣如何實(shí)現(xiàn)UI自適應(yīng)這顯得及其重要，這里我們就來講解一下自適應(yīng)中及其關(guān)鍵的Canvas Scaler。

說明

如下是官網(wǎng)給出的說明：

這里有三種縮放模式：

1.恒定像素模式（Constant Pixel Size）

無論屏幕大小如何，UI 元素都保持相同的像素大小。

2.根據(jù)屏幕縮放（Scale With Screen Size）

即：屏幕越大，UI 元素越大。

3.恒定物理尺寸（Constant Physical Size）

UI 元素?zé)o論屏幕大小和分辨率如何都保持相同的物理大小。

比較常用的是根據(jù)屏幕縮放（Scale With Screen Size），它有三種模式：

1. 匹配寬度或高度(Match Width or Height)

以寬度為參考、以高度為參考或介于兩者之間的值來縮放畫布區(qū)域。

2. 擴(kuò)張(Expand)

水平或垂直擴(kuò)展畫布區(qū)域，因此畫布的大小永遠(yuǎn)不會(huì)小于參考。

3. 收縮(Shrink)

水平或垂直裁剪畫布區(qū)域，因此畫布的大小永遠(yuǎn)不會(huì)大于參考。

搭建UI對(duì)比

這里我我們以1920*1080的參考比例搭建UI，將IU元素都設(shè)定錨點(diǎn)，然后通過切換不同的分辨率來看看變換的效果。

1.恒定像素模式

1920*1080 效果：

3000:100 效果：

可以看到無任何拉伸或者縮放，都是按設(shè)定的大小顯示。

2.恒定物理尺寸

這個(gè)的UI因?yàn)楸仨毎次锢沓叽?#xff0c;左右兩邊中間的長(zhǎng)條進(jìn)行了縮短。
1920*1080 效果：

3000:100 效果：

都有一定的統(tǒng)一縮放，而且因?yàn)楦叨茸兓?#xff08;1080->1000）左右兩側(cè)的間距變窄了一小點(diǎn)，其它也基本看不出什么變化。

3.根據(jù)屏幕縮放

這種模式下除了擴(kuò)張和收縮模式，匹配寬度或高度可能有很多情況，這里就展示匹配高度、匹配寬度和匹配高寬0.5這三種情況。
而且所有根據(jù)屏幕縮放的情況都如下圖：

1. 擴(kuò)張

3000:100 效果：

這里可以看到，canvas的寬度進(jìn)行了拓展（1920 --> 3240）,高度保持不變（1080）同時(shí)整體收縮了0.9259倍，UI基本正常。

2.收縮

3000:100 效果：

這里可以看到，canvas的高度進(jìn)行了收縮（1080 --> 640）,寬度保持不變（1920）同時(shí)整體放大了1.5625倍。畫面出現(xiàn)異常，左右兩邊居中的的綠色和橙色部分超出畫面

3.匹配高度

3000:100 效果：

查看效果其實(shí)和擴(kuò)張的效果是一致的。

4.匹配寬度

3000:1000 效果：

查看效果其實(shí)和收縮的效果是一致的。

5.匹配寬度高度

3000:1000 效果：

可以看到，canvas的寬度進(jìn)行了收縮（1080 -->831）,高度進(jìn)行放大（1920 --> 2494）同時(shí)整體放大了1.2倍。畫面出現(xiàn)異常，左右兩邊居中的的綠色和橙色部分已經(jīng)遮擋其它元素。

運(yùn)行對(duì)比

上面進(jìn)行了編輯器狀態(tài)下的分辨率切換測(cè)試，下面進(jìn)行打包發(fā)布后在800*600分辨率下查看效果。

1.恒定像素模式

效果：

由于窗體小，UI混亂。

2.恒定物理尺寸

效果：

由于窗體小，UI混亂。

3.根據(jù)屏幕縮放

這種模式下除了擴(kuò)張和收縮模式，匹配寬度或高度可能有很多情況，這里就展示匹配高度、匹配寬度和匹配高寬0.5這三種情況。

1. 擴(kuò)張

效果：

正常顯示，只是有點(diǎn)分散。

2.收縮

效果：

正常顯示。

由于窗體小，UI混亂。

3.匹配高度

效果：

正常顯示

4.匹配寬度

效果：

正常顯示，只是有點(diǎn)分散。

5.匹配寬度高度

效果：

正常顯示。

總結(jié)

開發(fā)過程中常用的方式是根據(jù)屏幕大小適配，再配合錨點(diǎn)基本能滿足常用的UI適配；如果項(xiàng)目可能是超寬屏幕，可以考慮高度匹配； 如果項(xiàng)目使用環(huán)境在一定的分辨率范圍內(nèi)，可以考慮匹配高寬0.5的方式適配會(huì)更美觀；如果不適配可以考慮恒定像素模式和恒定物理像素模式。

測(cè)試源碼

這里將源碼工程開放，更多的測(cè)試可以自行修改分辨率進(jìn)行測(cè)試。

https://download.csdn.net/download/qq_33789001/19549118

總結(jié)

以上是生活随笔為你收集整理的Unity3d UI自适应之Canvas Scaler详细说明和测试项目源码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。