布局屬性(Layout Properties)
布局屬性是每個包含Rect Transform的UI元素都具有的屬性,它和UI元素的寬高(width、height)有關系,但它又不直接決定UI元素的Width和height屬性。它的存在是為一些“布局組件”服務的。布局屬性具體有6條:
1.Min Width
2.Min Height
3.Preferred Width
4.Preferred Height
5.Flexible Width
6.Flexible Height
我們可以在Inspector面板查看布局屬性(僅有Rect Transform的UI元素不顯示)
用Layout Element組件設置布局屬性
六條布局屬性的值默認均為0,一些組件例如Text組件會根據文本長度自動修改布局屬性的值,還有一個神奇的組件Layout Element可以賦予我們手動任意設置布局屬性值的能力。在Layout Element中我們可以選擇給哪條布局屬性賦值。六條布局屬性的具體含義將結合下面的Horizontal Layout Group組件一起說明。
Horizontal Layout Group組件
Horizontal Layout Group組件是一個布局組件,前面說過,布局屬性的存在就是為了布局組件服務的。Horizontal Layout Group組件的作用是讓子物體排成一行。現在先說明Horizontal Layout Group組件的幾個簡單屬性:
屬性 | 說明 |
Padding | 子項與此容器邊緣的距離 |
Spacing | 子項與子項之間的距離 |
Child Alignment | 子項對齊方式,和word文檔里的對齊方式一個意思 |
其他屬性在下面詳細介紹 |
Control Child Size屬性
顧名思義:控制子物體的大小。Horizontal Layout Group組件通常會掛在一個擁有多個子物體的UI物體上,該UI物體相當於背包/容器,其下的多個子物體相當於物品。勾選了Control Child Size屬性后,Horizontal Layout Group將會根據各個子物體的布局屬性(Layout Properties)來調整各個子物體的大小。調整子物體大小會遵守一定的規則,具體規則如下:
第一階段
Min Width表示UI物體的最小寬度,無論容器多小,UI物體都不會小於該值。當容器寬度在0到(所有子物體的Min Width之和)之間時,所有子物體將保持Min Width不變
第二階段
當容器寬度在(所有子物體的Min Width之和)到(所有子物體的Preferred Width之和)之間時,將會把(容器寬度 減去(所有子物體Min Width之和))的這部分寬度按一定比例分配給所有子物體,簡單理解就是所有子物體會隨容器的擴大而擴大直到同時達到自己的Preferred Width。當沒有設置Preferred Width時,大小會保持不變。所謂的一定比例是指所有子物體的(Preferred Width 減 Min Width)的比值,要注意的是,Preferred Width應比Min Width大。
(紅色圖片沒有設置Preferred Width,保持默認值為0,所以大小不變)
第三階段
當容器寬度大於(所有子物體的Prefreed Width之和)時,將會把(容器寬度 減去 (所有子物體Preferred Width之和))這部分寬度按一定比例分配給所有子物體,簡單理解就是所有子物體會隨容器的擴大而擴大。所謂的一定比例就是所有子物體的Flexible width的比值。當沒有設置Flexible width時,大小會保持不變。
(綠色圖片的Flexible Width沒有設置,保持默認值0,所以寬度達到Prefreed Width后就不再變大)
Use Child Scale屬性
如果子項進行過縮放(scale屬性不為1),那么就按照縮放后的寬高進行排版。若不勾選,則按照子項縮放前的寬高進行排版,此時如果有子物體進行過縮放,那么會出現重疊的情況。
(我把藍色圖片的Scale的x設為了2,不勾選Use Child Scale時就會和綠色圖片重疊)
Child Force Expand
若沒有勾選Control Child Size,有幾個子項就將容器划分為幾等份,每個子項分別處在處在每一等份的開頭。
若勾選了Control Child Size,容器的多余空間會直接按照Flexible Witdh的比例進行分配(如果沒有設置Flexible的值,則用1代替)
如果會仔細觀察的話會發現,添加了Horizontal Layout Group組件的物體的布局屬性(Layout Properties)會根據子物體的布局屬性(Layout Properties)自動設置。
這有啥用呢?請看這
參考文章:
https://www.cnblogs.com/ybmr/p/ugui_autolayout.html
https://blog.csdn.net/qq_28849871/article/details/79528697