Unity – Ugui 元件介紹 (二)

接上篇介紹了 版面元件,內容元件後。繼續介紹功能元件。

功能元件 – Button, Toggle, Slider & Scorllbar, Dropdown, InputField

Button
按鈕組件則組合了圖像和文字的元件外,就是按鈕本身必備的Button元件。

屬性功能描述
Interactable該組件是否作用
Transition控件對用戶操作進行可視化響應,改變顏色或圖案
Navigation確定控件序列的屬性
On Click當用戶單擊按鈕並釋放按鈕時調用UnityEvent

Toggle
切換按鈕或複選框,可以配合ToggleGroup使用,讓群組的選項一次只能啟動一個。

屬性功能描述
Interactable該組件是否作用
Transition控件對用戶操作進行可視化響應,改變顏色或圖案
Navigation確定控件序列的屬性
Is On開關是否預設開啟
Toggle Transition切換值在更改時以圖形方式反應的方式
Graphic用於選中標記的圖像
Group切換群組間的選項(如果有的話)
On Value Changed值產生變化時觸發事件

Slider
主要用於形象的拖動以改變目標值的控制元件,他的應用是用來改變一個數值,最大值和最小值自定義,拖動滑塊可在此之間改變,例如改變聲音大小。

屬性功能描述
Handle Rect當前值處於最小值與最大值之間比例的顯示範圍,也就是整個滑條的最大可控制範圍
Direction滑動條的方向,從左至右,從上至下還是其他的。
Left To Right 從左到右 
Right To Left 從右到左 
Bottom To Top 從下到上 
Top To Bottom 從上到下
Min Value滑動條的可變化最小值
Max Value動條的可變化最大值
Whole Numbers勾選此項,拖動滑動條將按整型數(最小為1)進行改變指定值
Value當前滑動條對應的值
On Value Changed值改變時觸發訊息

Scrollbar
是一個主要用於形象的拖動以改變目標比例的控制元件,他的應用是用來改變一個整體值變為他的指定百分比例,最大值1(100%),最小值0(0%),拖動滑塊可在此之間改變,例如改變滾動視野的顯示區域。

屬性功能描述
Handle Rect當前值處於最小值與最大值之間比例的顯示範圍,也就是整個滑條的最大可控制範圍
Direction滾動條的方向,從左至右,從上至下還是其他的
Value當前滾動條對應的值
Numbers Of Steps滾動條可滾動的位置數目,為0和1時不生效(事實上只有0個可滾動位置或1個可滾動位置那還叫滾動條嗎),例如設為2,則拖動滾動條時滾動條只會處在最小值的位置和最大值的位置,因為他的可滾動位置只有2個,例如設為3,則拖動滾動條時滾動條只會處在最小值的位置、最大值的位置以及中間位置,因為他的可滾動位置只有3個。
On Value Changed值改變時觸發訊息

Dropdown
設定下拉的選項內容,Options可以透過+號新增,還有選項改變時要執行的事件。

屬性功能描述
NavigationNone:無
Horizo​​ntal:水平
Vertical:垂直
Automatic:自動
Explicit:顯式
Select On Up:向上選擇
Select On Down:向下選擇
Select On Left:向左選擇
Select On Right:向右選擇
Visualize:可視化,把按鍵能夠導航到的路徑可視化,高亮的黃色箭頭為當前按鈕可導航到的目標
Template下拉使用的模板樣式
Caption Text當前選擇的顯示文本
Caption Image當前選擇的顯示圖片
Item Text下拉框選項模板裡的文字,不填會導致選項列表中的每個選項不會修改模板裡的文字
Item Image下拉框選項模板裡的圖片,不填會導致選項列表中的每個選項不會修改模板裡的圖片
Value當前選擇的值(0開始)
Options可選擇項
On Value Changed(Int32)值調整時觸發的事件

InputField
提供了輸入文字的框架,可以用值改變時或結束編輯兩個條件觸發事件,結構下有兩個Text組件分別負責提示文字和實際輸入的文字,對應欄位是Placeholder和Text Component。

主要的元件大致上就是這些,之後再針對各元件的應用逐一介紹。

參考網址
Visual Components
https://docs.unity3d.com/Manual/comp-UIVisual.html

Interaction Components
https://docs.unity3d.com/Manual/comp-UIInteraction.html

發佈留言

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