Unity-Ugui-如何製作出Toggle 選單 Toggle (Script) & Toggle Group (二)

這篇介紹如何利用Toggle這個組件做兩種類型的選單。一種是Check Box,另外一種是Radio Button這兩種選單。

如何製作Check box 選單

建立好場景後,在Canvas下按右鍵點選CreateEmpty元件。變更名為Checkbox,調整好大小範圍。
另外在從Component下增加3個Toggle組件。

在Checkbox的Inspector裡新增Toggle Group (Script) 這個組件。
主要是可以控制下面3個Toggle組件。

在Checkbox下加入組件。

接下來在每個Toggle下面有Background跟Label這兩個Folder。

Toggle:空物體,帶Toggle組件。
Background:圖片,用作選擇框底圖。
Checkmark:圖片,用作選擇標記,即對勾。
Label:文本,用於文字說明。

先到Toggle下面的Background裡面去更改背景顏色。

更改顏色

在Checkmark下面的Image Source裡加入圖形。

匯入圖型

在Label下面的新增文字跟調整字型大小,顏色及字體。這三個Folder調整好後,回到Toggle這個目錄。

更改文字內容

回到Toggle這裡的Inspector。
這邊把In On勾選起來。(通過Is On屬性來控制是否選中,其實是控制Graphic屬性中的顯示和隱藏,)
Toggle Transition:Fade
Graphic:指定為Checkmark
Group:指定為Checkbox

Toggle 設定

呈現效果如下:

如何製作Radio Button選單

首先複製剛剛做好了Checkbox Folder,更名為Radiobutton。
更換Toggle 下面Background跟Checkmark裡面的圖形。
更改Label的文字。接下來回到Toggle的Inspector裡,來修改Highlighted Color。
儲存之後按下Play鍵。

呈現效果如下:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *