NGUI制作Word图文混排效果

原创 2015年07月10日 10:22:53

先上个自己做的例子,第一次写博客,先写个简单的例子吧,都是自己做的小demo,希望大家不要喷呐!


这个效果还是很简单滴,关键在于用两个UILabel来显示文字内容,其中一个UILabel与图片放于同一高度上。下面来说一下UI制作过程,本次使用的是NGUI v3.8.2:

  1. 绘制基本组件:创建一个scroll view和scroll bar做出滚动视图的区域;在scroll view内添加一个UITable,用来存放图片和文字,位置调到scroll view的左上角合适的位置,其中Columns为1。
  2. 添加图片级文字组件:在UITable下创建一个空物体,这里取名为Top,并在此下面添加一个UITexture和一个UILabel,UILabel取名为Label1,两个的高度要等同,处于同一高度上;添加第二个UILabel放在UITable下,也就是与Top处于同一级,并取名Label2。

  3. 设置两个文字的关键参数:Label1的Overflow设置成ClampContent固定大小,Pivot设置成左上,使文字的排列从左上角开始;Label2的宽度设置成scroll view的宽度,再将Overflow设置成ResizeHeight,使Label的大小自适应高度,Pivot设置成左上。

  4. 关键代码:把需要显示的所有文字内容全部放进Label1中,再用UILabel. processedText获取Label1已经显示的部分内容,最后用string. Substring()方法把最后的内容放进Label2中,最后运行工程看效果,大功告成!

以下附上参考代码:

public class TextWrap : MonoBehaviour {
    public UILabel label1;
    public UILabel label2;
    public UITable table;

	// Use this for initialization
	void Start () {
        string str = "2013年Unity全球用户已经超过150万,全新版本的Unity4.0引擎已经能够支持包括MAC OS X、安卓、IOS、Windows等在内的十个平台发布。越来越多的游戏厂商和应用软件开发工作室在使用Unity研发游戏和创造梦想。Unity引擎覆盖了越来越多的国家,而亚洲一直是Unity发展的战略重点。为了促进亚洲地区的游戏产业与文化创意产业的发展,推动网络和手机游戏多元化的进程,Unity将在中国、日本和韩国同时举办“2013Unity亚洲开发者大会“,超过十位来自世界各地的优秀的Unity开发工程师,将在亚洲的三个国家巡回演讲。这是Unity开发者的年度盛会,代表着全球Unity开发的最高水准和最高质量的技术交流。";
        label1.text = str;
        string str2 = label1.processedText;//第一个Label上已经显示出来的文字
        label2.text = str.Substring(str2.Length+1);//剩余内容填入第二个Label上
    }
	
}

第一次写技术博客,虽不是什么很牛逼的例子,只是自己随便写写的一个小例子,如有不妥的地方请大家提出,以便日后改进。
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

word图文混排

  • 2012-11-10 11:07
  • 194KB
  • 下载

Unity插件之NGUI学习(5)—— 创建Label图文混排及文字点击

创建一个新的Scene,并按 Unity插件之NGUI学习(2)创建UI Root。 准备工作,制作Font,现在Project窗口创建一个Font文件夹,然后从系统自带字体文件夹中选择自己需要的字体...

WORD图文混排应用.ppt

  • 2010-12-22 12:56
  • 472KB
  • 下载

【Unity3D游戏开发】基于NGUI的表情图文混排解决方案 (二二)

使用unity3d也有两年时间了,最近比较闲,有功夫梳理一下去年一年来学到以及用到的知识,分享给大家,顺便方便自己查阅。如有错误以及不当的地方,欢迎各位指正。谢谢。     去年五月份的时候,刚...

WORD图文混排

  • 2011-11-23 17:41
  • 10.16MB
  • 下载

unity NGUI图文混排

游戏中需要制作聊天功能,很可能会使用到图文混排,这里介绍一下基于NGUI的一种做法。 步骤1:工程中得先导入一个中文字体库,ttf格式,如果是ttc格式的,强行改成ttf格式即可。如果你已经导入过了,...

NGUI的图文混排

怎么在NGUI里实现图文的混排的研究和小结
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)