使用Image Button 按鈕觸發來開啟跟關閉Dropdown Menu。彈跳下拉式選單是運用Unity Ugui 提供的Dropdown UI Component跟彈跳視窗(C Sharp Script)做結合。


首先建立一個Panel名為SettingDropdown。然後在這下面建立一個Image的物件叫PanelSettings作為Image Button。

在PanelSettings建立一個Image Panel然後按右鍵把Dropdown 這個物件帶入。
Dropdown下面的Template子物件記得要到Inspector 勾選取消。主要是因為按下Label時才會把Content呼叫出來。
有關Dropdown的部分請參考 Unity-Ugui-如何製作出下拉式選單Dropdown Menu。


回到PanelSettings的Inspector裡
設定Button Highlighted Color。
為了要讓Image Button按鈕產生開啟關閉的功能這邊要產生一個Script。所以到Asset下面的Script Folder裡新增一個C Sharp Script。名為DropdownOpener.cs。

新增後在DropdownOpener.cs點兩下進入編譯程式的畫面,編寫一段程式。主要是呼叫Panel這個物件。

回到PanelSettings的Inspector裡設定事件。

新增Dropdown Opener (Script)下面有個Panel的欄位,把寫好的Dropdown Opener.cs這個Script拖曳到Script裡。在Panel插槽指定為Panel這個物件。

呈現效果如下: