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

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

在上一节中，我们大致了解了GUI与GUILayout存在的一些差异。在这一节中我会举一些例子，来为大家详细讲述利用GUILayout做UI排版的好处。

    我首先在脚本的OnGUI()函数体中，添加两段按钮代码，一段是GUI.Button如下所示：
    GUI.Button(new Rect(100f, 100f, 100f, 50f), "Hello GUI.Button");
    以及一段GUILayout.Button代码如下所示：
    GUILayout.Button("Hello GUILayout.Button");

在整个输入的过程中，我们发现，GUI.Button需要我们必须为该对象配置一个Rect参数，来设定按钮的位置100f, 100f和它的尺寸大小100f, 50f，以及按钮上显示的文字"Hello GUI.Button"。但GUILayout.Button并不要求我们输入限制性能容（位置、大小），只要我们输入显示内容"Hello GUILayout.Button"。运行之后的效果如下所示：

    大家可以看到GUI.Button由于设定的宽度不够，不足以装下里面的文字，而使得里面的部分文字被剪裁掉了。而GUILayout.Button不需要设定位置和宽度，它在显示的时候，则是以刚好能容纳下全部文字的宽度来显示的。这和我们网页中的没设定样式的DIV是不是相似？那U3D里面有没有类似 DIV的标签呢？用来承载我们切片区域，设定切片区域的大小和位置呢？答案是：有的！它就是BeginArea家族，主要包含了 GUILayout.BeginArea、GUILayout.BeginVertical、GUILayout.BeginHorizontal这三大要素。它们和DIV很类似，对应着三个各自的结束标签GUILayout.EndArea、GUILayout.EndVertical、 GUILayout.EndHorizontal，中间包裹这该块内所需要显示的内容。GUILayout.EndArea默认情况下，会让内部成员在没有设置样式的情况下，宽度等于自身的宽度-自身的Padding像素-内部成员的Margin像素。

    对于大多数初学者，可能会有点不太明白Padding、Margin是什么东西，那么在这里笔者借用CSS盒子里面的一张图来说明一下，如下图所示：

    简单来说，Margin、是用来规定该块从边框到另外一个块之间的距离的。而Padding是用来规定边框到内部填充之间的距离的，这个概念尤为重要，因为对于像Button这类的空间来说，只有“Content”填充区域才会有热点触发，其他区域，即便你能看到，也不会有触发。在Web中，大家可以写一个CSS来完成对改标签的盒子样式的个性化设定，那如何做到在U3D里面对盒子样式的设定呢？答案很简单，U3D把所有的GUI元素样式都集成在了皮肤样式控件里面中，您可以使用GUIStyle来单独给该Object上面的GUI添加一个样式。也可以用样式集合控件GUISkin来完成对多个 GUIStyle的统一设定，包括默认样式Box、Button等等。下一节我为大家详细的来做一个例子，大家就明白了。