##1、UGUI概述

++1.1、Unity界面發(fā)展史

++++【老版本界面onGUI】=>【GUI插件NGUI】=>【新版本界面UGUI】

++1.2、UGUI特點

++++新的UI系統(tǒng)是從Unity4.6開始被集成到Unity編譯器中的。Unity官方給這個新的UI系統(tǒng)賦予的標簽是：靈活，快速和可視化。

++++對于開發(fā)者而言，就是有三個優(yōu)點：效率高效果好，易于使用和擴展以及與Unity的兼容性高。

++++新的UGUI系統(tǒng)具有以下特點：

--1、引擎內(nèi)置，結(jié)合更加緊密。

--2、運行穩(wěn)定，操作方便。

++1.3、UGUI優(yōu)點

++++UGUI與老版本onGUI相比：

--1、獨立的坐標體系；

--2、全新的事件機制；

--3、更佳高效率的運轉(zhuǎn)效率。

++++UGUI與GUI插件NGUI相比：

--1、由NGUI創(chuàng)始人參與開發(fā)；

--2、與Unity結(jié)合更加密切；

--3、自適應系統(tǒng)更加完善；

--4、更方便的深度處理；

--5、省去Altas，直接使用Sprite Packer；

##2、UGUI畫布

++2.1、創(chuàng)建UGUI控件

++++第一種： 在Hierarchy當中通過 右鍵=>UI，找到相應的UI控件。

++++第二種：通過工具欄【GameObject】=>【UI】，找到相應的UI控件。

++2.2、Canvas畫布

++++當我們?nèi)我鈩?chuàng)建一個UI控件的時候可以看到在層級視圖當中不但生成我們創(chuàng)建的控件，還會同時創(chuàng)建一個Canvas和EventSystem。

++++Canvas是畫布，是所有UI控件的根類，也可以看作所有UI控件的父物體，所有UI控件都必須在Canvas上面繪制。它是一個帶有Canvas組件的游戲物體EventSystem事件系統(tǒng)，負責監(jiān)聽用戶的輸入。

++++創(chuàng)建UI控件時，當層級視圖當中沒有Canvas和EventSystem系統(tǒng)會幫我們自動創(chuàng)建。

++2.3、總結(jié)

++++1、UGUI畫布也稱為Canvas，UGUI是所有控件的父類。

++++2、所有UGUI控件都必須繪制在畫布上面。

++++3、當創(chuàng)建UGUI控件，工程當中沒有Canvas的時候會自動創(chuàng)建Canvas與EventSystem。

##3、UGUI基礎(chǔ)控件

++3.1、Text

++++Text控件是用來顯示文本的文本控件，選中Text可以查看屬性：

--Text ：創(chuàng)建控件時顯示的文字

--Character：

  --Font ：字體

  --Font Style ：字體格式：黑體/斜體

  --Font Size ：字體大小

  --Line Spacing ：行間距

  --Rich Text ：富文本

--Paragraph：

  --Alignment ：對其方式

  --Horizontal Overflow ：水平溢出

  --Vertical Overflow ：垂直溢出

++++Text的屬性可以在Inspector當中通過Text組件進行設(shè)置，也可以在代碼當中進行動態(tài)設(shè)置。給Canvas掛載腳本 UGUISetting.cs

示例：

Text text;

void Start(){

    text = GameObject.Find(“Text”).GetComponent<Text>();

    text.text = “立鉆哥哥”;

    text.alignment = TextAnchor.MiddleCenter;

    text.fontSize = 20;

    text.fontStyle = FontStyle.BoldAndItalic;  //字體樣式

    text.color = Color.red;

}

++3.2、Image

++++Image控件主要是用來顯示圖片，顯示圖片的格式是Sprite，具體屬性如下：

--Source Image ：Image顯示的圖片，圖片格式為Sprite

--Color ：顏色。

--Material ：材質(zhì)。

--Preserve Aspect ：圖像寬高是否按原始比例。

--Set Native Size ：將Image大小設(shè)置為圖片默認大小。

++++當我們給Image選擇一張貼圖之后會出現(xiàn)Image Type選項，如下圖。ImageType總共有四種選項：

--simple ：顯示單個會拉伸；

--Tilled ：平鋪顯示，圖片按照原始顯示；

--Sliced ：按照九宮格顯示，拉伸區(qū)域只會在九宮格中間；

