UGUI基本使用與佈局(三){各項UI元件}

每個UI元件都具備的元件就是RectTransform了,Transform表示空間中點座標,RectTransform表示的就是UI元素放置在矩形空間的位置。如果RectTransform的父元素也是RectTransform,那麼RectTransform子元素也可以設定如何對應於父層矩形定位和調整大小,但UI的零組件必須存在於Canvas底下,產生階層關係方能使用,我們可以透過GameObject選單>UI 在場景上新增UI的其他元件,接下來就看看有那些吧。

ugui

首先只要是UI組件都會有的元件

RectTransform

創建任意的UI組件後可以看到RectTransform的元件取代了一般遊戲物件的Transform。ugui-20170925005

Pos(X,Y,Z) 矩形的軸點相對於錨點的位置。
Width/Height 矩形的寬度和高度。
Left, Top, Right, Bottom 矩形邊緣相對於它們的錨點的位置。這可以被認為是由錨所定義的矩形內的間距。
Anchors 矩形的左下角和右上角的定位點。
        Min矩形左下角的錨點定義。0,0對應錨到父項的左下角,而1,1對應錨到父項的右上角。
        Max矩形右上角的定位點定。0,0對應錨到父項的左下角,而1,1對應錨到父項的右上角。
Pivot 矩形旋轉的樞軸點的位置,定義為矩形本身的大小的一部分。0,0對應於左下角,而1,1對應於右上角。
Rotation 物體繞樞軸點沿X、Y、Z軸的旋轉角度。
Scale 在X、Y、Z上應用的比例。

 

版面類組件

依照選單的分隔線劃分,版面框架組件除了先前講的Canvas外,還有Panel、ScrollView可以加到Canvas下做分層使用。

ugui-20181021001

Panel

Panel相當單純,就是圖層的概念,他只有一個Image在底下用來設定背景圖片或顏色,通常會把相關的UI放在這個組件底下做分類,重點在於它的Rect預設是滿版的。ugui-20181021002

我麼可以透過點選左上的圖示來改變,就可以用不同的方式設定對齊和尺寸。

ugui-20181021003

Scroll View

這個組件就複雜許多,通常是內容超出畫面大小時使用,他的子元件包括一個Viewport和兩個卷軸Scrollbar Horizontal、Scrollbar Vertical。ugui-20181021005

整體結構如下圖,Viewport底下的Content就是內容,它的大小會決定卷軸的狀態,也可以取消某一邊的卷軸。

ugui-20181021004

Scroll View上的ScrollRect有指定Content對象,看需不需要橫直軸的選項,和相關的參數。

ugui-20181021006

Content 要滾動的元素。
Horizontal 啟用水平滾動
Vertical 啟用垂直滾動
Movement Type 彈性或夾緊。使用Elastic或Clamped強制內容保持在Scroll Rect的邊界內。彈性模式在到達Scroll Rect邊緣時彈回內容
       Elasticity 彈性模式中使用的彈跳量。
Inertia 設置慣量時,拖動後釋放指針時內容將繼續移動。未設置慣性時,內容僅在拖動時移動。
       Deceleration Rate 設置慣量時,速率為0將立即停止運動。值為1表示運動永不減速。
Scroll Sensitivity 滾輪和的靈敏度。
Viewport 內容物的父級物件。
Horizontal Scrollbar 可選參考水平滾動條元素。
Vertical Scrollbar 可選參考垂直滾動條元素。
        Visibility 滾動條是否在不需要時自動隱藏。
         Spacing 滾動條和Viewport之間的空間。

 

內容組件

Text

Text元件,它提供了我們在畫面上顯示文字的功能。

ugui-20181021007

Text 顯示的文本內容。
Character
Font 顯示的文本字體。
Font Style 文本的樣式。選項為正常,粗體,斜體和粗體+斜體。
Font Size 文本字體大小。
Line Spacing 文本行之間的垂直距離。
Rich Text 文本中的標記元素是否被解釋為RichText樣式。
Paragraph
Alignment 文本的水平和垂直對齊。
Align by Geometry 使用字形幾何的範圍來執行水平對齊。
Horizontal Overflow 文本太寬而無法放入矩形的情況可以選擇Overflow。
Vertical Overflow 用於處理文本太高而不適合矩形的情況可以選擇Overflow
Best Fit 忽略尺寸屬性,試圖將文本放到控件的矩形極限值。
Color 設定文本的顏色。
Material 設定材質。

 

Image & RawImage

顯示圖像用的元件有兩種Image和RawImage,Image只允許使用Sprite格式,RawImage則可以接受多種不同影像。

ugui-20181021008

Source Image 表示顯示的圖像紋理(必須為Sprite)。
Color 要應用於圖像的顏色。
Material 用於渲染圖像的材質。
Raycast Target 射線是否可碰觸目標。
Preserve Aspect 確保圖像保持現有維度。
Set Native Size 按鈕將圖像框的尺寸設為紋理的原始像素尺寸。

ugui-20181021009

Texture 表示要顯示的圖像的紋理。
Color 要應用於圖像的顏色。
Material 用於渲染圖像的材質。
UV Rect 圖像在控制矩形內的偏移量和大小,範圍0.0到1.0。

 

功能型組件

Button

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

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

 

Toggle

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

ugui-20181021011

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

 

Slider & Scrollbar

也都有和之前幾個很類似的參數屬性設定顏色圖像設置,值改變時要觸發事件,或將值寫入。

ugui-20181021012

ugui-20181021013

 

Dropdown

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

ugui-20181021014

 

InputField

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

ugui-20181021015

 

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

 

Leave a Reply