Unity UI(十一) 多螢幕解析度下的UI布局

2021-07-22 16:59:10 字數 1891 閱讀 3751

多螢幕解析度下的ui布局一般考慮兩個問題:

1、布局元素的位置,即螢幕解析度變化的情況下,布局元素的位置可能固定不動,導致布局元素可能超出邊界;

2、布局元素的尺寸,即在螢幕解析度變化的情況下,布局元素的大小尺寸可能會固定不變,導致布局元素之間出現重疊等功能。

為了解決這兩個問題,在unity gui體系中有兩個元件可以來解決問題,分別是布局元素的rect transform和canvas的canvas scaler元件。

1、rect transform,主要原理是privot(錨點)對布局元素的位置控制作用,privot對ui物件的位置的控制是通過ui物件與privot相對的pos x、pox y或者top、left、botton和right取值進行控制的,在不同螢幕解析度下,ui物件的這些取值相當於privot是固定不變的,這也是導致螢幕解析度變化的情況下,布局元素的位置固定不動的原因。但是我們可以通過控制privot的位置來確保ui物件一直在畫布之內而不會超出界限。比如

(1)剛開始三個button的privot都在中心點,那麼他們的pos x和pos y都是相對於中心點privot的座標點,而且在改變螢幕解析度時這些posx和posy不會變動。如下面兩幅圖對比所示:

(2)那麼如何來實現呢?我們可以把每個button的privot的放到他們各自的對應的角上,則可以確保他們一致在螢幕範圍內。

當我們改變視窗解析度時,我們發現這時button均在螢幕範圍內了。

這時在一定程度上滿足了我們的要求,當時我們發現button的尺寸並未因為螢幕尺寸變小相應的變小,這時我們需要借助canvas 的canvas scaler元件來實現。

2、canvas scaler元件。

(1)ui scale mode,設定成scale with screen size,即隨著螢幕尺寸變化;

(2)reference resolution:參考解析度,即預設的解析度。

(3)screen match mode:螢幕匹配模式。

當螢幕解析度大於參考解析度時,選擇變化較小的乙個方向(橫向還是縱向),作為放大canvas scale的標準,另一方向上的變化則是在整體縮放以後再進行補償性的變化。此舉旨在減少擴大解析度時由於非等比擴大而對ui整體布局造成影響。適合製作較小標準尺寸,擴充到較大螢幕。

例如:reference resolution為800*600,(假設此時canvas scale為(1,1,1))。如果實際解析度為800*800,那麼canvas scale還保持為(1,1,1)因為寬度沒有發生變化,只是單純的高度增加了200。所以勢必對布局造成一定得影響。1000*600的情況也是一樣,canvas scale沒有變化,只是單純寬度增加了200。但如果實際解析度變為1000*800,那麼canvas scale就變成(1.25,1.25,1.25)。因為寬度是參考解析度寬度的1.25倍,高度是1.33倍,那麼取較小的1.25。 這個1.25倍的意義是:整體canvas渲染放大1.25倍,橫向或縱向的變化超過了1.25倍,則靠拉伸canvas來變化,此時因為這部分變化,可能會對布局產生一些相對較小的影響,例如相對位置、某些元素的長寬比。

參考:

螢幕解析度

xga extended graphics array 擴充套件影象陣列 s super 超過 x extended 擴充套件 u ultra 終極 第乙個q quarter 四分之一 最後乙個q quantum 量化 h half 一半 w wide 寬 example vga 640 480 q...

螢幕解析度

1.1920 1080 1080p 1920x1080 1080p 就是俗稱的 full hd sony 超拼的 以前只有在電視上看得到 電腦用 1920x1200 的多 不過開始出現採用 1080p 面板的膝上型電腦,像第二代的 acer 寶石機,標榜可以 讓畫面塞滿螢幕,不留黑邊 主流顯示器各尺...

螢幕解析度

svga 全稱super video graphics array,屬於vga螢幕的替代品,最大支援800 600解析度,螢幕大小為12.1英吋,由於畫素較低所以目前採用這一螢幕的本本也是少之又少了。xga 全稱extended graphics array,這是一種目前筆記本普遍採用的一種lcd螢...