[Unity3D] Unity3d的GUI排版教程--4 （转）

[Unity3D]Unity3d的GUI排版教程--4 （转）[复制链接]

在前面的一个小节，我们已经能使用GUILayout 做一些简单的排版工作了。但它排版的样式可能并不能令你满意。比方说，有的朋友就想让这样的按钮之间变的紧凑一些，这该怎么办呢？在网页设计中，我们可以规定通过CSS设置一个块的Style，而在Unity3D中，我们则可以使用GUIStyle和GUISkin来设置常用块的Style，或是自定义块的Style。

    那GUIStyle和GUISkin又有那些具体的区别呢？其实GUIStyle特别像CSS里面内级联样式，而GUISkin则像一个外级联样式。 GUIStyle通常委派给一个脚本里面的所有GUI元素使用；而GUISkin则是您在“Project”栏中创建好之后，在监视面板中定义好所有特定样式，然后通过“级联”的方式导入到脚本里面，给相应GUI元素使用的。GUISkin相比GUIStyle来说有着更好的重用性，但缺点也是显而易见的。在使用的脚本中会导入许多该脚本GUI并不需要使用的样式。首先我先来做一个GUIStyle例子：
首先我们新建一个GUIStyle的全局对象MyGuiStyle，如下所示。
public class NewBehaviourScript : MonoBehaviour {

    public GUIStyle MyGuiStyle;

……

再接着，我们让OnGUI函数里面的GUI元素使用该样式如下所示。
    void OnGUI()
    {
        GUILayout.BeginArea(new Rect(10, 10, 300, 300),"",MyGuiStyle);

……

然后我们保存文档，运行场景，并在“Hierarchy”面板中选中附着该脚本的对象，在它的监视面板中展开MyGuiStyle卷展栏，并为GUILayout.BeginArea设置背景图片，如下所示：

然后我们运行一下场景，可看到如下所示的效果：

这里需要给大家详细解释一下，这个样式控件里面的具体参数：

• 首先我们可以看到Normal、Hover、Active、Foucused、On Normal、On Hover、On Active、On Focused卷展栏，这些参数都带有一个Background和一个Text Color属性，我们可以把这些卷展栏叫做状态卷展栏，因为它们主要是用来指定块的各种状态。Normal、Hover全部块属性都能运用的状态卷展栏，它用于指定该块普通状态下的背景图片和文字颜色，以及鼠标经过该块时候的背景图片和文字颜色；Active主要用于按钮块，用于定义按钮被激活时候的背景图片和字体颜色；Foucused主要用在窗口，文本框等容易获得焦点的块的背景图片和字体颜色；而On Normal、On Hover、On Active、On Focused这主要用于按钮和BOX等能被激活、能获得焦点的块，表示当该按钮被激活之后，普通状态，经过状态，激活状态、以及获得焦点之后的背景图片和字体颜色。
• 接下来我们可以看到Border、Padding、Margin、Overflow这四个属性，其中的Border、Padding、 Margin和我们之前讲到的CSS中的盒子概念完全一致。Border表示该块边框的大小，Padding表示边框到填充区域之间的距离，Margin 表示块与块之间的距离。这里我要重点给大家说一下Overflow，因为在CSS的盒子里面是没有这个东西的，它表示了块向内，或向外延伸的渲染范围，但它并不会影响到热区范围的大小。
  

    有那这些知识，我们现在将原先制作的按钮重新的设置一下样式，让它们排列的紧密一些。但如果这个时候，我们去是GUIStyle就会显得很麻烦，因为我们要给每一个Button都去制定一个引用样式。所以为了方便起见，我这里使用了GUISkin，因为GUISkin自带了所有的块的默认样式卷展栏。

• 我们在“Project”栏中点击鼠标右键——>“Create”——>“GUI Skin”，新建一个外联的GUI Skin控件。
• 打开刚才的那个脚本，为GUI Skin控件添加一个外联接口，如下所示：
  public class NewBehaviourScript : MonoBehaviour {
      public GUISkin MyGuiSkin;
  ……
• 保存脚本，在“Hierarchy”面板中选中附带着该脚本的对象，在监视面板中向MyGuiSkin接口处拖放我们新建好的GUI Skin控件，如下图所示：
  
• 在BeginArea内引用该外级联样式，如下所示：
      void OnGUI()
      {
          GUILayout.BeginArea(new Rect(10, 10, 300, 160),"",MyGuiStyle);
          GUI.skin = MyGuiSkin;
  ……
• 运行场景看下效果，发现排版布局并没有发生太大的变化。不要急，在“Project”栏中选中GUISkin控件，并在监视面板中展开“Button”，并进一步展开“Padding”和“Margin”将里面的数字全部设置为0，最后的效果如下所示：