基本UI元素
構成UI元素的組件中包括顯示推向和字符串的可視組件Visual Component以及控制交互UI元素的交互組件Interaction Component
可視組件Visual Component
圖像Image
在圖像Image組件中有Source Image、Color、material、Image Type等屬性
圖像類型Image Type
Simple
當Image Type屬性設置為Simple時，組件會適應Rect Transform的范圍來顯示Sprite，當調整Rect Transform的大小時，精靈將直接拉伸顯示
圖片類型設置為Simple時，會有一個保持長寬比Preserve Aspect Ratio的屬性，未勾選保持長寬比屬性時，精靈會無視其原本的長寬比直接鋪滿顯示在Rect Transform的范圍內，勾選后，可以保持精靈原始的長寬比以最大尺寸顯示在Rect Transform組件范圍內
Set Native Size選項可以重置精靈為原始尺寸（等倍像素）
Sliced
當Image Type屬性設置為Sliced時，顯示的是在Sprite Editor中切片后的精靈，切片操作將圖像分為9個區域，只4個角的尺寸保持不變，四邊以及中心部分其余進行拉伸顯示
圖片類型設置為Sliced時，會有一個填充中心Fill Center屬性，來確定是否對圖像的中心部分進行渲染
Tiled
當Image Type屬性設置為Tiled時，會以精靈為一個圖樣，像貼瓷磚一樣在Rect Transform范圍內鋪滿排列顯示，圖樣的基准點時Rect Transform的左下方
當使用的精靈使用Sprite Editor設置了切片時，將會介於Sliced和Tiled之間進行顯示，精靈的四角不變，四邊進行拉伸，中心進行平鋪排列，中心部分圖樣的基准點也位於左下方
和Sliced一樣，設置后會有一個Fill Center屬性來決定是否顯示中心部分
Filled
當Image Type屬性設置為Filled時與Simple一樣會在Rect Transform的范圍內進行顯示，同樣有保持長寬比Preserve Aspect Ratio的屬性和Set Native Size的選項
除了和Simple相同的屬性，設置為Filled圖像類型之后，可以通過Fill Method屬性、Fill Amount屬性、和Clockwise屬性對如何進行塗抹和塗抹多少進行設置
其中，Fill Method可以選擇Horizontal、Vertical、Radial90、Radial180、Radial360
Sprite Editor
導入紋理時，將紋理類型Texture Type設置為Sprite(2D and UI)后，下方會出現一些Sprite的屬性
- Sprite Mode
- Sprite Tag
- Pixel Per unit
- pivot
並且會有一個Sprite Editor的選項，在Sprite Editor中選中精靈后，所選精靈周圍會出現顯示范圍的藍色長方形、用於設置精靈切片的綠色小手柄和軸心位置的標志，Sprite Editor窗口右下角會出現所選中精靈的Name、Position、Border、Pivot等信息
當Sprite Mode設置為Multiple時，可以在Sprite Editor窗口的上方的Slice選項卡中可以選擇自動生成、Grid By Cell Size或者Grid By Cell Count來生成新的精靈
Sprite Packer
紋理圖集功能的模式可以在Project Settings | Editor中設置Sprite Packer的模式來啟用Sprite Packer，模式有：
- Disabled，禁用Sprite Packer功能
- Enabled For Builds，構建時生成紋理圖集
- Always Enabled，Play模式和構建模式下都生成紋理圖集
設置過Sprite Packer的模式后，在Project面板中選擇紋理，設置Import Settings的Packing Tag，之后就會在設置的模式下，將設置了相同Packing Tag的紋理匯集到一個紋理圖集中（Sprite Packer所生成的紋理圖集最大為2048像素*2048像素）
從Windows菜單中選擇Sprite Packer，可以打開Sprite Packer窗口，可以在Sprite Packer窗口中確認生成的紋理圖集
文本Text
在Unity中創建一個Text游戲對象，其上附加的有Rect Transform組件、Canvas Render組件和Text組件
Text組件包含的屬性：
-
Horizontal Overflow屬性可以選擇包裹Wrap和溢出Overflow，選擇Wrap時會將超出范圍的文本自動換行顯示，選擇Overflow時不做換行顯示
-
Vertical Overflow屬性，設置文本過長無法容納於文本范圍的高度時的換行方法，可以選擇截斷Truncate和溢出Overflow，選擇Truncate時將不會顯示超出范圍的文本，而溢出則仍然顯示
-
Best Fit屬性，當勾選Best Fit屬性時會忽略在Font Size屬性中設置的值，會介於設置的最大值和最小值之間進行顯示
-
Rich Text屬性，勾選后可以使用與HTML標記語言相似的格式來修飾文本
交互組件Interaction Component
按鈕Button
按鈕Button是一個附加了Image組件和Button組件的游戲對象，其下包含一個Text的子對象，Text子對象用於顯示按鈕標簽的文本
切換開關Toggle
切換開關時一個附加了Toggle組件的游戲對象，其下包含一個Background子對象（其下包含了Checkmark子對象）和Label子對象
切換開關組Toggle Group
切換開關組是一個附加了Toggle Group組件的游戲對象，在一組Toggle的Group屬性中設置為此Toggle Group
滑塊Slider
滑塊Slider是一個附加了Slider組件的游戲對象，其下包含一個Background子對象、一個Fill Area子對象（其下包含一個Fill子對象）、一個Handle Slide Area子對象（其下包含一個Handle子對象）
滾動條Scrollbar
滾動條Scrollbar是一個附加了Image組件和Scrollbar組件的游戲對象，其下包含了Sliding Area子對象（其下包含一Handle子對象）
滾動視圖ScrollRect
滾動視圖是一個附加了Scroll Rect組件、Image組件、Mask組件的游戲對象，其下包含了一個Scroll Content的子對象
自動布局系統Auto Layout System
布局元素Layout Element組件雖然擁有自身尺寸的決定性信息，如最小尺寸、推薦尺寸、自適應尺寸，但是並不直接改變自身的尺寸，而是基於這些尺寸決定性信息由布局控制器計算並設置
當使用自動布局系統時，布局控制器可以自動控制的屬性稱之驅動屬性Driven Property，手動無法變更該屬性
布局元素Layout Element
布局元素Layout Element指由布局控制器來控制位置和大小的UI元素，通過為附加了Rect Transform組件的游戲對象添加Layout Element組件來布局元素提供決定其尺寸的信息
-
最小尺寸Minimum Width/Height，當沒有足夠的空間分配給布局元素時，因為設置了最小尺寸，所以會為了使最終尺寸不小於設置的最小尺寸而超出布局范圍
-
推薦尺寸Preferred Width/Height，在由足夠的空間時，布局元素會被以推薦的尺寸進行顯示，當空間不夠時，會調整為布局元素在自身的Rect Transform中以推薦尺寸顯示
-
自適應尺寸Flexible Width/Height，當布局空間有空余時，為布局元素分配的空余的相對尺寸，默認值為1
布局控制器Layout Controller
布局控制器基於布局元素提供的信息（最小尺寸、推薦尺寸、自適應尺寸），首先將布局元素按最小尺寸進行布局，如果空間足夠則使用推薦尺寸，如果仍有剩余空間時，則基於布局元素的自適應尺寸進行布局，布局控制器包括：Content Size Fitter、Aspect Ratio Fitter和Horizontal、Vertical以及Grid Layout Group三種布局組
Content Size Fitter
Content Size Fitter時為所附加的布局元素設置尺寸限制的布局控制器，可以固定布局元素的最小尺寸或推薦尺寸
Content Size Fitter組件包括Horizontal Fit屬性以及Vertical Fit屬性，分別用於指定適合布局元素寬度、高度的尺寸，它們的選項有一下三種：
- UnConstrained，不自動設置布局元素的尺寸
- Min Size，使用布局元素的最小尺寸自動設置寬度或高度
- preferred，適應布局元素的推薦尺寸自動設置寬度或高度
Aspect Ratio Fitter
Aspect Ratio Fitter組件是為布局元素設置寬高比限制的布局控制器，可以固定布局元素的寬高比，可以忽略最小尺寸、推薦尺寸等布局信息
Aspect Ratio Fitter組件中有Aspect Mode屬性用於指定決定布局元素位置和尺寸的方法，以及Aspect Ratio屬性，用於設置布局元素的寬高比
Aspect Mode可以選擇：
- None，不自動設置布局元素的位置和尺寸
- Width Controls Height\Height Controls Width,基於布局元素的寬度或高度自動設置高度或寬度
- Fit In Parent，自動設置布局元素的寬、高、位置、錨點，來適應父元素的內測
- Envelope Parent，自動設置布局元素的寬、高、位置、錨點，來適應父元素的外側
布局組Layout Group
布局組Layout Group是可以控制多個布局元素位置和尺寸的布局控制器，主要有Horizontal Layout Group、Vertical Layout Group以及Grid Layout Group
Horizontal/Vertical Layout Group
Horizontal Layout Group組件和Vertical Layout Group組件都有Padding、Spacing、Child Alignment、Child Force Expand屬性
- Padding,設置子布局元素到布局組內部的編劇
- Spacing，設置子布局元素之間的間距
- Child Alignment，設置子布局元素的對其位置
- Child Force Expand，勾選后，如果布局組有空余，則會擴大布局元素以消除布局組內的空余，擴大的子布局元素是按照布局元素設置的自適應尺寸來決定的
Grid layout Group
Grid Layout Group組件是把布局元素以網格狀進行排列放置的布局組，與上兩個布局組不同的是Grid Layout Group忽略布局元素的最小尺寸、推薦尺寸、自適應尺寸，而為布局元素設置cell size屬性中指定的尺寸
- Padding,設置子布局元素到布局組的邊距
- Cell Size,cell size屬性的X、Y分別表示寬高
- Spacing,設置子布局元素之間的間距
- Start Corner,設置開始放置子布局元素的位置
- Start Axis,設置開始放置子布局元素的方向
- Child Alignment,設置子布局元素的對其位置
- Constraint,為網格的列數和行數設限，Constraint設置為Flexible時，網格的列數和行數沒有限制，Fixed Column Count和Fixed Row Count通過設置Constraint Count分別為網格的列數和行數設限
優化UGUI
對畫布進行分組
畫布組件主要任務有：一、管理在層次窗口中繪制UI元素的網格並發出渲染這些UI元素的Draw Call；二、將材質相同的網格合並進行批處理，來降低Draw Call數
當畫布或者其下的子對象發生變動時，畫布就需要對其下所有的UI元素重新生成網格（只是改變UI元素的顏色屬性時不需要重新生成畫布），之后才能發出Draw Call，所以在單個畫布中構建整個游戲的UI並且UI頻繁發生變化會導致CPU的使用率大幅上升
所以，可以采用使用多個畫布的解決方案，基於游戲時UI的更新頻率進行分組，完全靜態、偶爾動態、連續動態，將分好組的UI分別放到不同的畫布中，這樣可以極大的減少UI變動時重新生成網格的工作量
通過畫布組或者isActive屬性來隱藏UI
通過畫布組或者isActive屬性來隱藏UI，不要通過控制單個UI元素的alpha來隱藏，因為當UI元素Color屬性的alpha值為0時，仍會發出Draw Call，如果要隱藏UI元素可以更改其isActive屬性
當使用了CanvasGroup組件時，也可以通過CanvasGroup組件控制其下所有UI元素的alpha透明度，設置畫布組的alpha值為0來隱藏UI元素並且不發出Draw Call
畫布組，創建一個空的游戲對象在上面附加一個CanvasGroup組件，之后將多個需要統一管理的UI元素設置為其子UI元素，就可以通過畫布組CanvasGroup組件的屬性來同意修改其子UI元素的屬性，當畫布組被嵌套時，可以通過Ignore Parent Groups屬性來忽略父級畫布組中設置的屬性
通過禁用父畫布來隱藏UI元素
當使用UI的布局系統時，因為頻繁的禁用和啟用其子UI元素，會導致不斷的布局污染，可以選擇禁用這些子UI元素的畫布組件設置畫布組件的enable屬性為false（需要注意的是，設置畫布組件為false時，畫布組建對象下的UI元素雖然隱藏了，但是子UI對象上的Monobehaviour方法還是會繼續運行，禁用畫布只是停止了UI渲染和交互）
禁用掉無交互的UI元素的Raycaster Target
UI元素具有Raycast Target選項，允許該UI元素通過單擊、觸摸或者其他行為進行交互，當任一交互行為發生時，GraphicRaycaster組件執行一個for循環來對像素到邊界框進行檢查，確定交互的是哪一個UI元素，當禁用掉無需交互UI的Raycast Target選項后，就減少了GraphicRaycaster組件需要進行迭代的數量
避免在UI系統上使用Animator組件
如果在UI系統中使用Animator組件，那么運行時的每一幀，Animator組件都要改變UI元素的屬性，導致不斷的畫布污染，不斷的重新生成網格消耗更多的CPU
優化ScrollRect組件
ScrollRect組件是用來制作滾動視圖的UI元素，滾動其他UI元素時畫布需要不斷的定期重新生成它們，所以需要通過對多種方式盡量優化ScrollRect組件的性能
-
確保使用RectMask2D
-
在ScrollRect組件上禁用Pixel Perfect
-
手動停用ScrollRect活動
REF
文檔
https://docs.unity3d.com/Manual/com.unity.ugui.html
書籍
Unity游戲優化、精解UGUI