【Unity】8.3 布局模式（GUILayout）

分類：Unity、C#、VS2015

創建日期：2016-04-27

一、簡介

在Unity 5.x中，GUI控件的布局方式有兩種。

一種為固定布局，即在繪制控件的時候將位置參數傳入，指定控件的精確位置。另一種是自動布局，適用於控件數量動態改變的情況。或者說，當你已經有了一個預先設計好的界面可以用來工作時，可以使用固定布局 (Fixed Layout)。

另一種為自動布局(Automatic Layout)。有時候開發者不太在乎控件的精確位置，而只是想讓它們按一些簡單方式顯示出來就OK的情況，或者說，當你之前不知道需要多少元素，或者不想手動安置每個控件時，可以使用自動布局。比如，當您要根據保存游戲文件來創建若干不同按鈕時，您可能不知道要繪制按鈕的確切數目。在這種情況下使用自動布局會更方便。

如果希望使用自動布局，只需要使用CUlLayout類來替代前面例子中使用的GUI類，並去掉用Rect()指定的位置參數即可。

使用自動布局 (Automatic Layout) 時，存在兩個關鍵的不同之處：

• 使用 GUILayout，而非 GUI
• 自動布局 (Automatic Layout Controls) 控件無需 Rect() 函數

例如：

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    void OnGUI () {
        // Fixed Layout
        GUI.Button (new Rect (25,25,100,30), "I am a Fixed Layout Button");

        // Automatic Layout
        GUILayout.Button ("I am an Automatic Layout Button");
    }
}

 

在固定布局 (Fixed Layout) 中，可以將不同的控件 (Controls) 放入 群組 (Groups) 。在自動布局 (Fixed Layout) 中，可以將不同的控件 (Controls) 放入 區域 (Areas)、水平群組 (Horizontal Groups) 和垂直群組 (Vertical Groups)。

在OnGUI()函數中，也可以混合使用固定布局和自動布局兩種方式。

二、固定布局

群組 (Groups) 是固定布局模式 (Fixed Layout Mode) 下可用的慣例，使您能夠定義包含多個控件 (Controls) 的屏幕區域。您通過使用GUI.BeginGroup() 函數和GUI.EndGroup() 函數來定義哪些控件 (Controls) 在一個群組 (Group) 內。一個群組 (Group) 內的所有控件 (Controls) 都將基於群組 (Group) 的左上角來放置而不是按屏幕的左上角。以此方式，當您在運行時重新調整該群組的位置時，群組內所有控件 (Controls) 的相對位置保持不變。

例如，可以很容易地把多個控件 (Controls) 放置在屏幕中心：

using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour {
    void OnGUI () {
        // 在屏幕中心創建群組
        GUI.BeginGroup (new Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
        // 所有矩形經調整以適應於群組，其中(0,0)是群組的左上角
        // 創建框以便於知道群組在屏幕上的位置
        GUI.Box (new Rect (0,0,100,100), "Group is here");
        GUI.Button (new Rect (10,40,80,30), "Click me");

        // 結束前面開始的群組。這很重要，請記住！
        GUI.EndGroup ();
    }
}

效果如下：

 

也可以將多個群組 (Group) 嵌套進彼此內部。進行嵌套后，每個群組的內容都被剪切到其父級空間：

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    // 256 x 32 背景圖像
    public Texture2D bgImage; 

    // 256 x 32 前景圖像
    public Texture2D fgImage; 

    // 0.0 和 1.0 之間的一個浮點數
    public float playerEnergy = 1.0f; 

    void OnGUI () {
        // 創建群組 (Group) 來容納兩幅圖像
        // 調整開始的 2 個坐標以便將其放置在屏幕上的其他某處
        GUI.BeginGroup (new Rect (0,0,256,32));

        // 繪制背景圖像
        GUI.Box (new Rect (0,0,256,32), bgImage);

            // 創建將被剪切的第二群組 (Group)
            // 我們要剪切而不是縮放圖像，所以需要第二群組 (Group)
            GUI.BeginGroup (new Rect (0,0,playerEnergy * 256, 32));

            // 繪制前景圖像
            GUI.Box (new Rect (0,0,256,32), fgImage);

            // 結束兩個群組 (Groups)
            GUI.EndGroup ();

        GUI.EndGroup ();
    }
}

 

