UI Builder - 2 （開始使用UI Builder）

使用UI Builder建立UI的流程一般會是

1. 建立一個新UI Document (UXML)
2. 為你的UI結構加入element
3. 在 Inspector 中調整element的attributes與style
4. 如果有多個element使用相同的style，可以建立USS style sheets與selectors(類似網頁的css)
5. 測試UI是否符合你的需求，並將inline style放到USS中
6. 儲存UI Document (UXML)

---

以下範例將

• 建立一個root element作為background，這個root element會含有兩個containers。
  • 一個container用來放角色名稱的list，
  • 另外一個用來放角色的詳細資訊。
    • 在這個角色的詳細資訊container中會加入background與foreground frames。
    • 以及兩個label，用來顯示角色名稱

---

建立Root Element

1. 首先建立一個Unity專案
2. 開啟UI Builder， Window > UI Toolkit > UI Builder
   
3. 在UI Builder的Viewpoint中左上角找到File > New建立一個新的UXML document
   
4. 選擇Save，儲存為MainView.uxml
   
5. 在左下角Library中，找到VisualElement，將它拖入Viewport中（雙擊VisualElement也可以）
   
6. 在右側``Inspector`中，找到Inlined Styled，可以在此處修改element的風格
   
7. 找到Flex，將Grow設為1，這會把flex-grow的值設為1，讓它填滿整個螢幕
   
8. 接著找到Align，將Align Items與Justify Content都設為Center
   
9. 把Background的Color設為#732526，並將透明度設為255
   

建立Parent Container

1. 在左下角Library中，將VisualElement拖入前面建立的rootVisualElement中。
   
2. 將這個新建VisualElement它的Flex中的Direction設為row，並把它Size中的Height設為350 pixels
   

建立角色名稱List Container

1. 在左下角Library中，找到ListView將它拖入前面建立的Parent ContainerVisualElement中
   
2. 修改這個ListView的name，改為CharacterList
   
3. 將這個ListView它Size中的Width設為230 pixels，並找到Margin & Padding > Margin > Right把Right設為6
   
4. 設定它的Background > Color為#6E3925，並設定透明度為255
   
5. 設定它的Border > Color為#311A11，並設定透明度為255
   
6. 設定它的Border > Width設為4pixels，Radius設為15pixels。
   

此時你的UI看起來會長這樣

建立角色詳細訊息 Container

1. 在Parent Container中再加入一個VisualElement，
   
2. 將它 Align > Align Items設為flex-end，並且把Align > Justify Content設為space-between
   
3. 將它Flex > Basis > Shrink設為0，並且把Flex > Basis > Grow也設為0
   
4. 在這個VisualElement中加入一個VisualElement
   
5. 為這個VisualElement設定Size > Width為276pixels；Align > Align Items為center；Align > Justify Content為center；最後設定Margin & Padding > Padding為8 pixels。
   
6. 為這個VisualElement設定Background > Color為#AA5939，並設定透明度為255
   
7. 為這個VisualElement設定Border > Color為#311A11，透明度設為255
   
8. 為這個VisualElement設定Border > Width設為4pixels，Radius設為15pixels。
   

此時你的UI看起來會長這樣

建立角色詳細訊息框背景

1. 在角色詳細訊息 Container中加入一個VisualElement
   
2. 將它的Size的Width與Height設為120pixels
3. 將它的Margin & Padding > Padding設為4pixels
4. 將它的Background > Color設為#FF8554，透明度設為255
5. 將它的Border > Color為#311A11，透明度設為255
6. 將它的Border > Width設為4pixels，Radius設為15pixels
   
   此時你的UI看起來會長這樣
   

建立USS來管理Style

在建立UI時，可以發現Border的Style都是一樣的，因此我們可以把它們拿出來放到一個USS中方便管理

1. 在StyleSheet選擇 + > Create New USS
   
2. 儲存為MainView.uss
   
3. 點擊新建的MainView.uss，並在右側的Inspertor中Selector輸入框中輸入.border，之後在點擊Create New USS Selector
   
4. 接著你可以在左側的StyleSheet中看到剛剛建立的.borderclass
   
5. 點擊.borderclass後，在右側的Inspertor，將Border > Color設為#311A11
   
6. 將它的Border > Width設為2pixels，Radius設為15pixels
7. 將這個.borderclass拖動到角色詳細訊息 Container與角色詳細訊息框的VisualElement
   
8. 點選角色詳細訊息 Container與角色詳細訊息框的VisualElement，在右側的Inspertor中找到Border，並對Border按下滑鼠右鍵，會跳出一個選單，選擇Unset將Border的inline style清除。
   

建立角色詳細訊息框前景

1. 在角色詳細訊息框背景的VisualElement加入一個VisualElement並將它命名為CharacterPortrait
   
2. 設定它的Flex > Grow為1，這樣它裡面的圖片就可以充滿整個可用空間。
3. 設定它的Background > Scale Mode為scale-to-fit，這樣它的圖片就可以充滿element size，並且保持適當的長寬比(aspect ratio)
   

建立角色詳細訊息Labels

1. 在角色詳細訊息框背景的VisualElement加入兩個Labels，並分別命名為CharacterName與CharacterClass
   
2. 選擇#CharacterName，將它的Text > Font Style改為B；Text > Size改為18 pixels
   
3. 在Attributes > Text中可以更改顯示的字串
   

最後你的UI看起來會長這樣

Reference: https://docs.unity3d.com/Manual/UIB-getting-started.html

---

上一篇：UI Builder - 1 （UI Builder介面簡介）

下一篇：UI Builder - 3 （使用C# Script操控UI)