天天看點

Unity基礎:文本框、圖檔自适應(ContentSizeFitter、VerticalLayoutGroup等元件的使用)

1、Unity UGUI背景圖檔自适應文字大小_PalmAdorableTiger的部落格-CSDN部落格

2、

Unity基礎:文本框、圖檔自适應(ContentSizeFitter、VerticalLayoutGroup等元件的使用)
Vertical Layout Group/Horizontal Layout Group
  • Padding:控制子節點和上下左右的距離
  • Spacing:每個Item之間的距離
  • Child Alignment 表示對齊方式。
  • Control Child Size:是否會控制子元素的寬高,隻有啟用該選項Layout Element的設定才會起作用;
  • Child Force Expand:1、Width 是否強行擴大布局元素寬度以填補額外可用的空間 ;2 、Height:是否強行擴大布局元素高度以填補額外可用的空間 
Content Size Fitter:自适應子節點的數量和大小,分為兩個方向,橫向和豎向

3、 Grid Layout Group 格子布局

Unity基礎:文本框、圖檔自适應(ContentSizeFitter、VerticalLayoutGroup等元件的使用)

Padding    内邊距

Cell Size    組内每個格子的size

Spacing    格子間隔

Start Corner    最開始的格子位于父控件的位置

Start Axis    格子水準排列or豎直排列

Child Alignment    如果有多餘空間,格子的對其方式

Constraint    強制格子布滿特定行,列

4、Layout Element 布局子控件

Unity基礎:文本框、圖檔自适應(ContentSizeFitter、VerticalLayoutGroup等元件的使用)

Min Width    最小寬度,子控件必須滿足的最小寬度(優先滿足,具有強制性)

Min Height    最小高度:子控件必須滿足的最小高度(優先滿足,具有強制性)

Preferred Width    最優選的寬度:如果父控件在滿足子控件最小寬度後仍然有富餘空間,優先選擇的寬度

Preferred Height    最優選的高度:如果父控件在滿足子控件最小高度後仍然有富餘空間,優先選擇的寬度

Flexible Width    彈性寬度:父控件在滿足子控件優選寬度之後仍然有富餘空間,剩餘空間按比例配置設定的比例數值

Flexible Height    彈性寬度:父控件在滿足子控件優選高度之後仍然有富餘空間,剩餘空間按比例配置設定的比例數值

5、Content Size Fitter

  • 該元件主要用來控制UI的寬高,通過Horizontal Fit和Vertical Fit的三個枚舉項來确定控制的方式
  • 當該UI上有Text或者Image時,則可通過設定Horizontal Fit/Vertical Fit控制方式來改變UI的大小,達到自适應效果
Unity基礎:文本框、圖檔自适應(ContentSizeFitter、VerticalLayoutGroup等元件的使用)

6、實作效果:父物體下有兩個帶有Text元件的子物體,需要子物體Text元件随内容增減改變大小,并在父物體下完美排版。

解決方案:父物體添加Vertical Layout Group元件,通過Control Child Size控制子物體的寬和高,達到當子物體Text内容增減時,其在父物體下排版不亂,

Unity基礎:文本框、圖檔自适應(ContentSizeFitter、VerticalLayoutGroup等元件的使用)

最終效果:

Unity基礎:文本框、圖檔自适應(ContentSizeFitter、VerticalLayoutGroup等元件的使用)
Unity基礎:文本框、圖檔自适應(ContentSizeFitter、VerticalLayoutGroup等元件的使用)
Unity基礎:文本框、圖檔自适應(ContentSizeFitter、VerticalLayoutGroup等元件的使用)

(待補充)

繼續閱讀