一、UGUI的核心元素:
Anchor(錨點):
每個控件都有一個Anchor屬性,控件的4個頂點,分別與Anchor的4個點保持不變的距離,不受屏幕分辨率變化的影響。
系統默認設置控件的Anchor位置在其父物體的中心處,且不能離開父物體的範圍。
將Anchor設置在父物體的左側,可以實現左對齊的效果。
將Anchor設置在父物體的4個頂點上,子物體將隨父物體同步縮放。
Pivot(軸):
控件的中心點(或稱爲軸),控件圍繞Pivot發生旋轉(若想控件圍繞某個頂點旋轉,改變Pivot位置即可)
注意區別:
對象的Transform 的position爲世界座標。
對象的 Transform的 localPosition爲當前對象軸心點與父UI對象軸心點的相對位置
對象的RectTransform繼承自 Transform,編輯器中顯示的PosX、PosY、PosZ指的是Pivot與Anchor間的相對位置,叫做anchoredPosition3D
RectTransform 矩形變換
class in UnityEngine/Inherits from: Transform
Variables 變量
anchoredPosition | The position of the pivot of this RectTransform relative to the anchor reference point. 該矩形變換相對於錨點參考點的中心點位置。 |
anchoredPosition3D | The 3D position of the pivot of this RectTransform relative to the anchor reference point. 該矩陣變換相對於錨點參考點的中心點的3D位置。 |
anchorMax | The normalized position in the parent RectTransform that the upper right corner is anchored to. 該錨點在父矩陣變換中歸一化位置,右上角是錨點。 |
anchorMin | The normalized position in the parent RectTransform that the lower left corner is anchored to. 在父矩陣變換上歸一化位置,該錨點在左下角。 |
offsetMax | The offset of the upper right corner of the rectangle relative to the upper right anchor. 矩形右上角相對於右上角錨點的偏移量。 |
offsetMin | The offset of the lower left corner of the rectangle relative to the lower left anchor. 矩形左下角相對於左下角錨點的偏移量。 |
pivot | The normalized position in this RectTransform that it rotates around. 在該矩陣變換的歸一化位置,圍繞該中心點旋轉。 |
rect | The calculated rectangle in the local space of the Transform. 計算矩形自身空間的變換。 |
sizeDelta | The size of this RectTransform relative to the distances between the anchors. 矩陣變換的大小相對於錨點之間的距離。 |
Public Functions 公共函數
GetLocalCorners | Get the corners of the calculated rectangle in the local space of its Transform. 在該變換的本地空間中獲取計算的矩形的折角的本地座標。 |
GetWorldCorners | Get the corners of the calculated rectangle in world space. 獲取世界空間中矩形計算的折角。 |
SetInsetAndSizeFromParentEdge | Set the distance of this rectangle relative to a specified edge of the parent rectangle, while also setting its size. 設置父矩形的指定邊緣的相對於該矩形的距離,當然也設置它的大小。 |
SetSizeWithCurrentAnchors | Makes the RectTransform calculated rect be a given size on the specified axis. 使矩形變換計算矩形在指定座標軸上是給定大小。 |
Delegates 委託
ReapplyDrivenProperties | Delegate used for the reapplyDrivenProperties event. 委託用於reapplyDrivenProperties事件。 |
RectTransformUtility 矩陣變換工具
class in UnityEngine
Description 描述
Utility class containing helper methods for working with RectTransform.
矩陣變換工作的工具類包含幫助方法。
Static Functions 靜態函數
FlipLayoutAxes | Flips the horizontal and vertical axes of the RectTransform size and alignment, and optionally its children as well. 翻轉水平軸和垂直軸的 RectTransform 大小和對齊方式,並且選擇性的子物體也一樣。 |
FlipLayoutOnAxis | Flips the alignment of the RectTransform along the horizontal or vertical axis, and optionally its children as well. 沿着水平或者垂直軸翻轉對齊的矩形變換,並且它的子物體也是可選擇的。 |
PixelAdjustPoint | Convert a given point in screen space into a pixel correct point. 將屏幕空間中給定的點轉換成正確像素點。 |
PixelAdjustRect | Given a rect transform, return the corner points in pixel accurate coordinates. 指定矩形變換,返回角點的精確座標單位像素。 |
RectangleContainsScreenPoint | Does the RectTransform contain the screen point as seen from the given camera? 從指定攝像機中觀看該矩形變換是否包含屏幕點? |
ScreenPointToLocalPointInRectangle | Transform a screen space point to a position in the local space of a RectTransform that is on the plane of its rectangle. 屏幕空間點轉換爲矩形變換內部的本地位置,該點在它的矩形平面上。 |
ScreenPointToWorldPointInRectangle | Transform a screen space point to a position in world space that is on the plane of the given RectTransform. 屏幕空間點轉換爲世界空間點,該點在矩形變換的平面上。 |
二、UGUI的基本控件:
Canvas(畫布):所有UI控件必須在Canvas上面繪製,也可以看做所有UI控件的父物體。
Panel(面板):主要的功能就是一個容器,可以放置其他控件,使其進行整體移動、旋轉、縮放等。一個功能完備的UI界面,往往會使用多個Panel容器,甚至使用Panel嵌套。
Text(文本):富文本功能類似HTML中的標籤。
Image(圖像):圖像源爲2D Sprite格式。等比例調節圖像大小,需要按住Shift鍵進行調節。Image Type的Sliced選項,需要對Sprite進行“九宮格”處理。
Raw Image(原始圖像):圖像源爲Texture格式。
最後補充一個基本組件:
Mask(遮罩):遮罩並不是GUI的控件。它以父物體的範圍約束子物體的顯示,如果子物體過大,將只顯示在父物體中的一部分。
三、UGUI的複合控件:
Button(按鈕):由兩個控件組成:1.添加了Button組件的Image控件,2.Text控件。Image控件是Text控件的父對象。
鑑於UGUI的高度自由,也可以理解爲添加了Button組件、Image組件的空對象和添加了Text組件的空對象。
通過Transition對按鈕的三態進行設置。
InputField(輸入框):由三個控件組成:1.添加了Input Field組件的Image控件,2.Text控件(用作顯示提示內容),3.Text控件(接收輸入內容)。Image控件是兩個Text控件的父對象。
Content Type對輸入的字符類型進行預處理功能。
Toggle(開關):即可以做單選框又可以做複選框,系統默認爲複選框。
由四個控件組成:1.添加了Toggle組件的空對象,2.Image控件(顯示狀態框的背景圖),3.Image控件(顯示當前狀態),4.Text控件(用作顯示選項內容)。
如何製作單選框:創建一個空對象,添加Toggle Group組件。在空對象下創建若干個Toggle控件,設置Group,並保持其中一個Toggle控件的Is On開關爲true,其餘爲false。
Slider(滑動條):由6個控件組成:1.添加了Slider組件的空對象,2.Image控件(顯示背景圖像),3.空對象(控制填充區域),4.Image控件(顯示填充圖像),5.空對象(控制滑塊移動區域),6.Image控件(顯示滑塊)
滑動條通過滑塊驅動,在minValue和maxValue區間運動,根據當前的Value值,不斷改變背景圖像和填充圖像的顯示範圍。
滑動條既可以用作音量控制等輸入控件,去掉滑塊後,也可以用作血量、進度等顯示控件。
ScrollBar(滾動條):由3個控件組成:1.添加了Scrollbar組件的Image對象,2.空對象(控制滑塊移動區域),3.Image控件(顯示滑塊)
滾動條與滑動條的原理類似,對比而言,滾動條背景色單一,數值範圍固定爲0到1,偏重於單步數值的設置
滾動條既可以用作垂直滾動文本(揹包),也可以用作水平滾動時間軸,還可以垂直+水平進行圖像的縮放。
四、UGUI的高級控件:
高級控件並不是UGUI直接提供的控件,需要自行組合,組合原理可以通過拆解複合控件學習。
Scroll Rect(滾動區域):在一個較小的區域顯示較多的內部控件的時候使用的一種機制
Scroll Rect(空對象,設置一定的區域範圍,作爲當前顯示的窗口,添加組件:Scroll Rect、Image、Mask)
Content(空對象,長度或寬度要大於Scroll Rect)
Scroll View若干個(根據需要,Image、Button控件隨意添加)
ScrollBar(滾動條控件)
在Scroll Rect組件中設置Content項和Scrollbar項即可
TabPage(選項卡):能夠在有限的空間中,放入更多的展示內容
TabPage(空對象)
ToggleGroup(空對象,添加Toggle Group組件)
Toggle若干個(根據需要,將Toggle設置爲單選框)
DisplayContent(Image,作爲背景圖。Toggle Group和DisplayContent可以根據需要進行垂直或水平佈局)
Page若干個(根據需要,數量需要與Toggle對應)
在Toggle的On Value Changed(Boolean)中設置對應Page的SetActive
總結:UGUI的功能很強大,DIY度相當高,雖然缺少了一部分功能,比如下拉框,樹視圖,列表視圖等,但是通過組件的搭配使用,完全可以自己做出來
附錄上個人這兩天的學習筆記,思維導圖確實是個好東西,學習ING~~~~