前言:
最近在學習UGUI,在學習UGUI當中的屏幕自適應的時候出現了問題,搞的我很頭疼,于是在網上查了很多資料,花了一晚上的時間,其實當時還是沒想明白,但夜里突然失眠了,于是想了想昨天晚上看的資料,突然靈光一閃好像明白了點什么,為了方便以后的查閱,因此也就有了這篇文章。好了咱們廢話不多說 ~
想要明白UGUI的屏幕自適應(多分配率適配)首先你要明白:Canvas和錨點有什么區別?因為在進行適配的時候,只有搞明白這兩個東西,才能真正的實現適配,否則很容易亂套。
一、首先我們先搞明白Canvas(實際上就是所支持的設備屏幕,調節Game視圖里面的分辨率就是調節Canvas的大小,也就是選擇所支持的設備屏幕大小):確切的說是搞明白Canvas當中一個屬性Match:
此時我們需要把UI Scale Mode選為Scale With Screen Size(縮放根據屏幕尺寸),并且Screen Match Mode選為Match Width Or Height(匹配根據寬度還是高度),這樣我們才能看到它。這里如果我們把Match當中的滑條滑到最左邊,也就是根據寬度進行屏幕自適應(一般用于橫屏的屏幕),你如果去擠壓或者擴大屏幕的寬度的話,雖然寬度會改變,但是高度也會隨著寬度保持剛開始的比例改變,所以整體的效果還是沒變化,如下圖所示:
拉到最右邊跟最左邊同理,會根據高度進行屏幕自適應(一般用于豎屏的屏幕),保持剛開始的比例;如果拉到中間的話,寬高都會進行屏幕自適應,這里我就不太清楚了,這個地方的應用場景不太了解,在下也剛剛接觸沒多久~咱們這里的操作都是對畫布(Canvas)的操作,讓畫布實現屏幕自適應,而其他的東西都要在畫布當中顯示,所以這對于后面的操作很重要,否則就要前功盡棄了。
二、其次我們要搞明白錨點(Anchors),如下圖:
AnchorsMin:錨框左下角的點
AnchorsMax:錨框右上角的點
AnchorsMin和AnchorsMax中的x、y都是歸一化的值,歸一化就是說他們的取值范圍是[0,1],這個歸一化的比例是跟父物體的大小匹配的,如果沒有父物體就是跟畫布大小匹配的
其實準確的說Anchors是錨框,錨點只是錨框的特殊情況
這里我們方便描述,設置了兩張圖片,黑框和紅框,黑框設為紅框的父物體,如圖:
這里講一下,當一個對象有父物體的時候,錨框會以父物體為錨框的活動區域;如果這個對象沒有父物體的時候,畫布就默認是它的父物體,畫布就是它的活動區域
當AnchorsMin和AnchorsMax不在同一水平線或垂直線上的時候,就形成了錨框;當AnchorsMin和AnchorsMax兩個點重合的時候,就形成了一種特殊情況:錨點
這里講一下Rect Transform中的custom:
可以控制錨點(紅色框的)、錨框(黃色框的)、子物體本身注冊點位置(按住Shift會出現)、子物體占父物體的位置(按住Alt會出現),如圖:
這里要講一下注冊點(Pivot):注冊點就是自身的中心點,也是個歸一化的點
情況一:當是錨點的時候,使用的是絕對位置,定在父物體身上的錨點到子物體身上的注冊點的距離不會改變,子物體的大小也不會改變。我們現在改變屏幕的分辨率,你會發現畫布左下角錨點的位置和黑框注冊點的位置之間的距離不會改變,如圖:
你也可以拖動黑框,會發現雖然父物體黑框大小改變了,但是子物體紅框定在父物體黑框身上的錨點到子物體紅框身上的注冊點(Pivot)的距離并沒有改變,如圖:
總結一下:當使用的是錨點的時候,使用的是絕對位置,被子物體定上錨點的父物體的大小改變、移動都不會改變子物體鎖定的錨點到子物體注冊點(Pivot)之間的距離。
情況二:當是錨框的時候,使用的是相對位置,你會發現,定在父物體身上的錨框左下角的點(AnchorsMin)到子物體身上的左下角的點距離不會改變,錨框右上角的點(AnchorsMax)到子物體身上的右上角距離不會改變。我們現在移動黑框,發現紅框會跟著黑框一起移動,但是AnchorsMin到紅框左下角點的距離,以及AnchorsMax到紅框右上角點的距離并沒有發生改變,如圖:
總結一下:當使用的是錨框的時候,使用的是相對位置(相對父物體的位置),被子物體定上錨框的父物體的移動不會改變子物體鎖定的錨框的AnchorsMin到子物體左下角點之間的距離以及錨框的AnchorsMax到子物體右上角點之間的距離。
最后:
感謝大家的觀看,實際上我也只是剛剛接觸Unity,對很多東西還很不熟悉,只是對Unity很有興趣,由于看到很多大神寫了很多很棒的文章,于是自己也想試著寫寫看,發現如果能寫的很好對自己也是一種提升,可以讓自己的學習更清晰,如果文中有錯誤的地方,還望大家多多指正~在寫這篇文章的時候借鑒了很多大神的文章,受益良多,表示感謝,鏈接如下,大家感興趣的話,也可以看看~
http://www.lxweimin.com/p/dbefa746e50d
http://blog.csdn.net/kira0457/article/details/48639107
http://www.360doc.com/content/15/0730/09/26127157_488301731.shtml
https://www.cnblogs.com/hammerc/p/4837650.html
http://www.mamicode.com/info-detail-1148448.html