Unity - 使用內建ToggleGroup來製作簡易面板切換(Using build-in toggle group to create simple panel switch)

　　ＵＩ面板切換，算是一個會需要用到的功能，基本上就是製作了幾個面板資料，按了按鈕切換到對應的面板顯示，此時要把其他不相關的面板暫時關閉。

　　舉例來說，我製作了三個面板，對應了三個按鈕Tab1、Tab2、Tab3，面板當中各自有各自的資料，按下Tab2的時候要把Tab3的物件關閉，不然會因為前後順序的關係會擋住Tab2的面板。

　　這邊的重點就是不管我按了哪一個Tab，都要把前一個開啟的Panel關閉，然後打開我按下Tab所屬的Panel，這個功能剛好可以使用Unity內建的UI物件ToggleGroup來做到。

　　ＰＳ：這邊用兩個ToggleGroup單純是因為遇到有人分兩個部分在做，所以這邊也就說明使用兩個ToggleGroup的方式，不然的話只要上面那個Tab的ToggleGroup就夠了，都在Tab的Toggle OnValueChanged裡面去把Panel跟其他物件SetActive，也比較省事。

---

　　實作測試(WebGL build)  ，滑鼠點選Tab切換面板。

---

１、製作Tab Group

　　先來製作一個簡單的底板，以及標籤群組。

　　首先紅色箭頭用一張Image拉一個簡單的底圖，也可以不用這個部分，這邊只是用來簡單做個顯示而已。



　　接著橘色的箭頭，建立一個物件來做為群組的Parent，給它加上一個ToggleGroup的Component，放置在適當的位置（如果底下的Tab物件都是用相對的Anchor位置跟大小，就會跟著這個Parent移動或縮放，就會需要調整）。

　　這個ToggleGroup的Allow Switch Off不勾選，是因為這邊假設面板至少都會有一個是顯示的，只能切換無法關閉。



　　最後綠色的箭頭，在ToggleGroup物件下面製作三個做為Tab的物件，這邊簡單的只使用一張Image來製作，並且把Toggle裡面的Transition都關閉，這邊都不使用這些功能，視自己的需求去設定。

　　把三個Toggle物件裡面的Group設定為有ToggleGroup的物件，也就是剛剛做的那個Parent物件，把Tab1的IsOn勾選，其他的關閉，讓Tab1一開始是選擇的狀態。

---

２、製作Panel Group

　　接著來製作要顯示的面板群組。

　　首先紅色箭頭製作一個空的群組Parent物件，給它加上ToggleGroup的Component，一樣如果內部Child的Panel會跟Parent去設定相對的Anchor位置或大小，那麼這個物件就需要調整到適當的大小跟位置。

　　注意這邊ToggleGroup裡面的Allow Switch Off需要勾選。



　　接著橘色的箭頭，在ParentGroup下製做一個Panel物件，給它加上Toggle Component，要注意的是這邊所有的Toggle上面的Interactable都要取消勾選，由Tab那邊的Toggle來做為主要的呼叫。

　　然後這邊三個Toggle物件裡面的Group設定為這邊的Parent(ToggleGroup)物件，一樣把第一個isOn勾選，其他關閉。



　　最後綠色箭頭，這邊另外製作一個Tab的圖片跟文字，然後在Panel上面稍稍遮住一點框線，因為Toggle物件只能做圖片的切換，非圖片或多個物件組合的東西就不適合，因此這邊另外製作一個組合物件做為Toggle On的狀態。

---

３、設定連動Event

　　主要的ToggleGroup也就是Tab這邊的，而Panel所屬的ToggleGroup則是跟著Tab一起動作，因此會把所有Panel的Toggle設定無法互動，由Tab上的Toggle去呼叫Panel的Toggle。

　　Tab1的Toggle裡面，在OnValueChanged新增一個事件，把目標GameObject設定為Panel1，接著設定呼叫的方法選擇Toggle->Dynamic裡面的isOn。

　　Tab2跟Tab3也做同樣的設定，GameObject設定到對應的Panel2跟Panel3，呼叫的方法都是Toggle->Dynamic裡的isOn。



　　接著設定Panel上的Toggle事件。

　　記得把Interactable取消勾選，然後在OnValueChanged裡面新增兩個事件，一個設定Panel自己本身，一個設定做為Toggle On的TabImage物件。

　　這兩個事件呼叫的方法都是選擇GameObject->Dynamic裡面的 SetActive。

　　然後把Panel2跟Panel3也做相同的設定步驟，到這邊為止

---

４、巢狀群組

　　製作巢狀的群組也是可以的，就如同實作測試DEMO裡面的Tab3，我在Panel3裡面再建立了一個跟外圈相同的ToggleGroup連動方式，這樣子Panel3裡面也有一個使用ToggleGroup的切換面板。

　　相同的製作步驟這邊就不重複說明了。

---

５、結語

　　這樣子就完成了，使用內建的UI Toggle物件來做到切換面板，也不用額外製作Script來關閉其他面板等等事情，也可以減少一點Script。

　　而如果要面板切換的時候更新，或呼叫或啟動其他東西，也都可以在Panel物件Toggle的OnValueChanged裡面去呼叫，這邊為了讓點選的Tab圖片浮在Panel上遮住一部分框線，所以把它分開另外一個物件，並放在Panel的Toggle OnValueChanged裡面呼叫顯示，而不使用Tab的Toggle切換圖片的功能。　　

　　如果有任何錯誤歡迎提出。