UGUI核心元素、基本控件、復合控件和高級控件


UGUI的核心元素:

 Anchor(錨點):每個控件都有一個Anchor屬性,控件的4個頂點,分別與Anchor的4個點保持不變的距離,不受屏幕分辨率變化的影響。

                      系統默認設置控件的Anchor位置在其父物體的中心處,且不能離開父物體的范圍。

                      將Anchor設置在父物體的左側,可以實現左對齊的效果。

                      將Anchor設置在父物體的4個頂點上,子物體將隨父物體同步縮放。

Pivot(軸):控件的中心點(或稱為軸),控件圍繞Pivot發生旋轉(若想控件圍繞某個頂點旋轉,改變Pivot位置即可)

              Rec Transform中的PosX、PosY、PosZ指的是Pivot與Anchor間的相對位置

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM