NGUI-使用UILabel呈现图片和不同格式的文字

1、可以使用BBCode标记

Bold 粗体

italic 斜体

underline 下划线

[s]strikethrough[/s] 删除线

[sub]sub[/sub] 下标

[sup]sup[/sup] 上标

[00ff00]设置颜色[-] 设置显示颜色

博客 链接

例如设置颜色：

UILabel的Text内容为：[99ff00]n[-]gui: tools

展示效果则为：



这里主要说一下设置连接：

单单的在UILabel的Text里面写入这个是不够的：博客 链接

点击是不会产生效果的，我们还要为此UILabel添加一个Collider和一个脚本

脚本如下：

void OnClick()
{
UILabel lbl = GetComponent<UILabel>();
string url = lbl.GetUrlAtPosition(UICamera.lastWorldPosition);
Application.OpenURL(url);
}

脚本中的OnClick方法要想被触发，就必须要添加一个Collider，这个道理我想大家都懂得！

但要注意一点，假如UILabel的Text内容为：请点击我的博客进入，欢迎大家来批评指正！

我只想点击《我的博客》四个字才去打开连接，而不是点击上面的任何字都可以打开连接，假如上面的文字尺寸是700x40，而《我的博客》四个字的尺寸是200x40，这时我们就可以设置Collider的Center和Size属性来设置点击的区域大小以满足我们的需求，可是当我运行程序的时候Center和Size会自动变为700x40，原来UILabel的Widget有个选项Collider，这个auto-adjust
to match表示Collider大Size大小自动匹配为UILabel的Size大小，我们只要把这个勾取消即可！

如果你不想使用BBCode，那么UILabel有个选项BBCode，不勾选的话，就表示不使用BBCode

2、使用图片

我们只要在UILabel的Text里面写了：zwh:) 那么就会出现了一个笑脸图片：



为什么会这么神奇呢，原因在于你选择的Font，此处我选择的Font是Arimo20



Arimo20有三个关联的文件：



类型依次为：tga，prefab，txt

这时，我们点击类型为prefab文件，在Inspector窗口的UIFont可以看到



其中可以看到我们熟悉的 :) 笑脸标记，我们这时点击笑脸对应的Emotion - Smile ，展现出来的就是那个笑脸图片，而这个笑脸图片是存在Wooden Atlas图集里面的，如果我们想用其他图片的话，我们可以向Wooden Atlas图集里面增加我们需要展现的图片，然后在下面填写一个约定好的标记，类似于 :) 这样的标记，选择我们想要展现的图片，Add即可，图片的尺寸最好是20x20，以保证和文字上下在一条水平线上！



UILabel的Text为：zwh(bird)zwh

显示为：



因为我的图片是60x60的，所以和文字上下不一样齐了，这也是我为什么建议图片尺寸是20x20的原因了！

另外说一个问题，我也不知道是不是存在的bug

此处我们为UIFont选择的图集是Wooden Atlas，Sprite是Arimo 20，Arimo 20大概对应的是字符格式，如果此时我们点击Sprite，将会弹出Wooden Atlas里面包含的所有sprite精灵，当我们点击Arimo 14或者Arimo 18的话，那么应用此Arimo20的UILabel将会变形：

原本是这样的：

，变成了这样：


为Sprite选择Arimo20已经还原不会来了，还是会变形！

解决方案：

就是点击UIFont下的Import Data，也就是导入和Arimo20关联的三个类型（tga，prefab，txt）的文件中的txt文件即可！从而使Arimo的字符集格式还原回来！

另外：

UILabel还有一个Symbols选项，他有三个值：None，Normal，Colored，选择None，那么以 :) 这样形式显示的图片将不会展示，选择Normal（默认）将正常展示，选择Colored，那么图片将会被UILabel下的Color
Tint所选择的颜色遮盖！其实这个Color Tint是对文字进行着色的，选择Colored那么也就是意味着图片也和文字应用同样的颜色！

其他属性

overflow：

1.ShrinkContent，总是显示所有文字，根据当前的width和height进行缩放

2.ClampContent，一看到Clamp就想起Clamp函数，也就是不管文本多少个字，根据当前的width和height来显示，超出部分

不显示

3.ResizeFreely，会对当前的文字长度和行数来调整，UILabel的width和height，基本上是只在一行显示，超出的部分不显示

4.ResizeHeight，保持宽度不变，必要时增加高度。

Spacing ：

X：设置字与字之间到间隔，可以为负数，设置得当可以反序

Y： 设置行与行之间的间隔。

Gradient ：

设置 渐变字

Max Lines：

用来控制最多要多少行。用0表示不限制。如果设置成n的话，那么超过n的行的文字将不会显示！

实现动态文字展现的效果：

先上效果图：



层次：



content显示的是文字

bg显示是背景图（uisprite）

title是标题

第一步：先给content添加UIlabel和typewriter effect脚本：此脚本选项的解释如下：

chars per second：每秒显示多少个字符

fade in time：淡入时间

delay on period：延迟期

delay on new line：开始新行延迟时间

scroll view：需要指定scroll view

keep full dimentions：保持全部尺寸

第二步：

设置content组件uilabel的overflow（溢出方式）为ResizeHeight

第三步：

typewriter effect脚本的keep full dementions不要勾选，其他的默认即可

第四步：

设置bg背景图的UISprite的Anchors的Type为Unified（统一），Execute为OnUpdate，Target为mylabel即可！

Anchors的功能是：

物体A相对于所指定物体B的位置设置情况。可以设置离指定物体的上，下，左，右的偏移值，从而实现对齐，主要用在动态的效果的情况下，例如上面的title的位置就是相对于content而设置的，随着content文字的动态增加，title的位置也在不断的上移，实现对齐，避免位置错乱！这大概就是设置Anchors的好处吧！

这里我的title的anchors里面，只要设置了top+50即可，保持与content的顶部的距离即可，其他的可以不用设置！

target为指定物体B，而bg就是A，Execute指在更新时还是可用时去执行，type表示统一的还是高级的