NGUI的图文混排

NGUI的图文混排功能(踩坑记录)


鄙人思路

首先在网上找到了好几种思路(个人也是新手,勿喷):

  • 1.使用NGUI自带的BBCode功能,通过创建Bitmap字体实现。
  • 2.使用一个Lable加上多个图片实现。
  • 3.使用多个Lable多个图片实现。
  • 4.使用两个Lable,其中一个为带BBCode字体的Lable实现。
  • 5.使用一个Lable,一个Texture实现(推荐)。

方案一:用NGUI自带的BBCode功能,通过创建Bitmap字体实现

主要是通过NGUI自带的Font Maker 进行Bitmap的字体的创建,选择好制作完毕的表情包图集,点击Creat the Font,通过设置表情的依赖文字即可显示表情,缺点在于使用大量的中文的时候非常蛋疼,个别中文的话可以自己写入字体的Custom中。
Font Maker
这里写图片描述这里写图片描述
具体可以借鉴雨松MOMO大神的文章:
https://www.xuanyusong.com/archives/2908( 雨松MOMO 2014年07月03日 于 雨松MOMO程序研究院 发表)


方案二:使用一个Lable加上多个图片实现。

  • 首先把所有文字输入都某个函数,识别出第一个图片信息的字符串,把这个包含图片信息的字符串以及前面的文字裁剪下来,和裁剪以后的文字形成两部分。
  • 把裁剪的前面部分(包含图片信息)分析出图片信息,各种计算,最后得到图片的position,生成gameObject并摆放好。保存各种信息。图片部分用空格留出位置,形成新的字符串,和裁剪的第二部分的文字组合成新文字。
  • 输入到1里的那个函数。递归。
  • 最终一次过输出所有文字。
    这里写图片描述
    这里写图片描述这里写图片描述
    具体可以借鉴chrisfxs大神的文章:
    https://blog.csdn.net/chrisfxs/article/details/51259295
    Demo链接:
    http://pan.baidu.com/s/1hs1LzYs

方案三:使用多个Lable多个图片实现。
这里写图片描述
这里写图片描述
没找到原文链接,附上Demo:
https://pan.baidu.com/s/1qranGDEZC9tiwisUKw30_g


方案四:使用两个Lable,其中一个为带BBCode字体的Lable实现。

此方案仅为个人提出的方案,暂未实现,因为觉得方案五更为实用,勿喷!


方案四:使用一个Lable,一个Texture实现。

Oyyming大神文章:https://blog.csdn.net/u014051620/article/details/78029035

大神前言
众所周知,UILabel的静态字体是支持表情的,不过需要将表情与文字打包到一个图集中,并且因为受限于静态字体,几乎不适用于中文日文等文字的图文混排。

这几天因为项目需要研究了一下动态字体中使用表情的解决方案,不过好像并没有搜到比较好的方案,最终研究了一下NGUI中的源码,决定采取类似于UIInput生成光标和高亮的做法。

原理
原理基本上就是在UILabel每次处理文本的ProcessText方法中判断当前文本是否含有表情符号,如果有,就在UILabel下添加一个UITexture,并将计算好的顶点坐标和UV坐标写入UITexture中;另外还需要相应的修改NGUIText中计算顶点坐标和UV坐标的类,确保UILabel中文字的坐标空出了表情的位置。

直观一点描述就是,UILabel中只显示文字,UITexture中显示表情,这两个控件叠在一起就形成了图文混排的效果。

从目前达到的效果来看还算不错,需要显示表情时会动态创建UITexture,并不会带来过多的内存开销,另外我给UILabel加了useEmoji这个开关来控制是否检查表情,默认为false,如果某些UILabel需要显示表情,就给设成true就好,当然也可以在代码中修改。

另外我又给UILabel加了emojiAlignment这个属性,可以控制表情和文字的垂直对齐方式,默认的选项是Top,即表情和文字的上边缘对齐;Center则垂直居中对齐;当然比较常见的应该是Bottom对齐,即下边缘对齐。
这里写图片描述这里写图片描述

最后放上Github地址 :
https://github.com/OYYMING/EmojiLabel


第一次写博客,主要是为了记录下自己踩得坑,虽然记录的都是诸位大神的文章,也希望大家少踩一点坑吧。
如有侵权,请及时联系!

猜你喜欢

转载自blog.csdn.net/qq_39776199/article/details/81386009