UGUI的核心內容

一、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~~~~

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章