【Unity】8.1 Unity內置的UI控件

分類：Unity、C#、VS2015

建立日期：2016-04-27

1、簡介

Unity 5.x內置了—套完整的GUI系統，提供了從佈局、控件到皮膚的—整套GUI解決方案，所以可直接利用它作出各類風格和樣式的GUI界面，而且擴展性很強（程序員能夠基於已有的控件建立出適合本身需求的控件）。

有兩種使用GUI的辦法，一種是直接將UI添加到層次視圖或者場景視圖中，而後經過GUI腳本去控制它；另外一種是直接經過GUI腳本去建立。

2、直接添加UI控件到場景中

下圖是Unity 5.3.4內置的UI控件，這些UI控件的用法和其餘遊戲對象（GameObject）的用法類似，可直接將其添加到場景或層次視圖中，並經過檢視器修改其參數：

例如，向場景中添加一個Text，並經過檢視器修改它的字體大小爲24，顏色爲紅色：

下面是在層次視圖中看到的結果：

也許下面的另外一個場景截圖更能讓你明白它的用法：

除了可將UI直接添加到場景中並在OnGUI()函數中經過腳本去控制它之外，還能夠在OnGUI()函數中經過腳本去控制。

再次提醒注意：

（1）GUI代碼須要在 OnGUI() 函數中控制，不能放在 Update() 函數中。

（2）GUI中的座標位置與Input.mousePosiotion的鼠標位置不一樣。在Unity GUI中，屏幕座標系以「左上角」爲原點(0,0)，「右下角」爲(screen.Wdth，screen.Height)。其中screen.Width爲屏幕寬度，screen.Height爲屏幕高度，以像素爲單位。而對於Input.mousePosition來講，它的屏幕「左下角」爲原點(0,0)，屏幕「右上角」爲(Screen.Width，Screen.Height)。

3、OnGUI()函數

UnityGUI 控件使用一種稱爲 OnGUI() 的特殊函數。只要啓用了包含的腳本，每幀都會自動調用OnGUI() 函數。

GUI 控件自己結構很簡單。例如，下面是「等級加載器」的示例代碼：

using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour
{
    void OnGUI ()
    {
        // 製做背景盒
        GUI.Box(new Rect(10,10,100,90), "Loader Menu");
        // 製做第一個按鈕。按下這個按鈕將執行 Application.Loadlevel (1)
        if(GUI.Button(new Rect(20,40,80,20), "Level 1"))
        {
            Application.LoadLevel(1);
        }
        // 製做第二個按鈕。
        if(GUI.Button(new Rect(20,70,80,20), "Level 2"))
        {
            Application.LoadLevel(2);
        }
    }
}

此示例是一個完整的功能性等級加載器。若是你將此腳本拖到遊戲對象 (GameObject) 上，則進入播放模式 (Play Mode) 時就會看到下面的菜單：

因爲 OnGUI() 代碼在每一幀都會被調用，所以你不須要明確建立或銷燬 GUI 控件。若是你須要在特定的時間顯示控件，可以使用任何一種腳本邏輯來操做，例如：

