Unity：GUI筆記(二)——工具欄和選擇網格、滾動列表和分組、窗口、自定義皮膚樣式、自動布局

寫在前面：

寫本系列(自用)的目的是回顧已經學過的知識、記錄新學習的知識或是記錄心得理解，方便自己以后快速復習，減少遺忘。

五、工具欄和選擇網格

1、工具欄

使用Unity提供的API：GUI.Toolbar()可以創建一個工具欄。有三個參數是必須傳入的：工具欄位置、當前選中的索引、所有選項列表。

位置依然是Rect類型的變量，工具欄位置索引為int類型變量。由于我們需要動態控制工具欄位置索引，因此與之前的API相同，需要創建當前索引變量，第二個參數的位置傳入當前變量，并且讓這個變量接收函數GUI.Toolbar()的返回值。第三個參數是所有選項列表，可以創建一個string類型的數組，將數組傳入。

private int toolbarIndex = 0;
private string[] toolbarInfofs = new string[] {"選項一","選項二","選項三" };
private void OnGUI()
{toolbarIndex =  GUI.Toolbar(new Rect(0, 0, 200, 30), toolbarIndex, toolbarInfofs);
}

2、選擇網格

選擇網格與GUI.Toolbar()用法差不多，使用的API是：GUI.SelectionGrid()，前三個參數與GUI.Toolbar()相同，多了第四個參數xCount，表示水平方向最多顯示的按鈕數量，當前數量為3，所以可能與原來的輸出沒有區別。

private string[] toolbarInfofs = new string[] {"選項一","選項二","選項三" };
private int selGridIndex = 0;
private void OnGUI()
{//相對toolbar多了一個參數，xCount代表水平方向最多顯示的按鈕數量selGridIndex = GUI.SelectionGrid(new Rect(0, 50, 200, 60), selGridIndex, toolbarInfofs, 3);
}

數量為3時：

數量為2時：

數量為1時：

六、滾動列表和分組

1、分組

分組是一種批量控制控件位置的方法，可以理解為包裹著的控件加了一個父對象。可以通過控制分組來控制包裹控件的位置。

提供的API是GUI.BeginGroup()和GUI.EndGroup()。

GUI.BeginGroup()和GUI.EndGroup()的中間寫需要批量控制的控件代碼，GUI.BeginGroup()中必須傳入位置參數，中間的控件位置就是以這個位置為基準的。

public Rect groupPos;private void OnGUI()
{GUI.BeginGroup(groupPos);GUI.Button(new Rect(0, 0, 100, 50), "測試按鈕");GUI.Label(new Rect(0, 60, 100, 20), "Label信息");GUI.EndGroup();
}

例如，當位置信息輸入如下時：

桌面上的兩個控件信息就會這樣顯示：

再次修改以上的位置信息，這兩個控件信息就會批量跟隨修改。

2、滾動列表

滾動列表會開辟一個窗口，窗口上會有界面上這樣的滾動條：

滾動列表使用的API是GUI.BeginScrollView()，同樣有GUI.EndScrollView()，將需要放在滾動列表里的信息批量顯示。

其中，GUI.BeginScrollView()有三個必須的參數。第一個參數是滾動列表在屏幕上的顯示區域，第二個參數是當前顯示的位置(例如在滾動橫向或者縱向滾動條后，當前所顯示的位置)，是個Vector2變量。第三個參數是滾動列表中內容的總大小和位置。當第三個參數大于第一個參數時，就會產生滾動條(可以以Window窗口來類別，假設當前頁面大小設置為是500×500(第一個參數)。那么假設此時頁面里的內容量為1000×800(第三個參數)，大于500×500，就會產生滾動條，滾動著去顯示所有內容)

那么，當第三個參數的值小于第一個參數時，就不會產生滾動條。這是因為設置了第四、五個參數，這兩個參數默認為false。如果想要第三個參數的值小于第一個參數時也有滾動條，就把它們改為true。

