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

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


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

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

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




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






1、製作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一開始是選擇的狀態





2、製作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的狀態。





3、設定連動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也做相同的設定步驟,到這邊為止





4、巢狀群組

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


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





5、結語

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

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

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

No comments:

Post a Comment