前言

眾所周知，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對齊，即下邊緣對齊。

使用

使用起來也比較方便，只需要實現你自己的EmojiProvider，並賦值給UILabel就可以了。

public abstract class EmojiProvider {
    public delegate bool EmojiFilter(string text, EmojiVO symbol);
    public EmojiFilter emojiFilter;


    public virtual Texture mainTexture {
        get {
            throw new System.NotImplementedException();
        }
    }

    public
 
 abstract bool HasEmojis(string text);

    public BMSymbol MatchEmoji(string text, int offset = 0)
    {
        if (string.IsNullOrEmpty(text))
            return null;

        return MatchEmoji(text, offset, text.Length - offset);
    }

    public abstract BMSymbol MatchEmoji(string text, int offset, int length);

    public abstract List<EmojiVO> GetAllEmojis ();
}

下面是我實現的預設的EmojiProvider，邏輯很簡單，就是在初始化的時候從指定圖集中讀取所有圖片，並將[#圖片名]作為表情匹配的關鍵字，並且其中加了快取匹配結果的處理，因為NGUIText中預設匹配表情的處理有點腦殘，幾乎每一個字都會遍歷一遍所有圖片進行匹配，這點我懶得改了，直接快取匹配結果也一樣。

public class DefaultEmojiProvider : EmojiProvider
{
    string mAtlasPath = "";
    UIAtlas mAtlas;
    List<EmojiVO> mEmojis;
    Dictionary<int, EmojiVO> mEmojiMatchCache;
    string mLastMatchText = null;
    static DefaultEmojiProvider mInstance;
    public static DefaultEmojiProvider instance {
        get {
            if (mInstance == null) {
                mInstance = new DefaultEmojiProvider();
            }
            return mInstance;
        }
    }

    private DefaultEmojiProvider () {
        mAtlasPath = "Assets" + Path.DirectorySeparatorChar + "Atlases" + Path.DirectorySeparatorChar + "Emoji.prefab";
        mAtlas = AssetDatabase.LoadAssetAtPath<UIAtlas>(mAtlasPath);

        mEmojis = new List<EmojiVO>();
        mEmojiMatchCache = new Dictionary<int, EmojiVO>();
        LoadEmojis();
    }

    private void LoadEmojis() {
        if (mAtlas == null || Utils.IsNullOrEmpty(mAtlas.spriteList))
            return;

        var spriteList = mAtlas.spriteList;
        for (int i = 0; i < spriteList.Count; i++)
        {
            BMSymbol sym = new BMSymbol() { sequence = "[#" + spriteList[i].name + "]", spriteName = spriteList[i].name };
            mEmojis.Add(new EmojiVO(sym));
        }
    }
    // public override void 
    public override List<EmojiVO> GetAllEmojis()
    {
        return mEmojis;
    }

    public virtual void CheckEmojiMatches (string text) {
        mEmojiMatchCache.Clear();

        var emojis = GetAllEmojis();
        if (Utils.IsNullOrEmpty(emojis))
            return;

        string regexStr = "(";
        regexStr += Regex.Escape(emojis[0].symbol.sequence);
        for (int i = 1; i < emojis.Count; i++)
        {
            regexStr += "|" + Regex.Escape(emojis[i].symbol.sequence);
        }
        regexStr += ")";
        Regex regex = new Regex(regexStr);
        var match = regex.Match(text);
        while (match.Success){
            var emoji = emojis.Find(e => string.Equals(@e.symbol.sequence, @match.Value));
            if (emoji != null && emoji.symbol != null)
                mEmojiMatchCache.Add(match.Index, emoji);

            match = match.NextMatch();
        }
    }

    public override BMSymbol MatchEmoji(string text, int offset, int length)
    {
        if (string.IsNullOrEmpty(text) || length <= 0)
            return null;

        if (!string.Equals(mLastMatchText, text)) {
            mLastMatchText = text;
            CheckEmojiMatches(text);
        }

         if (!mEmojiMatchCache.ContainsKey(offset))
            return null;

        var emoji = mEmojiMatchCache[offset];
        if (length < emoji.symbol.sequence.Length)
            return null;

        if (emojiFilter != null && !emojiFilter (text, emoji)) {
            return null;
        }

        if (emoji.symbol.Validate(mAtlas))
            return emoji.symbol;

        return null;
    }

    public override bool HasEmojis(string text)
    {
        return !Utils.IsNullOrEmpty(mEmojis);
    }

    public override Texture mainTexture {
        get {
            if (mAtlas == null)
                return null;

            return mAtlas.texture;
        }
    }
}

這是EmojiProvider的賦值

    EmojiProvider mEmojiProvider;
    public EmojiProvider emojiProvider {
        get {
            if (!useEmojis)
                return null;

            if (mEmojiProvider == null) return DefaultEmojiProvider.instance;
            return mEmojiProvider;
        }
        set {
            if (!useEmojis)
                return;
            mEmojiProvider = value;
        }
    }

未解決的問題

這個專案基本可以滿足普通需求，但是暫時不支援多張貼圖，或者說多張圖集。

一張貼圖的大小通常是1024*1024，小圖足夠放個幾百個了，但是如果有幾個大圖，比如250*250大小的就只夠放16張，只支援一張貼圖顯然不夠。這個問題暫時還沒有解決，留待日後好了。

另外編輯模式下，更新表情的圖集會導致UV座標混亂，切換一下useEmoji，或者執行一下游戲就好了。

上兩張效果圖：

PS:我使用的NGUI版本是3.8.2，其中比較重要的修改是UILabel，NGUIText，UILabelInspector這三個檔案。