public Rect scPos;
public Rect showPos;
private Vector2 nowPos;
private string[] strs = new string[] {"123","456", "789", "111" };private void OnGUI()
{nowPos = GUI.BeginScrollView(scPos, nowPos, showPos);GUI.Toolbar(new Rect(0, 0, 300, 50), 0, strs);GUI.Toolbar(new Rect(0, 60, 300, 50), 0, strs);GUI.Toolbar(new Rect(0, 120, 300, 50), 0, strs);GUI.Toolbar(new Rect(0, 180, 300, 50), 0, strs);GUI.EndScrollView();
}

七、窗口

1、窗口

創建窗口使用的API是：GUI.Window()，必要的參數有四個。

第一個參數是窗口唯一的ID，不要和別的窗口重復。假如重復使用就會覆蓋掉之前的窗口。第二個參數是位置信息，Rect類型。第三個參數是委托，需要傳入一個函數，是用于繪制窗口用的函數(顯示窗口內的控件) 重寫一個函數傳入即可。第四個參數是窗口名。此外，還能傳入自定義樣式等參數，這里不做演示。

不同的窗口可以傳入相同的委托函數，也就是說id除了區分不同窗口，還可以在一個函數中去處理多個窗口，通過id去區分它們。委托函數內可以根據窗口id來執行不同的語句，例如使用Switch case語句。委托函數中可以繪制窗口內的控件，按鈕、文字信息、輸入框等等。

private void OnGUI()
{GUI.Window(1, new Rect(100, 100, 200, 150), DrawWindow, "測試窗口");GUI.Window(2, new Rect(100, 350, 200, 150), DrawWindow, "測試窗口2");}private void DrawWindow(int id)
{switch(id){case 1:GUI.Button(new Rect(0, 0, 30, 20), "1");break;case 2:GUI.Button(new Rect(0, 0, 30, 20), "2");break;}}

2、模態窗口

模態窗口除了調用API與普通窗口不同外，參數等都與普通參數相同。它的API為：GUI.ModalWindow()

當模態窗口出現時，其他任何控件都不再會響應你的鼠標，類似一個警告窗口，必須要處理完該窗口的邏輯時才能處理其他窗口。

private void OnGUI()
{GUI.Window(1, new Rect(100, 100, 200, 150), DrawWindow, "測試窗口");GUI.Window(2, new Rect(100, 350, 200, 150), DrawWindow, "測試窗口2");GUI.ModalWindow(3, new Rect(300, 100, 200, 150), DrawWindow,"模態窗口");
}private void DrawWindow(int id)
{switch(id){case 1:GUI.Button(new Rect(0, 0, 30, 20), "1");break;case 2:GUI.Button(new Rect(0, 0, 30, 20), "2");break;case 3:GUI.Button(new Rect(0, 0, 30, 20), "3");break;}}

3、拖動窗口

拖動窗口就是能被拖動的普通窗口或模態窗口。窗口的API的返回值是一個Rect變量，因此可以效仿之前的控件，創建一個Rect變量接收這個返回值，并將值傳入Window函數中。但是僅僅這樣設置不能拖動窗口，位置賦值只是前提。

為了讓窗口可以被拖動，還需要在委托函數中，處理拖動窗口邏輯處加上：GUI.DragWindow()；這個API寫在委托函數中，可以讓窗口被拖動，傳入Rect參數的重載左右是決定窗口中哪一部分位置可以被拖動(例如可以傳入位置，指定只有拖動窗口最上面一排時，整個窗口可以被拖動)，無參重載默認窗口中所有位置都能被拖動。

private Rect dragWinPos = new Rect(400, 400, 200, 150);private void OnGUI()
{dragWinPos = GUI.Window(4, dragWinPos, DrawWindow, "拖動窗口");
}private void DrawWindow(int id)
{switch(id){case 4:GUI.DragWindow();break;}  
}

八、自定義皮膚樣式

1、顏色

(1)全局顏色

全局顏色使用的API是GUI.color = Color.red，這里是將全局顏色定為紅色。全局的著色顏色，影響背景和文字顏色，哪怕自定義style顏色也會被改變，全局顏色會在之前顏色的基礎上進行疊加。