void OnGUI ()
{
    if (Time.time % 2 < 1)
    {
        if (GUI.Button (new Rect (10,10,200,20), "Meet the flashing button"))
    {
        print ("You clicked me!");
    }
}

此處，GUI.Button() 每隔一秒調用一次，所以此按鈕會出現而後消失。所以，若是按這樣的方式來實現，只有在按鈕可見時用戶才能單擊它。

聲明 GUI 控件時必需有三條關鍵信息：

控件類型（顯示的位置，顯示的內容）

其中：

控件類型：是經過調用 UnityGUI 類或 GUILayout 類中的一個函數來聲明的。

位置：這是 GUI 控件函數中的第一個參數。示例代碼中的Rect() 定義了四種屬性：最左端位置、最頂端位置、控件總寬度和控件總高度。全部這些值都是整數（與像素值對應）。

全部 UnityGUI 控件都在屏幕空間 (Screen Space)中運行，左上角爲（0，0），右下角爲最大座標值（Screen.width，Screen.height）。

再看一個例子：Rect(10, 20, 300, 100) 定義矩形 (Rectangle)，該矩形始於座標：10,20，結束於座標（310,120），即：（10+300，20+100）。

使用Screen.width 和 Screen.height 屬性可獲取屏幕空間的總尺寸。例如：

void OnGUI()
{
    GUI.Box (new Rect (0,0,100,50), "Top-left");
    GUI.Box (new Rect (Screen.width - 100,0,100,50), "Top-right");
    GUI.Box (new Rect (0,Screen.height - 50,100,50), "Bottom-left");
    GUI.Box (new Rect (Screen.width - 100,Screen.height - 50,100,50), "Bottom-right");
}

這段C#代碼的效果是：四個按鈕分別顯示在屏幕的四個角。

用於 GUI 控件的第二個參數是用控件顯示的實際內容，它既能夠是文本，也能夠是圖像。若是但願顯示圖像，先聲明一個二維紋理 (Texture2D)類型的公共變量，並將變量名稱做爲內容參數便可：

public Texture2D controlTexture;
void OnGUI ()
{
    GUI.Label (new Rect (0,0,100,50), controlTexture);
}

下面是更接近真實世界場景的代碼示例：

using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour
{
    public Texture2D icon;
    void OnGUI ()
    {
        if (GUI.Button (new Rect (10,10, 100, 50), icon))
        {
            print ("you clicked the icon");
        }
        if (GUI.Button (new Rect (10,70, 100, 20), "This is text"))
        {
            print ("you clicked the text button");
        }
    }
}

下面的C#代碼演示瞭如何同時顯示圖像和文本：

public Texture2D icon;
void OnGUI ()
{
    GUI.Box (new Rect (10,10,100,50), new GUIContent("This is text", icon));
}

下面的C#代碼演示瞭如何同時顯示文本和工具提示(Tooltip)。當鼠標在控件上方懸停時，Tooltip就會顯示在適當的位置：

void OnGUI () 
{
    // 該行向 GUI 工具提示輸入「This is the tooltip」
    GUI.Button (new Rect (10,10,100,20), new GUIContent ("Click me", "This is the tooltip"));
    // 該行讀取並顯示 GUI 工具提示的內容
    GUI.Label (new Rect (10,40,100,20), GUI.tooltip);
}

下面的C#代碼演示瞭如何同時顯示圖像、文本和工具提示(Tooltip)：

public Texture2D icon;
void OnGUI ()
{
    GUI.Button (new Rect (10,10,100,20), new GUIContent ("Click me", icon, "This is the tooltip"));
  GUI.Label (new Rect (10,40,100,20), GUI.tooltip);
}

當鼠標在控件上方懸停時，Tooltip的內容「This is the tooltip」就會顯示出來。

4、經過腳本建立UI控件

這裏僅介紹如何經過腳本去建立和使用UI控件。

一、Label

Label控件適合用來顯示文本信息或者圖片，它不會響應鼠標或鍵盤消息。

void OnGUI ()

{

GUI.Label (new Rect (25, 25, 100, 30), "這是Label");

}

二、Box

該控件可用來繪製帶有邊框背景的立方體或長方體文字或圖片。

GUI.Box(new Rect(0,0,Screen.width*0.5,Screen.height*0.5),"Hello");

三、Button、RepeatButton

該控件用來繪製晌應單擊事件的按鈕。

當有按鈕單擊事件發生時，Button函數返回true，不然返回false。所以，按鈕的事件處理腳本須要寫在控件代碼if語句條件爲true的代碼區域中。

using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour
{
    public Texture2D btnTexture;
    void OnGUI()
    {
        if(GUI.Button(new Rect(10,10,50,50),btnTexture))
        {
            Debug.Log("你單擊了圖片按鈕");
        }
        if (GUI.Button(new Rect(10, 10, 50, 50), "請點擊我！"))
        {
            Debug.Log("你單擊了文字按鈕");
        }
    }
}

Button控件在每次單擊事件中只響應一次，若是想處理鼠標左鍵長按的事件，可使用RepeatButton控件。

RepeatButton會在左鍵按下期間一直返回true。

四、TextField、PasswordField、TextArea

TextField：單行文本框

TextArea：多行文本框

PasswordField：密碼輸入框

遊戲中常常須要用到信息輸入的窗口，好比聊天窗、用戶信息的輸入等，這些狀況可使用TextField控件：

private string textFieldString = "text field";
void OnGUI()
{
    textFieldString = GUI.TextField(new Rect(25, 25, 100, 30), textFieldString);
}

TextArea控件與TextField的用法相似，區別就是TextField是單行的，TextArea能夠編輯多行文字：

private string textAreaString = "text area";
void OnGUI()
{
    textAreaString = GUI.TextArea(new Rect(25, 25, 100, 30), textAreaString);
}

PasswordField控件用於繪製密碼輸入框，常常用於用戶登陸界面中：

public string pwd="12345";
void OnGUI()
{
    pwd = GUI.PasswordField(new Rect(10, 10, 200, 20), pwd, '*');
}

五、Toggle

Toogle：複選框。至關於CheckBox。

Toogle控件通常用做開關，每次單擊Toogle都會在「開」和「關」之間切換。例如：

private bool toggleBool = true;
void OnGUI()
{
    toggleBool = GUI.Toggle(new Rect(25, 25, 100, 30), toggleBool, "Toggle");
    if(toggleBool == true){//……}
}

也能夠顯示一個圖片開關，其用法和Label相似。

六、ToolBar、SelectionGrid

ToolBar：單選按鈕工具欄。至關於在工具欄中顯示一組RadioButton。

SelectionGrid：多排工具欄 (Toolbar)。它能夠自動決定柵格中顯示的列數和行數。仍然是一次僅可激活一個「按鈕」(Button)。

ToolBar控件適用於繪製一組按鈕，在這些按鈕中同時只激活—個，能夠利用它來製做選項卡式的工具欄：

private int toolbarInt = 0;
private string[] toolbarStrings = { "Toolbar1", "Toolbar2", "Toolbar3" };
void OnGUI()
{
    toolbarInt = GUI.Toolbar(new Rect(25, 25, 250, 30), toolbarInt, toolbarStrings);
}

SelectionGrid經過一個整數可跟蹤「柵格選擇」(SelectionGrid) 中激活的「按鈕」(Button)。必須提供該整數做爲此函數的參數和返回值。提供的內容數組中的元素數目將決定「柵格選擇」(SelectionGrid) 中顯示的「按鈕」 (Button) 的數目：

private int selectionGridInt = 0;
private string[] selectionStrings = { "Grid 1", "Grid 2", "Grid 3", "Grid 4" };
void OnGUI()
{
    selectionGridInt = GUI.SelectionGrid(new Rect(25, 25, 300, 60), selectionGridInt, selectionStrings, 2);
}

七、HorizontalSlider、VertialSlider

滑動條（Slider）通常用於音量調整、進度顯示、數值調整的GUI界面中。

「滑動條」(Slider) 的當前位置以浮點數形式存儲。要顯示滑動條的當前位置，須要提供 該浮點數做爲函數的參數。另有兩個值用於肯定最小值和最大值。若是但願滑動條鈕是可調的，則將滑動條值浮點數指定爲「滑動條"(Slider) 函數的返回值。

在Unity中，Slider控件分爲水平和垂直2種佈局方式，對應的函數爲HorizontalSlider和VertialSlider。

下面是HorizontalSlider的基本用法：

private float hSliderValue = 0.0f;
void OnGUI()
{
   hSliderValue = GUI.HorizontalSlider(new Rect(25, 25, 100, 30), hSliderValue, 0.0f, 10.0f);
}

下面是VertialSlider的基本用法：

private float vSliderValue = 0.0f;
void OnGUI()
{
    vSliderValue = GUI.VerticalSlider(new Rect(25, 25, 100, 30), vSliderValue, 10.0f, 0.0f);
}

八、HorizontalScrollbar、VertialScrollbar

滾動條（ScrollBar）經常使用於頁面區域的滾動，例如文檔瀏覽。在Unity中，ScrollBar控件分爲水平和垂直2種，對應的GUI函數爲HorizontalScrollbar和VertialScrollbar。

水平滾動條(HorizontalScrollbar) 的執行與水平滑動條(Horizontal Slider) 相同，但有一個例外之處：另有一個參數控制「滾動條」(Scrollbar) 鈕自身的寬度。

private float hScrollbarValue;
void OnGUI()
{
    hScrollbarValue = GUI.HorizontalScrollbar(new Rect(25, 25, 100, 30), hScrollbarValue, 1.0f, 0.0f, 10.0f);
}

垂直滾動條的用法與其相似，這裏就再也不舉例了。

九、ScrollView

ScrollView用來在GUI界面中繪製一個滾動視圖區域，並旦能夠經過滾動條來控制要顯示的區域內容。

ScrollView經過成對調用BeginScrollView和EndScrollView來完成繪製。在這2個函數之間的GUI代碼會繪製在滾動視圖內部區域中。

private Vector2 scrollViewVector = Vector2.zero;
private string innerText = "I am inside the ScrollView";
void OnGUI()
{
    // 開始「滾動視圖」(ScrollView)
    scrollViewVector = GUI.BeginScrollView(new Rect(25, 25, 100, 100), scrollViewVector, new Rect(0, 0, 400, 400));

    // 向「滾動視圖」(ScrollView) 輸入內容
    innerText = GUI.TextArea(new Rect(0, 0, 400, 400), innerText);

    // 結束「滾動視圖」(ScrollView)
    GUI.EndScrollView();
}

十、Window

能夠將Window看做是控件的容器，即把其餘控件都繪製在這個窗口中，這樣能夠方便地調整窗口內全部控件的位置，以及顯示隱藏。

Window函數會調用另一個函數來進行繪製控件的工做。在繪製控件函數中，控件的位置爲窗口自身座標系下的位置，若是控件位置超出了窗口的區域，將不會顯示。

若是想讓窗口可拖動，在繪製函數中調用DragWindow函數能夠設置窗口的拖動位置。

private Rect windowRect = new Rect(20, 20, 220, 100);
void OnGUI()
{
    windowRect = GUI.Window(0, windowRect, WindowFunction, "My Window");
}

void WindowFunction(int windowID)
{
    // 在此處繪製窗口內的全部控件
    GUI.Button(new Rect(60,50,100,20),"OK");
    ……
    GUI.DrawWindow(new Rect(0,0,120,20)); //讓窗口能夠經過標題欄拖動位置
}

3、GUI.changed

要檢測用戶是否對 GUI 進行過操做（如點擊「按鈕」(Button)、拖動滑動條等等），可經過腳本讀取 GUI.changed 的值。若是用戶進行過操做則該值爲 true，經過它能夠很容易肯定用戶的輸入。

對於「工具欄」(Toolbar) 可能會出現這種狀況，即你想根據「工具欄」(Toolbar) 中點擊「按鈕」(Button) 時都分配該值，而不是僅在點擊其中一個「按鈕」(Button) 時進行分配，此時能夠用下面的代碼實現：

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    private int selectedToolbar = 0;
    private string[] toolbarStrings = {"One", "Two"};

    void OnGUI () {
        // 肯定到此幀時哪一個按鈕處於激活狀態以及其是否被點擊過
        selectedToolbar = GUI.Toolbar (new Rect (50, 10, Screen.width - 100, 30), selectedToolbar, toolbarStrings);

        // 若是用戶在此幀點擊了一個按鈕，則處理其輸入
        if (GUI.changed)
        {
            Debug.Log("The toolbar was clicked");

            if (0 == selectedToolbar)
            {
                Debug.Log("First button was clicked");
            }
            else
            {
                Debug.Log("Second button was clicked");
            }
        }
    }
}