UI组件——NGUI的使用和理解（二）

UI组件——NGUI的使用和理解（二）

上一节主要对NGUI进行了简单介绍，接下来这一部分会对NGUI的几个组件进行讲解：

UILabel——创建文字的组件

创建UILabel有很多种方式，可以选择在NGUI文件栏中直接进行创建。在这里我们只需选中NGUI的某一个组件，点击右键Create–>Label创建UILabel。

我们简单说一下UILabel的属性。

Fonts Size可调节文字大小。
Text中可输入UILabel中呈现的文字。
Overflow属性代表着文字进行伸缩时出现的选项。选项主要有以下四种：

ShrinkContent代表着字体会跟随UILabel空间大小不断进行变化。
ClampContent会把看不见的物体自动剪掉，按照字体的大小进行处理。
ResizeFreely代表着将UILabel的size适应字体大小进行设置。
ResizeHeight说明此时我们不可以调节UILabel的高度，只可以调节宽度。

Alignment代表着此时字体的位置，可根据选择项的名称调节字体的布局方向。
其中Justified代表着字体应该适应UILabel的大小变化。但是对带有中文行的字体没有效果。
Gradient代表着字体渐变的颜色，默认设置为由白变到灰色。

Effect代表着对字体进行简单效果的设置。一般只有三个选项，如下图所示：

None代表着没有效果。
Shadow代表着设置阴影效果。我们可以调节字体的offset和spacing对字体进行处理。可实现如下图一样的效果。

（在这里感谢SIKI老师的图！！！！！）
OutLine代表着为字体添加边框。

Color Tint代表着字体的颜色的调节。
Widget下的Depth代表着深度。
Widget下的Size代表着组件大小。
如果想要调节Font自已的格式，NGUI为我们提供了两种方式，在下方图片NGUI的按钮位置，点击之后，会出现下拉选项框，我们可在这里选择NGUI和Unity的字体格式。

我们在这里按照上图中的格式点击Font按键进入选择界面。

我们可在这里选择NGUI内带的字体格式。
当我们把NGUI更改为Unity之后，操作几乎与NGUI相同。
我们在这里可以做一个简单的尝试，点击开始菜单下的控制面板–>外观与个性化–>字体，在系统自带的字体中进行挑选。

我们将文件夹中的方正粗体字体放入Unity中，将UILabel更改为Unity模式，选中方正粗体字体。效果如下所示。

以上是对于UILabel控件的整理，具体的效果可自行进行尝试。

Sprite——创建图片的组件

创建Sprite的方式与UILabel类似，依然是在UIRoot下右键点击Create–>Sprite，即可创建完成。


在UISprite脚本中依然有许多选项，我们在这里也针对几个重要的进行讲解：
Atlas意为图集，在NGUI当中，我们主要是将我们需要使用的图片生成为一个大的图集中，如果没有图集，我们可能需要创建一个图集，我们只需点击选项框中的NGUI–>Open–>Atlas Maker即可打开图集制作界面：

在选择完图集后，我们接下来可以选择图集中的精灵。点击UISprite下的Sprite按钮，进入选择图集中的图片。

Color Tint与UILabel相同，也是代表着颜色。
Type属性代表着图片的显示类型。主要有下图所示的几种：

Flip意为在不同方向上图片的翻转效果。主要有以下的几种：

以上的效果选项在后期进行集中说明。

Panel——控件的容器

panel的创建与之前控件的创建是完全相同的。

我们可以在Panel的下面创建其他组件。

在UGUI中，渲染单位一般是Canvas。而在NGUI中，渲染单位往往是Panel，所以，Panel的含义在这里就是所有控件的容器。
在UIPanel脚本下也有几个属性，我们主要选择几个常用的进行讲解。

Alpha值可调节整个Panel的Alpha值，可借此选项调节Panel及Panel子控件下的透明度。
Clipping代表着，如果子控件超出了屏幕范围，我们应该如何对它进行处理。一般有以下三个选项。

None意为没有效果。

Soft Clip可以调节对应的属性数值，对超出视野边缘的部分进行处理。

Offset和Center都是设置位置的，Size设置视野框的大小，Softness代表着过渡的边缘大小。

Constrain But Dont Clip代表着限制视野范围，但是对于超出视野范围的部分，不进行裁剪处理。

Button——核心中的核心

在NGUI中，我们没有固定的Button组件，所以我们只能采用NGUI自带的方式创建Button。
NGUI创建Button的方式十分灵活，我们可以采用Label Button，也可以采用Sprite Button。
我们先使用Label Button的方式。
首先和上面一样，创建Label。
然后，在UILabel上挂载Box Collider。

接下来，在Labe控件上添加Button脚本。

这样，一个Label Button就创建好了，用同样的方式，我们也可以创建一个Sprite Button。
我们添加检测事件的时候，需要在UIButton脚本下的On Click处进行添加。

在这里，我们进行一个简单的实验。
我们创建一个C#脚本，名字叫做NGUIButtonClick.cs，将脚本挂在Main Camera上。代码如下所示：

我们将Main Camera拖拽到On Click下，同时选中我们需要的函数。效果如下所示：

效果如下所示：

这就是这一节讲解的内容，接下来我们将对于其他空间和其他操作进行讲解。