可以隨時在后面更改全局顏色，會作用在更改后的代碼上。如下例所示：

 public GUIStyle style;private void OnGUI(){GUI.color = Color.red;GUI.Button(new Rect(0, 0, 100, 30), "測試按鈕");GUI.Label(new Rect(0, 50, 100, 30), "測試按鈕",style);GUI.color = Color.white;//可以隨時改后面的GUI.Button(new Rect(0, 100, 100, 30), "測試按鈕",style);}

(2)文本顏色

文本顏色使用的API是GUI.contentColor。文本著色顏色，會和全局顏色相乘，所以最好單獨使用。

private void OnGUI(){GUI.contentColor = Color.yellow;GUI.Button(new Rect(0, 0, 100, 30), "測試按鈕");GUI.Label(new Rect(0, 50, 100, 30), "測試按鈕");}

(3)背景顏色

背景顏色使用的API是?GUI.backgroundColor。背景元素著色顏色，也會和全局顏色相乘。

 public GUIStyle style;private void OnGUI(){GUI.backgroundColor = Color.red;GUI.Label(new Rect(0, 50, 100, 30), "測試按鈕");GUI.Button(new Rect(0, 0, 100, 30), "測試按鈕",style);}

2、整體皮膚樣式

整體皮膚樣式使用的API是：?GUI.skin。默認情況下為null，使用的是系統自帶的那一套皮膚樣式。皮膚文件是多個GUI控件的綜合體，可以幫助我們整套的設置自定義樣式，相對單個控件要方便一點。

可以在資源文件中創建一個皮膚資源：

如下：

里面是一些熟悉的按鍵樣式更改：

修改后將自己自定義的皮膚樣式傳入，即可一件設置自定義樣式。

 public GUISkin skin;private void OnGUI(){GUI.skin = null;GUI.Button(new Rect(0, 0, 100, 30), "測試按鈕");GUI.skin = skin;GUI.Button(new Rect(0, 50, 100, 30), "測試按鈕");}

九、自動布局

1、GUILayout自動布局

自動布局的作用是：控件不用傳入位置參數，不用我們來布局，會以最長按鈕來拉伸，保證對齊。主要用于進行編輯器開發。

自動布局的API是：GUILayout，可以運用這個API來加點使用之前的各個控件，例如GUILayout.Button("123")

private void OnGUI()
{GUILayout.Button("123");GUILayout.Button("1234");GUILayout.Button("12345");
}

可以看到，他為我們自動排布了這三個按鈕，并且按鈕的大小都是相同的。如果想要橫向排布按鈕、修改自動布局顯示的區域，可以使用GUILayout.BeginHorizontal()，GUILayout.EndHorizontal()與GUILayout.BeginArea()，GUILayout.EndHorizontal()將中間的內容包裹起來，例如：

private void OnGUI()
{GUILayout.BeginArea(new Rect(100, 100, 100, 100));GUILayout.BeginHorizontal();GUILayout.Button("123");GUILayout.Button("1234");GUILayout.Button("12345");GUILayout.EndHorizontal();GUILayout.EndArea();
}

2、布局選項

除了以上基礎設置，還有一些布局選項供我們使用，如下，分別可以設置控件的固定寬高、允許控件的最小寬高、允許控件的最大寬高、允許或禁止寬高擴展。

這里說一下允許或禁止寬高的擴展。從第一點可以知道，自動布局會自動幫我們把按鈕對齊，它會將所有控件的大小都調整為最大的那個控件大小。如果禁止寬高擴展，自動布局就不會為我們進行大小調整。接下來會有一個使用示例。

private void OnGUI()
{//控件的固定寬高GUILayout.Width(300);GUILayout.Height(200);//允許控件的最小寬高GUILayout.MinWidth(50);GUILayout.MinHeight(50);//允許控件的最大寬高GUILayout.MaxWidth(100);GUILayout.MaxHeight(100);//允許或禁止寬高擴展GUILayout.ExpandWidth(true);GUILayout.ExpandHeight(false);GUILayout.ExpandHeight(true);GUILayout.ExpandWidth(false);
}

布局選項的使用示例，這里僅用禁止寬擴展為案例：

private void OnGUI()
{GUILayout.Button("123",GUILayout.ExpandWidth(false));GUILayout.Button("1234");GUILayout.Button("1234567");
}

補充知識：

在類前加上特性[ExecuteAlways]，可以讓這個類在編輯器模式下(不運行)也可以執行。

[ExecuteAlways]
public class lession10 : MonoBehaviour
{private void OnGUI(){}
}