Layout Modes 布局模式

晃晃

1023 主题	3 听众	359 积分

设计实习生

Rank: 2

纳金币: 335582
精华: 0

电梯直达

楼主

发表于 2011-8-16 08:19:49 |只看该作者 |倒序浏览

Layout Modes 布局模式
Fixed Layout vs Automatic Layout 确定布局与自动布局

你有两种方式来安排组织你的GUI：确定模式和自动模式。在导读中提供的所有的GUI例子都是用确定布局。利用自动布局模式，写GUI布局来代替GUI调用控制函数，你不必一个个的利用布局模式，而是在同样的OnGUI（）函数中调用一次就可以了。

确定布局模式理解起来就像一个已经设计好的工作接口，自动布局模式理解起来就像我们在预先不知道元件，或者是不需要担心去一个个手配控制位置。比如，如果你创建一些基于保存游戏目录的大量的不同按钮，你不知道确切的将会有多少按钮，在这种情况下自动布局模式用起来会更方便，它只依靠你游戏的设计和提供怎样的接口。

这里有两种不同的自动布局模式：

1、 GUI布局用来代替GUI

2、没有Rect（）用来做自动布局控制

/* Two key differences when using Automatic Layout */
function OnGUI () {

// Fixed Layout

GUI.Button (Rect (25,25,100,30), "I am a Fixed Layout Button");
// Automatic Layout

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

}
Arranging Controls 安排控制

依靠你所用到的布局模式，在你控制端放置的地方有许多不同的钩子并且聚集在一起。你通过利用内部的GUI.BeginGroup（）函数和GUI.EndGroup（）函数，定义一组函数。组内的所有控制将被放置在组的左上角代替屏幕左上角。这种方法，如果你在运行时重新配置组，组内所有的控制会保持在想关联的位置。

例如，可以很容易的把一系列控制放置在屏幕中心。

/* Center multiple Controls on the screen using Groups */
function OnGUI () {

// Make a group on the center of the screen

GUI.BeginGroup (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 (Rect (0,0,100,100), "Group is here");

GUI.Button (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 */
var bgImage : Texture2D; // background image that is 256 x 32

var fgImage : Texture2D; // foreground image that is 256 x 32

var playerEnergy = 1.0; // a float between 0.0 and 1.0
function OnGUI () {

// Create one Group to contain both images

// Adjust the first 2 coordinates to place it somewhere else on-screen

GUI.BeginGroup (Rect (0,0,256,32));
// Draw the background image

GUI.Box (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 (Rect (0,0,playerEnergy * 256, 32));
// Draw the foreground image

GUI.Box (Rect (0,0,256,32), fgImage);
// End both Groups

GUI.EndGroup ();

GUI.EndGroup ();

}

你可以构筑一类来创建剪切行为
Automatic Layout – Areas 自动布局-区域

区域只有在布局模式中才会被用到，它们在功能上与确定布局组相类似，它们定义了屏幕中有限的一部分来放置GUI布局控制。由于自动布局的自身性质，你几乎可以利用所有的地方。

在自动布局模式中，你不必忙于定义控制端在控制层在屏幕中的区域，控制端会自动在屏幕左上端放置。或许在屏幕中，你可以创建自己手动创建放置位置，GUI布局控制会放置在区域的最左上方。

/* A button placed in no area, and a button placed in an area halfway across the screen. */
function OnGUI () {

GUILayout.Button ("I am not inside an Area");

GUILayout.BeginArea (Rect (Screen.width/2, Screen.height/2, 300, 300));

GUILayout.Button ("I am completely inside an Area");

GUILayout.EndArea ();

}

注意到在区域中，可见元件的控制端像按钮和盒子一样在整个区域宽度范围上拉伸。
Automatic Layout - Horizontal and Vertical Groups 自动布局-水平和垂直组

当用自动布局时，控制端会按照默认的样式从顶部到底部一个个出现，你会有很多好的机会把它们更好的排列和放置，如果你利用自动布局模式，你可以选择水平和垂直组。

就像其他布局控制一样，你可以调用分离函数来开始或结束组，特定的功能函数是GUILayout.BeginHoriztontal（），GUILayout.EndHoriztontal（），GUILayout.BeginVertical（），GUILayout.EndVertical（）。

任何在水平组内部放置的控制端会被水平放置，任何在垂直组内部放置的控制端会被垂直放置，这听起来很清晰直到你在他们之间嵌套的时候，它可以让你在图形构造中安排任何数量的控制端。

/* Using nested Horizontal and Vertical Groups */
var sliderValue = 1.0;

var maxSliderValue = 10.0;
function OnGUI()

{

// Wrap everything in the designated GUI Area

GUILayout.BeginArea (Rect (0,0,200,60));
// Begin the singular Horizontal Group

GUILayout.BeginHorizontal();
// Place a Button normally

if (GUILayout.RepeatButton ("Increase max
Slider Value"))

{

maxSliderValue += 3.0 * Time.deltaTime;

}
// Arrange two more Controls vertically beside the Button

GUILayout.BeginVertical();

GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));

sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0, maxSliderValue);
// End the Groups and Area

GUILayout.EndVertical();

GUILayout.EndHorizontal();

GUILayout.EndArea();

}

三个控制端按照水平组和垂直组排列
Using GUILayoutOptions to define some controls 利用GUI布局选择来定义一些控制端

你可以利用一些GUI布局选择来优先于一些自动布局参数，你可以通过GUI布局控制端最终参数提供选择。

记住在上面的示例区域中，当按钮拉伸宽度到区域宽度的100%时？我们可以优先于我们想要的。

/* Using GUILayoutOptions to override Automatic Layout Control properties */
function OnGUI () {

GUILayout.BeginArea (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 ();

}