【Unity】8.3 佈局模式（GUILayout）

分類：Unity、C#、VS2015

建立日期：2016-04-27

1、簡介

在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()函數中，也能夠混合使用固定佈局和自動佈局兩種方式。

2、固定佈局

羣組 (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 ();
    }
}

 

效果以下：

3、自動佈局

一、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) 的全長。

二、水平組和垂直組

在使用控件自動佈局時，默認的擺放方式是從上到下依次排列繪製，若是想將控件在某些狀況下水平排列，某些狀況下垂直排列，能夠經過水平組和垂直組進行控制，使用方式是調用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();
    }
}

效果以下：

 

 

 

三、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 ();
    }
}