效果如下：

三、自動布局

1、Area

自動布局的確省了不少事，畢竟有時候在開發調試階段不需要太關注GUI控件的精確擺放位置。但是當控件多了之后，全都自動布局就會顯得太雜亂，這時候可以使用GUIlLayout.BeginArea和GUILayout.EndArea來指定自動布局要擺放的區域。換言之，通過這種方式，可對顯示區域進行大致的划分。

區域 (Areas) 只在自動布局 (Automatic Layout) 模式中使用。區域在功能上與固定布局群組類似，因為它們定義了屏幕中有限的一部分來容納 GUILayout 控件。由於自動布局 (Automatic Layout) 特性的原因，您幾乎會總是用到區域 (Area)。

在自動布局 (Automatic Layout) 模式中，也可以不在控件層 (Control level) 定義要繪制控件的屏幕區域。控件 (Control) 將被自動放置到容納區域的最左上角。這有可能是屏幕。您也可以創建手動放置區域 (Areas)。區域內的 GUILayout 控件 (GUILayout Control) 將被放置到該區域的最左上角。

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    void OnGUI () {
        GUILayout.Button ("I am not inside an Area");
        GUILayout.BeginArea (new Rect (Screen.width/2, Screen.height/2, 300, 300));
        GUILayout.Button ("I am completely inside an Area");
        GUILayout.EndArea ();
    }
}

注意，在一個區域 (Area) 內，帶按鈕 (Buttons)、框 (Boxes) 等可見元素的控件都會將其寬度拉伸至區域 (Area) 的全長。

2、水平組和垂直組

在使用控件自動布局時，默認的擺放方式是從上到下依次排列繪制，如果想將控件在某些情況下水平排列，某些情況下垂直排列，可以通過水平組和垂直組進行控制，使用方式是調用GUILayout.BeginHorizontal和GUILayout.EndHorizontal設置水平組，調用GUILayout.BeginVertial和GUILayout.EndVertial設置垂直組。

水平組和垂直組可以嵌套使用。

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    private float sliderValue = 1.0f;
    private float maxSliderValue = 10.0f;

    void OnGUI()
    {
        // 將所有內容納入指定 GUI 區域
        GUILayout.BeginArea (new Rect (0,0,200,60));

        // 開始單個水平群組 (Horizontal Group)
        GUILayout.BeginHorizontal();

        // 按常規放置按鈕 (Button)
        if (GUILayout.RepeatButton ("Increase max\nSlider Value"))
        {
            maxSliderValue += 3.0f * Time.deltaTime;
        }

        // 將另外兩個控件垂直地放在按鈕 (Controls) 旁邊
        GUILayout.BeginVertical();
        GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));
        sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0f, maxSliderValue);

        // 結束群組 (Groups) 和 區域 (Area)
        GUILayout.EndVertical();
        GUILayout.EndHorizontal();
        GUILayout.EndArea();
    }
}

效果如下：

 

 

 

3、GUILayout參數

如果想對自動布局的控件參數施加一些控制，可以使用GUlLayout參數。例如，當按鈕上的文字很長的時候，使用GUILayout.Button繪制的按鈕寬度會特別長，這時候可以傳入GUlLayout參數來限制它的長度。

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    void OnGUI () {
        GUILayout.BeginArea (new Rect (100, 50, Screen.width-200, Screen.height-100));
        GUILayout.Button ("I am a regular Automatic Layout Button");
        GUILayout.Button ("My width has been overridden", GUILayout.Width (95));
        GUILayout.EndArea ();
    }
}