NGUI-使用UILabel呈现图片和不同格式的文字
1、可以使用BBCode标记
[b]Bold[/b] 粗体
[i]italic[/i] 斜体
[u]underline[/u] 下划线
[s]strikethrough[/s] 删除线
[sub]sub[/sub] 下标
[sup]sup[/sup] 上标
[00ff00]设置颜色[-] 设置显示颜色
[url=http://www.cnblogs.com/mrzivchu/][u]博客[/u][/url] 链接
例如设置颜色:
UILabel的Text内容为:[99ff00]n[-]gui: tools
展示效果则为:

这里主要说一下设置连接:
单单的在UILabel的Text里面写入这个是不够的:[url=http://www.cnblogs.com/mrzivchu/][u]博客[/u][/url] 链接
点击是不会产生效果的,我们还要为此UILabel添加一个Collider和一个脚本
脚本如下:
void OnClick()
{
UILabel lbl = GetComponent<UILabel>();
string url = lbl.GetUrlAtPosition(UICamera.lastWorldPosition);
Application.OpenURL(url);
}
脚本中的OnClick方法要想被触发,就必须要添加一个Collider,这个道理我想大家都懂得!
但要注意一点,假如UILabel的Text内容为:请点击[url=http://www.cnblogs.com/mrzivchu/]我的博客[/url]进入,欢迎大家来批评指正!
我只想点击《我的博客》四个字才去打开连接,而不是点击上面的任何字都可以打开连接,假如上面的文字尺寸是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表示统一的还是高级的
NGUI-使用UILabel呈现图片和不同格式的文字的更多相关文章
- jpg/png格式图片转eps格式的方法总结
jpg/png格式图片转eps格式的方法总结 转自http://blog.sina.com.cn/s/blog_5410e7b50101lme2.html 用latex写论文的筒子应该遇到这样的问题: ...
- UILabel添加图片之富文本的简单应用
若想对UILabel添加图片,那么就需要使用NSMutableAttributedString来定义先定义一个普通的label UILabel *lab = [[UILabel alloc]initW ...
- Android PNG透明图片转JPG格式背景变黑
Android PNG透明图片转JPG格式背景变黑 在上传图片是,需要把PNG格式转换成JPG格式的,但是在遇上透明背景时,转过来就变成黑色底图了! 原因是PNG支持透明图而 JPG格式不支持透明底 ...
- html5 图片转为base64格式异步上传
因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...
- windows+caffe(二)——图片转换为levedb格式
借鉴于langb2014的 http://blog.csdn.net/langb2014/article/details/50458520 与liukailun09的 http://blog.cs ...
- C#发送内置图片的html格式邮件的代码
将写内容过程经常用的内容段备份一次,下面的内容是关于C#发送内置图片的html格式邮件的内容,应该对码农们也有用处.MailMessage m = new MailMessage();m.Subjec ...
- Ubuntu 下将 svg 图片转换为其他格式 (如 png)
参考 How to Convert SVG Files to other Image Formats on Ubuntu 12.04/11.10 Ubuntu 下将 svg 图片转换为其他格式 (如 ...
- 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片
在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...
- python 使用pillow将图片转换为webp格式
1.webp格式 webp格式是谷歌开发的一种旨在加快图片加载速度的格式,将图片转为webp格式后,体积约为原来的2/3,这可以节省大量的服务器带宽,微信公众号文章里的图片就是这种格式的. 2.使用p ...
随机推荐
- 2017.9.28 web设计简单的购物车应用案例--session的简单应用
该购物过程是在session范围内完成的,需要使用session对象实现信息的共享 (1)购买“肉类”商品的页面 <%@ page language="java" impor ...
- 创建 XXXXXXXX 的配置节处理程序时出错: 请求失败
今天碰到这个错误,之前的程序在测试的时候都没有问题,同样的程序打包通过QQ传给其他人,在XP下测试也没有问题,我的Win7系统从QQ信箱下载压缩包,解压之后执行程序就会出问题,本来还是考虑自己程序是不 ...
- P2096 最佳旅游线路
最大字段和加贪心 算长了个见识吧 #include<iostream> #include<cstdio> #include<algorithm> using nam ...
- HTML中行内元素和块级元素的区别及转换
区别可以去找 “html文档流”相关的资料去学习,最主要的区别就是元素是占据一行还是挤在一行 转换的方式是用css的display属性 display:block; /*转换为块级*/display: ...
- Webpack4 学习笔记一初探Webpack
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 打包文件 支持JS模块化 模式: production(0配置默认), development(生产环境) 更详细的 ...
- MySQL时间戳、时间
MySQL中: now():获取当前时间:例:SELECT now(); // 结果:2018-07-03 13:40:14 unix_timestamp():将时间转换为时间戳:例: SELECT ...
- Linux下vim操作的一些使用技巧
以下均为个人在编程时对vim编辑器的一些心得,大神请指点,新手可以看过来 1.多文本编辑 vim -On/-on filename_1 … filename_n 如上所示,在要编辑的文件名前加上“-O ...
- python核心编程2 第五章 练习
5-2 运算符(a) 写一个函数,计算并返回两个数的乘积(b) 写一段代码调用这个函数,并显示它的结果 def product(x, y): return x * y if __name__ == ' ...
- linux下Tomcat配置提示权限不够解决办法
在终端输入命令 sudo chmod -R 777 /opt/Tomcat,那么Tomcat文件夹和它下面的所有子文件夹的属性都变成了777(读/写/执行权限)
- LeetCode978. 最长湍流子数组
问题:978. 最长湍流子数组 当 A 的子数组 A[i], A[i+1], ..., A[j] 满足下列条件时,我们称其为湍流子数组: 若 i <= k < j,当 k 为奇数时, A[ ...