
Toggle(開關)是Unity中UGUI裡面的一個組件。一般用於做單選開關。這篇介紹如何利用Toggle這個組件在自帶事件的方式來改變顯示和隱藏,做出一個Toggle Switch。
首先設定好場景後,在Canvas下按右鍵,選擇UI下面的Image元件,更名為Toggle Switch。

Toggle Switch裡面新增一個圖片,作為這個底圖。 接著在Toggle Switch下面新增一個Image。更名為Switch ON。

在Switch On的Inspector裡面新增圖形後,按下Add Component裡新增一個Toggle (Script)的Component。在這個Toggle (Script)裡先做好做好Highlighted Color跟Pressed Color的顏色設定。


從事件中可以看出來:當單擊On的時候。
設置:On隱藏,顯示Off,同樣的Off也設定同意的事件。


然後我們Duplicate這個Switch On,更名為Switch Off。做法跟Switch On一樣。修改Toggle裡的事件設定。
呈現效果如下: