NGUI 表情支持控件UIEmojiLabel,支持自适应多行多列

版权声明:本文为Jumbo原创文章,采用[知识共享 署名-非商业性使用-禁止演绎 4.0 国际 许可协议],转载前请保证理解此协议
原文出处:http://www.jianshu.com/p/a604b3f1fce3

NGUI出来已久,使用范围,场景越来越广。本身在高版本NGUI也支持表情,但存在一些缺陷,例如:支持文字和表情显示,但要求是必须文字和表情都需要在BMFont制作,对于文字量非常大的需求下,NGUI自带的文本混合表情,就显得力不从心。具体用过的同学,应该都知道的。

NGUI控件扩展,支持自适应多行多列表情
思路:
1、输入文本表情,在文本处理的时候,处理表情字串,记录位置
2、根据位置信息,得到文本在渲染时候的顶点位置,存在this.geometry.verts中
3、为什么位置要*4? 因为每个字串有4个顶点数据
4、把站位的emSpace ,位置赋给UISprite(显示表情的控件)
5、所有的表情,通过表情管理器动态统一管理,不显示时,回收

1、UIEmojiLabel

/*
 * Emoji Label @By Jumbo 2017/3/3
 * */

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using System;
using System.Text;

public class UIEmojiLabel : UILabel {
    
    private  char emSpace = '\u2001';
    private List<GameObject> mEmojiList = new List<GameObject>();

    public UIAtlas emAtlas = null;
    protected override void OnStart()
    {
        base.OnStart();

//表情统一管理器,只初始化一次
        UIEmojiWrapper.Instance.Init(emAtlas);
    }

    //自动转码
    public override void OnFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)
    {
        base.OnFill(verts, uvs, cols);


        //Test  测试代码,正式使用,这里注释掉,外面改变Label 的值
        string tx = "zhongz中国" + UIEmojiWrapper.Instance.GetConvertedString("1f61c") + UIEmojiWrapper.Instance.GetConvertedString("1f4fa") + UIEmojiWrapper.Instance.GetConvertedString("1f63f") + UIEmojiWrapper.Instance.GetConvertedString("1f607") + "国家回忆中心年内" + "sdfjsdlkj" + UIEmojiWrapper.Instance.GetConvertedString("1f63b") + "国家" + UIEmojiWrapper.Instance.GetConvertedString("1f467-1f3ff") + UIEmojiWrapper.Instance.GetConvertedString("1f450-1f4ff");// + "好行。天使good bye";
        text = tx;
///~测试代码
        StartCoroutine(SetUITextThatHasEmoji(text));
    }


    private struct PosStringTuple
    {
        public int pos;
        public string emoji;

        public PosStringTuple(int p, string s)
        {
            this.pos = p;
            this.emoji = s;
        }
    }


    public IEnumerator SetUITextThatHasEmoji(string inputString)
    {
        List<PosStringTuple> emojiReplacements = new List<PosStringTuple>();
        StringBuilder sb = new StringBuilder();

        //先回收
        UIEmojiWrapper.Instance.PushEmoji(ref mEmojiList);
        int i = 0;
        while (i < inputString.Length)
        {
            string singleChar = inputString.Substring(i, 1);
            string doubleChar = "";
            string fourChar = "";

            if (i < (inputString.Length - 1))
            {
                doubleChar = inputString.Substring(i, 2);
            }

            if (i < (inputString.Length - 3))
            {
                fourChar = inputString.Substring(i, 4);
            }

            if (UIEmojiWrapper.Instance.HasEmoji(fourChar))
            {
                // Check 64 bit emojis first
                sb.Append(emSpace);
                emojiReplacements.Add(new PosStringTuple(sb.Length - 1, fourChar));
                i += 4;
            }
            else if (UIEmojiWrapper.Instance.HasEmoji(doubleChar))
            {
                // Then check 32 bit emojis
                sb.Append(emSpace);
                emojiReplacements.Add(new PosStringTuple(sb.Length - 1, doubleChar));
                i += 2;
            }
            else if (UIEmojiWrapper.Instance.HasEmoji(singleChar))
            {
                // Finally check 16 bit emojis
                sb.Append(emSpace);
                emojiReplacements.Add(new PosStringTuple(sb.Length - 1, singleChar));
                i++;
            }
            else
            {
                sb.Append(inputString[i]);
                i++;
            }
        }

        // Set text
        this.text = sb.ToString();

        yield return null;

      
        for (int j = 0; j < emojiReplacements.Count; j++)
        {
            int emojiIndex = emojiReplacements[j].pos;
            //表情替换,计算位置,大小
            GameObject go = UIEmojiWrapper.Instance.PopEmoji();
            if (go != null)
            {
                UISprite spt = go.GetComponent<UISprite>();
                if (spt != null)
                {
                    string emoji = UIEmojiWrapper.Instance.GetEmoji(emojiReplacements[j].emoji);
                    if (!string.IsNullOrEmpty(emoji))
                    {
                        spt.name = emoji;
                        spt.spriteName = emoji;
                    }
//mPrintedSize 父类权限私有,可以改为子类可范围的保护的权限,渲染的字体大小变化,来改变UISprite的大小
                    spt.width = this.mPrintedSize;
                    spt.height = this.mPrintedSize;
                    spt.transform.parent = this.transform;
                    spt.transform.localScale = Vector3.one;
                    spt.transform.localPosition = new Vector3(this.geometry.verts[emojiIndex * 4].x + spt.width / 2, this.geometry.verts[emojiIndex * 4].y + spt.height / 2);
                }

                mEmojiList.Add(go);
            }
        }
}

}

2、UIEmojiLabelInspector 编辑器监视

/*
 * Emoji Label Inspector @By Jumbo 2017/3/3
 * */

#if !UNITY_3_5 && !UNITY_FLASH
#define DYNAMIC_FONT
#endif

using UnityEngine;
using UnityEditor;

/// <summary>
/// Inspector class used to edit UILabels.
/// </summary>

[CanEditMultipleObjects]
#if UNITY_3_5
[CustomEditor(typeof(UILabel))]
#else
[CustomEditor(typeof(UILabel), true)]
#endif
public class UIEmojiLabelInspector : UILabelInspector
{
    
        
    /// <summary>
    /// Draw the label's properties.
    /// </summary>

    protected override bool ShouldDrawProperties ()
    {
        bool isValid = base.ShouldDrawProperties();

        EditorGUI.BeginDisabledGroup(!isValid);
        NGUIEditorTools.DrawProperty("Atlas", serializedObject, "emAtlas");//表情所在的图集Atlas
        EditorGUI.EndDisabledGroup();
        return isValid;
    }
}

3、UIEmojiWrapper 表情统一管理器

/*
 * Emoji Wrapper @By Jumbo 2017/3/3
 * */

using System;
using System.Collections.Generic;
using System.Text;
using UnityEngine;

class UIEmojiWrapper
{
    private bool hasAtlas = false;
    private UIAtlas mAtlas;
    private GameObject emojiPrefab;
    private Dictionary<string, string> emojiName = new Dictionary<string, string>();
    private Queue<GameObject> freeSprite = new Queue<GameObject>();
    
    private List<GameObject> usedSprite = new List<GameObject>();

    private Vector3 OutOffScreen = new Vector3(10000f, 10000f, 10000f);

    private static UIEmojiWrapper sInstance;
    public static UIEmojiWrapper Instance
    {
        get
        {
            if(sInstance == null)
            {
                sInstance = new UIEmojiWrapper();
            }
            
            return sInstance;
        }
    }
    
    public void Init(UIAtlas atlas)
    {
        if (!hasAtlas)
        {
            if (atlas == null)
            {
                LogUtil.LogError(WXLogTag.LogTag_UI, "[UIEmojiWrapper Atlas is null]");
                return;
            }
            mAtlas = atlas;
            //预分配
            for (int i = 0, cnt = mAtlas.spriteList.Count; i < cnt; i++)
            {
                emojiName.Add(GetConvertedString(mAtlas.spriteList[i].name), mAtlas.spriteList[i].name);
            }

            emojiPrefab = new GameObject();
            UISprite spt = emojiPrefab.AddComponent<UISprite>();
            if (spt != null)
            {
                spt.transform.localPosition = OutOffScreen;
                spt.name = "emojiPrefab";

            }

            hasAtlas = true;
        }
        
    }

    public string GetConvertedString(string inputString)
    {
        string[] converted = inputString.Split('-');
        for (int j = 0; j < converted.Length; j++)
        {
            converted[j] = char.ConvertFromUtf32(Convert.ToInt32(converted[j], 16));
        }
        return string.Join(string.Empty, converted);
    }

    public string GetEmoji(string encode)
    {
        string em;

        if(emojiName.TryGetValue(encode, out em))
        {
            return em;
        }

        return null;
    }
    public bool HasEmoji(string key)
    {
        return emojiName.ContainsKey(key);
    }

     public void OnPostFill (UIWidget widget, int bufferOffset, BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)
     {
         if (widget != null)
         {
             if(!widget.isVisible)
             {
                 UISprite spt = widget as UISprite;
                 if (spt != null)
                 {
                     PushEmoji(spt.gameObject);
                 }
             }
         }
     }

    public GameObject PopEmoji()
    {
        if (freeSprite.Count <= 0)
        {
            if (emojiPrefab == null)
                return null;

            GameObject tran = GameObject.Instantiate(emojiPrefab) as GameObject;
            UISprite spt = tran.GetComponent<UISprite>();
            if (spt != null)
            {
                spt.atlas = mAtlas;
                spt.hideIfOffScreen = true;
                spt.onPostFill += OnPostFill;
            }
                

            freeSprite.Enqueue(tran);
        }

        GameObject sptRet = freeSprite.Dequeue();
        
        if (sptRet != null)
        {
            usedSprite.Add(sptRet);
        }

        return sptRet;

    }


    public void PushEmoji(GameObject spt)
    {
        spt.transform.localPosition = OutOffScreen;
        spt.transform.parent = null;
        freeSprite.Enqueue(spt);
    }

    public void PushEmoji (ref List<GameObject> list)
    {
        for (int i = 0, cnt = list.Count; i < cnt; i++)
        {
            PushEmoji(list[i]);
        }

        list.Clear();
    }
}

有更好的方案,不吝赐教~~

【原创】转摘请保留原文链接http://www.jianshu.com/p/a604b3f1fce3
Demo效果:

文本表情混排效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • 1、在vm菜单栏选择Player->管理->安装VMware Tools 2、终端运行不带参数的mount命令检查...
    冰镇果汁加点糖阅读 247评论 0 0
  • 星期天我们很早起床去新昌。大巴车上我们表演了很多节目。节目种类有很多很多,有古诗有歌曲。我们坐在大巴车上互...
    终点是你阅读 508评论 0 0
  • 上班这些年以来,为了管纪律,对于学生的奖惩也有很多了,现在看过去,发现有成功的,也有失败的。成功源于随心,失败也源...
    叶辉阅读 250评论 4 0
  • 感恩天地万物滋养生命,感恩空气,水,食物滋养身体健康,感恩历代宗亲传承血脉,感恩父母养育之恩,感恩兄弟姐妹互帮互助...
    银菠萝蜜阅读 81评论 0 0