【Unity3D / UI】Unity中的Rich Text的使用和封装 —— Markup扩展

Unity 中的 Rich Text

Unity中的富文本格式，通过类似html的标签语言来实现，支持常见的加粗，倾斜，颜色等，可以应用于GUI、UGUI和Debug日志输出。

Rich Text 的使用

原文： We are definitely not amused
显示： We are definitely not amused

具体使用方法大多数人应该都已经知道了，详见官方API文档。[UnityAPI - Rich Text]

如上所示，如果文本量很大，并且内容格式很复杂的情况下，原文的可阅读性会变得很差，而且，标签的配对层层嵌套后，很容易发生错误，虽然不是十分必要也不是什么非常强大的功能，但我们还是来尝试对它进行一下封装，让富文本标签用起来更简单一点。

代码实现

• MarkupAdapter.cs
  标签装配器，用于给指定内容拼接指定的标签。

    public class MarkupAdapter
    {
        protected static StringBuilder StringBuilder = new StringBuilder();

        public string LeftMark { get; }
        public string RightMark { get; }

        public MarkupAdapter(string leftMark, string rightMark)
        {
            LeftMark = leftMark;
            RightMark = rightMark;
        }

        public string ToString(string str)
        {
            StringBuilder.Remove(0, StringBuilder.Length);
            StringBuilder.Append(LeftMark);
            StringBuilder.Append(str);
            StringBuilder.Append(RightMark);
            return StringBuilder.ToString();
        }
    }

• Markup.cs
  为了使用方便，将所有接口都写在 Markup 类中，但不同的标签实现方式有所区别，写在一起代码比较冗长，故使用partial将代码分成多个文件。

    public static partial class Markup 
    {
        public static string Create(string str, params MarkupAdapter[] markups) 
        {
            for (var i = 0; i < markups.Length; i++)
            {
                var markup = markups[i];
                str = markup.ToString(str);
            }
            return str;
        }
    }

• MarkupStyle.cs
  样式标签相关的接口：

    public static partial class Markup
    {
        public static MarkupAdapter Blod = new MarkupAdapter("", "");

        public static MarkupAdapter Italic = new MarkupAdapter("", "");

        public static MarkupAdapter Size(int size)
        {
            size = size < 1 ? 1 : size;
            return new MarkupAdapter(" + size + ">", "");
        }

        public static MarkupAdapter Material(int index) 
        {
            index = index < 0 ? 0 : index;
            return new MarkupAdapter(" + index + ">", "");
        }

        public static MarkupAdapter Quad(int materialIndex, int size, float x, float y, float width, float height)
        {
            materialIndex = materialIndex < 0 ? 0 : materialIndex;
            return new MarkupAdapter(
                "" size=" + size +
                " x=" + x +
                " y=" + y +
                " width=" + width +
                " height=" + height + ">",
                "");
        }

        public static MarkupAdapter Quad(string name, int size, float x, float y, float width, float height)
        {
            size = size < 0 ? 0 : size;
            return new MarkupAdapter(
                "" size=" + size +
                " x=" + x +
                " y=" + y +
                " width=" + width +
                " height=" + height + ">",
                "");
        }
    }

• MarkupColor.cs
  颜色标签相关的接口：

    public static partial class Markup
    {
        public static MarkupAdapter Red = Color(new Color(1f, 0f, 0f, 1f));
        public static MarkupAdapter Green = Color(new Color(0f, 1f, 0f, 1f));
        public static MrkupAdapter Blue = Color(new Color(0f, 0f, 1f, 1f));
        public static MarkupAdapter White = Color(new Color(1f, 1f, 1f, 1f));
        public static MarkupAdapter Black = Color(new Color(0f, 0f, 0f, 1f));
        public static MarkupAdapter Yellow = Color(new Color(1f, 0.9215686f, 0.01568628f, 1f));
        public static MarkupAdapter Cyan = Color(new Color(0.0f, 1f, 1f, 1f));
        public static MarkupAdapter Magenta = Color(new Color(1f, 0.0f, 1f, 1f));
        public static MarkupAdapter Gray = Color(new Color(0.5f, 0.5f, 0.5f, 1f));
        public static MarkupAdapter Clear = Color(new Color(0.0f, 0.0f, 0.0f, 0.0f));

        public static MarkupAdapter Color(Color color)
        {
            return new MarkupAdapter(" + ColorToMarkup(color) + ">", "");
        }

        private static string ColorToMarkup(Color color)
        {
            var r = (int) (color.r*255);
            var g = (int) (color.g*255);
            var b = (int) (color.b*255);
            var a = (int) (color.a*255);
            return "#" + r.ToString("x2") + g.ToString("x2") + b.ToString("x2") + a.ToString("x2");
        }
    }

• MarkupExtension.cs
  为了使用方便，再对string做一些扩展。

    public static class MarkupExtension
    {
        public static string ToMarkup(this string str, params MarkupAdapter[] markups)
        {
            return Markup.Create(str, markups);
        }

        public static string ToMarkup(this string str, Color color)
        {
            return Markup.Create(str, Markup.Color(color));
        }

        public static string ToMarkup(this object obj, params MarkupAdapter[] markups) {
            return Markup.Create(obj.ToString(), markups);
        }

        public static string ToMarkup(this object obj, Color color) {
            return Markup.Create(obj.ToString(), Markup.Color(color));
        }
    }

使用方法

由于代码很简单代码量也很少，就不做过多说明了，直接上使用效果。
写一段测试代码，执行效果如下：

对比一下原文；
[Markup 测试1] 复合样式 白色 斜体 加粗
[Markup 测试2] 复合样式 洋红 斜体 加粗

测试代码如下：

    public class MarkupTest : MonoBehaviour
    {
        private void Start()
        {
            // 方式1
            var str1 = "[Markup 测试1]"
                       + " 复合样式".ToMarkup(Markup.Green, Markup.Blod, Markup.Size(15))
                       + " 白色".ToMarkup(Color.white)
                       + " 斜体".ToMarkup(Markup.Italic)
                       + " 加粗".ToMarkup(Markup.Blod);
            Debug.Log(str1);

            // 方式2
            var str2 = "[Markup 测试2]"
                       + Markup.Create(" 复合样式", Markup.Yellow, Markup.Italic, Markup.Size(12))
                       + Markup.Create(" 洋红", Markup.Magenta)
                       + Markup.Create(" 斜体", Markup.Italic)
                       + Markup.Create(" 加粗", Markup.Blod, Markup.Size(14));
            Debug.Log(str2);
        }
    }

这样使用起来，要写的代码其实并不短，但是，比较清晰明了，不容易出错，格式修改起来也容易了很多，比直接手写标签要直观很多。

后续

Unity支持的标签格式比较少，实际开发中还缺少了很多样式和功能，比如下划线，删除线，脚注，超链接等等，看情况以后可能会专门写几篇相关的内容。