--Filled ：填充顯示，可以根據(jù)不同的填充方式模擬技能冷卻的效果。

++++Image Type的Filled填充模式?？梢杂脕碇谱餮獥l，冷卻技能等。

++++示例：如何使用程序控制圖片填充顯示： 當按鍵A按下的時候Image控件180度填充顯示。

--在Start方法中獲取Image控件，設(shè)置填充模式為180度填充：

void Start(){

    image = GameObject.Find(“Image”).GetComponent<Image>();

    image.fillMethod = Image.FillMethod.Radial180;

}

--在Update方法中判斷當按鍵A按下的時候讓圖片180度填充：

bool isFilled = true;

void Update(){

    if(Input.GetKeyDown(KeyCode.A)){

        isFilled = false;

    }

    if(! isFilled){

        image.fillAmount += Time.deltaTime;

        if(image.fillAmount >= 1){

            image.fillAmount = 1;

            isFilled = true;

        }

     }

}

++3.3、RawImage

++++RawImage同樣是用來顯示圖片的控件，跟Image控件的差別就是Image顯示圖片的格式為Sprite，RawImage顯示圖片的格式為Texture，此外RawImage可以控制行列。

--Raw Image(Script)

  --Texture ：導入的圖片樣式

  --UV Rect：紋理貼圖坐標，w和h

++3.4、Button

++++Button控件，包含的Text控件用于顯示按鈕的文本。

++++當某個UGUI控件添加了Button組件便擁有了按鈕點擊的功能。

++++Button組件：

--Interactable ：是否可以交互。

--Transition ：按鈕的過渡效果。

--按鈕在不同狀態(tài)的顏色：

  --Normal Color

  --Highlighted Color

  --Pressed Color

  --Disabled Color

  --Color Multiplier

--Navigation ：控件間導航。

--On Click() ：給按鈕添加響應事件。

++++Transition用于設(shè)置按鈕在不同狀態(tài)間的過渡效果，總共有四種方式：

--（1）None ：無過渡效果

--（2）Color Tint ：設(shè)置不同狀態(tài)不同顏色來過渡。

--（3）Sprite Swap ：設(shè)置不同圖片來過渡不同狀態(tài)。

--（4）Animation ：設(shè)置不同動畫過渡不同狀態(tài)。

++++給按鈕添加監(jiān)聽事件：

Button btn;

void Start(){

    //獲取到按鈕

    btn = GameObject.Find(“Button”).GetComponent<Button>();

    //給按鈕添加監(jiān)聽事件

    btn.onClick.AddListener(BtnClick);

}

void BtnClick(){

    //按鈕響應事件

    Debug.Log(“btn.onClick.AddListener()”);

}

++3.5、Slider

++++給滑動條Slider添加監(jiān)聽事件。

示例：

Slider slider;

void Start(){

    //獲取到Slider組件

    slider = GameObject.Find(“Slider”).GetComponent<Slider>();

    //添加監(jiān)聽事件

    slider.onValueChanged.AddListener(SliderValueChange);

}

//事件響應

public void SliderValueChange(float value){

    Debug.Log(“value = ” + value);

}

++3.6、ScrollBar

++++滾動條ScrollBar，Scrollbar層級視圖當中包含了滑塊Handle。

++++Scrollbar屬性：

--Handle Rect ：滑動區(qū)域。

--Direction ：滑動方向。

--Value ：滑塊當前值。

--Size ：滑塊大小。

--Number Of Steps ：可滑動區(qū)域分為幾步。

--On Value Changed(Single) ：滑塊響應事件。

++3.7、Toggle

++++Toggle為單選框，可以用來創(chuàng)建開關(guān)按鈕。如下圖，層次視圖當中包含了顯示背景的Background和顯示文本的Label。

++++Toggle屬性如下，其中Group表示當前選中框是否屬于某一組選中框，若是的話則所有選中框只能選中一個。

--Is On ：交互是否開啟。

--Toggle Transition ：狀態(tài)改變過渡效果設(shè)置。

--Graphic ：選中或取消要顯示或隱藏的文本或圖片。

--Group ：當前選中框是否屬于某個組。

--On Value Changed(Boolean) ：事件響應。

++++給Toggle添加監(jiān)聽事件

示例：

Toggle toggle;

