IMGUI 布局模式

固定布局与自动布局

使用 IMGUI 系统时，您可以使用两种不同的模式来排列和组织 UI：固定和自动。到目前为止，本指南中提供的每个 IMGUI 示例都使用了固定布局。要使用自动布局，请在调用控制函数时编写 GUILayout 而不是 GUI。您不必使用一种布局模式而不是另一种模式，并且可以在同一个 OnGUI（） 函数中同时使用两种模式。

当您有预先设计的界面可供使用时，使用固定布局是有意义的。当您不知道预先需要多少个元素，或者不想担心手动定位每个控件时，使用自动布局是有意义的。例如，如果您要根据“保存游戏”文件创建多个不同的按钮，则不知道将绘制多少个按钮。在这种情况下，自动布局可能更有意义。这实际上取决于您的游戏设计以及您想要如何呈现界面。

使用自动布局时有两个主要区别：

• 使用 GUILayout 代替 GUI
• 自动布局控件不需要 Rect（） 函数

/* Two key differences when using Automatic Layout */

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");
    }

}

排列控件

根据你使用的布局模式，有不同的钩子用于控制控件的位置以及它们如何组合在一起。在固定布局中，您可以将不同的控件放入组中。在自动布局中，您可以将不同的控件放入区域、水平组和垂直组中

固定布局 - 组

组是固定布局模式下可用的约定。它们允许您定义包含多个控件的屏幕区域。您可以使用 GUI 定义哪些控件位于组内。BeginGroup（） 和 GUI。EndGroup（） 函数。组内的所有控件将基于组的左上角而不是屏幕的左上角进行定位。这样，如果您在运行时重新定位组，则将保持组中所有控件的相对位置。

例如，将多个控件在屏幕上居中非常容易。

/* Center multiple Controls on the screen using Groups */

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    void OnGUI () {
        // Make a group on the center of the screen
        GUI.BeginGroup (new Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
        // All rectangles are now adjusted to the group. (0,0) is the topleft corner of the group.
    
        // We'll make a box so you can see where the group is on-screen.
        GUI.Box (new Rect (0,0,100,100), "Group is here");
        GUI.Button (new Rect (10,40,80,30), "Click me");
    
        // End the group we started above. This is very important to remember!
        GUI.EndGroup ();
    }

}

您还可以将多个组嵌套在彼此内部。执行此作时，每个组的内容都会被裁剪到其父级空间。

/* Using multiple Groups to clip the displayed Contents */

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    // background image that is 256 x 32
    public Texture2D bgImage; 
    
    // foreground image that is 256 x 32
    public Texture2D fgImage; 
    
    // a float between 0.0 and 1.0
    public float playerEnergy = 1.0f; 
    
    void OnGUI () {
        // Create one Group to contain both images
        // Adjust the first 2 coordinates to place it somewhere else on-screen
        GUI.BeginGroup (new Rect (0,0,256,32));
    
        // Draw the background image
        GUI.Box (new Rect (0,0,256,32), bgImage);
    
            // Create a second Group which will be clipped
            // We want to clip the image and not scale it, which is why we need the second Group
            GUI.BeginGroup (new Rect (0,0,playerEnergy * 256, 32));
        
            // Draw the foreground image
            GUI.Box (new Rect (0,0,256,32), fgImage);
        
            // End both Groups
            GUI.EndGroup ();
        
        GUI.EndGroup ();
    }

}

自动布局 - 区域

区域仅在自动布局模式下使用。它们在功能上类似于固定布局组，因为它们定义了屏幕的有限部分以包含 GUILayout 控件。由于自动布局的性质，你几乎总是使用区域。

在“自动布局”模式下，您不会定义将在“控件”级别绘制控件的屏幕区域。控件将自动放置在其包含区域的最左上角。这可能是屏幕。您还可以创建手动定位的区域。GUILayout 区域内的控件将放置在该区域的最左上角。

/* A button placed in no area, and a button placed in an area halfway across the screen. */

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

}

请注意，在区域内，具有按钮和框等可见元素的控件会将其宽度拉伸到区域的整个长度。

自动布局 - 水平和垂直组

使用自动布局时，控件将默认从上到下一个接一个地出现。在很多情况下，您需要对控件的放置位置和排列方式进行更精细的控制。如果您使用的是自动布局模式，则可以选择水平组和垂直组。

与其他布局控件一样，您可以调用单独的函数来启动或结束这些组。具体函数包括 GUILayout.BeginHorizontal（）、GUILayout.EndHorizontal（）、GUILayout.BeginVertical（） 和 GUILayout.EndVertical（）。

水平组内的任何控件将始终水平布局。垂直组内的任何控件将始终垂直布局。这听起来很简单，直到您开始将组嵌套在彼此内部。这允许您在任何可以想象的配置中排列任意数量的控件。

/* Using nested Horizontal and Vertical Groups */

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    private float sliderValue = 1.0f;
    private float maxSliderValue = 10.0f;
    
    void OnGUI()
    {
        // Wrap everything in the designated GUI Area
        GUILayout.BeginArea (new Rect (0,0,200,60));
    
        // Begin the singular Horizontal Group
        GUILayout.BeginHorizontal();
    
        // Place a Button normally
        if (GUILayout.RepeatButton ("Increase max\nSlider Value"))
        {
            maxSliderValue += 3.0f * Time.deltaTime;
        }
    
        // Arrange two more Controls vertically beside the Button
        GUILayout.BeginVertical();
        GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));
        sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0f, maxSliderValue);
    
        // End the Groups and Area
        GUILayout.EndVertical();
        GUILayout.EndHorizontal();
        GUILayout.EndArea();
    }

}

使用 GUILayoutOptions 定义一些控件

您可以使用 GUILayoutOptions 来覆盖某些自动布局参数。您可以通过将选项作为 GUILayout 控件的最终参数来实现此目的。

还记得在上面的 Areas 示例中，按钮将其宽度拉伸到 Area 宽度的 100% 吗？如果我们愿意，我们可以覆盖它。

/* Using GUILayoutOptions to override Automatic Layout Control properties */

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

}

有关可能的 GUILayoutOptions 的完整列表，请阅读 GUILayoutOption 脚本参考页面。