NGUI学习笔记（一）UILabel介绍

来个前言：

做为一个U3D程序员，天然要写一写U3D相关的内容了。想来想去仍是从UI开始搞起，可能这也是最直观同时也最重要的部分之一了。U3D自带的UI系统，也许略坑，也没有太多介绍的价值，那么从今天开始就记录一下主流的UI插件-NGUI吧。

NGUI版本：

v3.6.8

学习笔记一

假定你们都已经将ngui导入到了项目中，这里须要注意，插件(.package)的存放路径不能有中文，不然会致使解压失败。

导入以后能够看到几个文件夹咯，Editor,Examples,Resources,Scripts，辣么，做为刚刚接触U3D或者NGUI的小伙伴们，就能够去Examples的Scenes目录下去看看相应的例子，都是一些完成好的场景哦~

打开场景以后，能够看到已经完成的UI，可是这时候默认的都是3D场景，而通常的UI都是2D的，因此记得在Scene视窗中把2D选项点上。这样看起来就是2D的UI了。

建立UIRoot

OK，光说不练假把式，下面咱们本身来建立一个Scene，来制做本身的第一个UI。

建立好新的场景以后，在菜单栏的NGUI选项中能够发现Options-->Reset Prefab Toolbar，点击之，能够发现NGUI预设的一些控件出现了。这就是方便咱们建立UI控件的地方。

那么为了知足承载NGUI的UI的需求，咱们须要一个UIRoot来做为承载UI容器。那么如何建立呢？很简单，直接把Prefab Toolbar中的控件拖入场景中，你会发如今Hierarchy中出现了一个UIRoot。UIRoot建立成功，打开能够发现其自带了一个Camera，做为UI的摄像机来渲染UI元素。

选中Scene中的UIRoot，右键，能够看到菜单上出现了Create用来建立各类UI元素的选项,Attach添加滚动视野，属性绑定等的选项,Tween添加动画选项。

建立UILabel

UILabel，顾名思义，用来显示文字。右键UIRoot，Create，UILabel。注意，若是右键UIRoot控件，没有菜单弹出，则看下右侧UIRoot的Inspector中的脚本是否没有展开，若没有展开则没法运行相应的功能。

建立玩Label以后，点中它，能够看到在屏幕右侧的Inspector。咱们的关注点就在Inspector中UILabel脚本中的各个属性。

Font:

首先是字体属性Font，能够看到有2种字体第一种是NGUI第二种是Unity,选择NGUI则意味着使用的是咱们经过NGUI建立的字体（在菜单栏NGUI下拉菜单中选择Open->FontMaker来建立NGUI字体，以后会介绍），

 

 

选择Unity，能够发现默认状况下其只有一个Arial字体，辣么一目了然咯，Unity字体其实就是动态字体.TTF。咱们能够经过下载TTF字体放到项目目录，再经过Unity字体来使用。

Font Size:

下面介绍下Font Size咯，就是字号，默认20。那么咱们将字号设为100，为什么发现字体没有相应的变大呢？这是因为Label控件自己还有一个Size的问题，就是一个容器和容器内容的关系，容器内容不可能比承载它的容器大。那么只要设置Widget的Size属性就能够调节大小了。当Label控件的尺寸足够大，则字体会按照设定的Font Size来显示。固然字体显示的方式，还与下面介绍的Overflow属性有关。

Overflow:

和字体显示相关一个属性，至关于一个字体显示的策略。包括4种策略，即ShrinkContent, ClampContent, ResizeFreely, ResizeHeight4种。下面来分别介绍。

ShrinkContent:即默认的策略，文字显示的大小与Label的Size自动适应，Label控件的Size不足以显示字体的大小时，字体的尺寸会去适应Label控件的大小。

ClampContent:如字面意思，就是裁剪掉没法显示的字体内容。字体内容会按照Font Size设定的大小来显示，可是当Label控件的大小不足以盛放字体内容时，相应的字体内容被裁剪掉不会显示。

ResizeFreely：与第一种策略相对应，这时是Label控件的大小去适应字体内容的大小。

ResizeHeight：同字面意思，Label控件的高度没法手动调节，而是随着字体内容的大小需求去适配字体内容，只能手动调节Label控件的宽度。

Alignment:

对齐方式选项。包括5种策略，好比常见的自动对齐，左中右对齐，还有一个较为特殊的Justified对齐方式。

Justified：即自动扩展，使文字与Label控件的宽度保持一致。不过有一点须要注意，该对齐方式只对英文有效。中文就不要使用了。。。

Gradient:

字体颜色渐变的设置。包括Top和Bottom，即从Top色变到Bottom色。

Effect：

效果，无需赘述，包括描边（outline）和阴影（Shadow）。

Color Tint：

字体渲染的颜色。

好啦，今天就先总结到这里了。