void Start(){

    toggle = GetComponent<Toggle>();  //獲取Toggle組件

    //給Slider組件添加監(jiān)聽事件

    toggle.onValueChanged.AddListener(ToggleAction);

}

void ToggleAction(bool isOn){

    print(isOn);

}

++3.8、InputField

++++InputField創(chuàng)建出來如下圖，InputField層級視圖當中包含Placeholder與Text，

--Placeholder 用于顯示占位符，即輸入框沒有輸入文本時顯示的文本，例如下圖的“Enter text”；

--Text 用于顯示輸入的內(nèi)容。

++++輸入框Inputield的具體屬性：

--Text ：初始文本顯示的內(nèi)容

--Character Limit ：字符數(shù)量限制。

--Content Type ：文本類型。

--Line Type ：文本單行顯示還是多行。

--Caret Blink Rate ：光標閃動頻率。

--Caret Width ：光標的寬度。

--Custom Caret Color ：自定義光標的顏色。

--Selection Color ：選中文本時的顏色。

--On Value Changed(String) ：文本編輯時觸發(fā)的事件。

--On End Edit(string) ：結(jié)束編輯的時候觸發(fā)的事件。

++++給InputField添加監(jiān)聽事件

示例：

InputField inputField;

void Start(){

    //獲取輸入框

    inputField = GameObject.Find(“InputField”).GetComponent<InputField>();

    inputField.onEndEdit.AddListener(InputFieldEndEdit);

}

void InputFieldEndEdit(string text){

    print(“文本框當中的文本：” + text);

}

++3.9、Panel

++++Panel ：面板，功能相當于控制的容器，里面可以存放其他控件。

--作用： 使用Panel控件可以整體移動和處理一組控件。

--設(shè)計規(guī)范： 一個功能完備的UI界面往往會使用多個Panel控件。

++++示例： 將資源商店當中的所有分類放在單獨一塊Panel當中。

##4、RectTransform

++4.1、RectTransform

++++RectTransform的作用用來計算UI的位置和大小，RectTransform繼承于Transform，具有Transform的所有特征，通過RectTransform能夠?qū)崿F(xiàn)基本的布局和層次控制。

++++RectTransform當中專有名字：

--Pos X, Pos Y ：Pivot與Anchor的距離

--Pivot ：中軸，中心點

--Anchor ：錨點

--Width&Height ：寬與高，相對于錨點

--Left, Right, Top, Bottom ：左右上下

++4.2、中心點Pivot

++++按下T鍵選中某一個UI控件即可看到UI控件的中心點，中心點也叫中心軸，當鼠標拖動UI控件進行旋轉(zhuǎn)的時候會圍繞中心點旋轉(zhuǎn)。

--中心點是矩形的一部分。

--0對應左下角，1對應右上角。

++4.3、錨點Anchor

++++如圖所示，箭頭所指即為錨點，錨點表示的是相對于父級矩形的子矩形區(qū)域。

++++如圖所示，錨點為四邊形，錨點有多種擺放方式，可以為矩形，點狀或是為線狀。

++++錨點移動范圍僅限于父級視圖當中。

++4.4、錨點的四種擺放方式

--錨點呈點狀

--錨點與組件本身重合

--錨點跟父物體重合

--錨點呈線狀

++++（1）錨點呈點狀： 當UI的錨點為中心點時，不管父控件的大小怎么改變，UI距離錨點的位置固定，大小固定，此時RectTransform(Pos X, Pos Y, Width, Height)，其中Pos X與Pos Y分別表示UI中心點到錨點的水平與方向距離。Width與Height是UI的大小。

++++（2）錨點與組件本身重合： 當UI的錨點為四方形或者與UI本身大小相同的時候，UI的大小與父控件的大小變換成正比，此時RectTransform(Left, Top, Right, Botton)，分別為錨點左，上，右，底 距離UI對應邊的距離。

++++（3）錨點跟父物體重合： 當UI控件的錨點與父物體重合的時候，不管父物體怎么變化，UI控件四條邊相對于錨點四條邊的距離保持不變。

++++（4）錨點呈線狀：

--當UI控件的錨點呈線狀并為豎直方向時，則UI控件豎直方向的大小與父物體豎直方向的大小成正比，水平方向大小不變。

--當錨點呈線狀并且為水平方向時，則水平方向大小與父物體水平方向的大小成正比，豎直方向大小不變。

--_--VRunSoft : lovezuanzuan--_--