Android富文本处理

先上效果图

效果图.gif

一、初识TextView富文本

接触Android以来，都不知道TextView能完成的事情原来不止于显示文字这么简单。一个TextView能完成的事情意想不到。这次接到导师布置的任务需求一句话概括就是完成类似美拍社区中，我的关注模块中列表里面酷酷的文本显示。

Span的基本使用

XxxSpan span = new XxxSpan();
SpannableString spannableString  = new SpannableString("hello world");
spannableString.setSpan(span,0,spannableString.length/2,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);

上面的四行代码是Span最基本的使用，可以解决一些简单的需求。例如要设置某些文字为某种颜色，区别于其他文字就是new一个ForegroundSpan并且在构造函数中传入相应颜色。

具体需求

要求对一段服务器下发的文本以及附加的文本信息对文本的显示进行处理。

• 以#开头#结尾的标记着是一个话题。
• 以@开头空格结尾的为@某个人的ID。
• 以http://开头的url根据服务器下发的附加文本信息将其替换为自定义的样式。
• 以上三点要求点击的时候要实现二态的效果。

思路分析

理清思路，要实现功能，大致可以分为如下的两个个大的方面：

• 一是处理View层面。对于文本样式、以及点击的时候的两种状态的变化属于界面上的变化，在TextView上面要做成酷炫的界面效果，就得依赖于Span。
• 二是数据的处理，处理后在界面呈现。

二、面向接口的尝试。

在处理界面的时候，样式的实现就像上面Span的基本使用一样，比较简单。对于我，难到我的地方在于点击的时候，两种状态的变换 ，尝试了两种方法。

方法一：多个Span的叠加处理

因为Span不会有排他性，所以在开始自己的思路很容易就想到了，在原本已经设置好的各个样式的基础之上添加一个ClickableSpan，继承LinkMovementMethod并重写onTouchEvent。在onTouchEvent中处理事件，当ACTION_DOWN的事件中添加一个背景样式，ACTION_UP和ACTION_CANCEL的事件中移除添加的背景样式。这样就可以实现点击时两种状态效果的切换。

上述的方法，可以达到相应的效果。但是考虑代码的扩展性，这样做是很不好的。每当增加扩展一种样式都要去变动onTouchEvent方法中代码，无形中可能会造成后期更改导致之前已经通过测试的代码出现bug。违反了开闭原则。

方法二：定义接口，让Span完成一些该完成的事情

在接触自定义View的时候，知道自定义View最重要的三点就是：绘制、布局、事件逻辑处理。而这里要完成的富文本不会涉及到布局。所以从绘制和事件处理两方面考虑，会得到一些启发。当ACTION_DOWN事件的时候，改变一下Span的背景颜色，并通知重绘。ACTION_UP和ACTION_CANCEL将Span的背景颜色更改回原来的颜色，并通知重绘。这种做法就能够达到两种状态的切换。

进而可以抽象出一个可点击Span都要遵循的规范的接口：

public interface ITouchSpan {
    boolean onTouchDown(TextView widget);
    boolean onTouchUp(TextView widget);
    boolean onTouchCancel(TextView widget);
}

自定义的Span实现改接口之后，override上面三个方法，增加一些自己的逻辑，在调用TextView的invalidate()方法就能达到相应的点击效果。

在LinkMovementMethod的onTouchEvent方法中可以这样处理

 ITouchSpan[] link = buffer.getSpans(off, off, ITouchSpan.class);
        if (action == MotionEvent.ACTION_DOWN) {
            if (link.length != 0) {
                mTouchSpan = link[0];
                mTouchSpan.onTouchDown(widget);
            }
        } else if (action == MotionEvent.ACTION_UP) {
            if (mTouchSpan != null) {
                mTouchSpan.onTouchUp(widget);
                mTouchSpan = null;
            }

        } else if (action == MotionEvent.ACTION_CANCEL) {
            if (mTouchSpan != null) {
                mTouchSpan.onTouchCancel(widget);
                mTouchSpan = null;
            }
        }

在onTouchEvent()方法中只需要对接口的引用进行处理，而不涉及具体的实现。当我们需要扩展一个新的样式，并要求该样式可点击，点击的时候要有某种特定的效果。我们只扩展一个类实现ITouchSpan，在相应的方法中实现即可扩展。好处在于增加一种新的样式并不需要太多的更改onTouchEvent()的方法，只需要增加一个样式类并实现ITouchSpan接口就可以达到效果。

三、数据处理的抽离

数据逻辑的处理大致分为三个部分：

• 正则匹配服务器下发的一段文本信息。记录下三种样式的起始位置。因为每种样式的个数是不确定的，所以要用一个列表进行存储样式的起始位置。
• 根据位置列表，设置相应的Span
• 最后一个是一个小细节。根据icon图标的url地址去下载相应的icon图标。

刚开始处理数据主要是在Adapter中定义三个方法，onBindViewHolder调用这三个方法分别处理三种样式。类似第二点，每当新增一个样式的时候，都需要在Adapter中增加一个方法，这样做就会使得Adapter这个类要做的事情越来越多，功能也越来越复杂。不符合单一职责原则。

换一种方式思考，样式数据逻辑处理交由某个类帮忙处理，Adapter只需要调用该类对象的方法即可 这个思路就可以做到较好的将adapter里面复杂且冗余的数据处理进行抽离。

具体的解决方法：

定义一个接口，规定了数据绑定的方法。每当新增加一个样式，要处理该样式的数据，只需要实现改接口，就能够处理数据逻辑。

public interface IBindStyleListStrategy {
    void bindStyleList(TextView textView, Spannable text, Comment comment, Context context);
}

Adapter中根据相应的策略的具体实现类去绑定具体的样式。

 //根据样式的类型设置样式
        for (int i = 0; i < BindStyleListStrategyFactory.STYLE_COUNT; i++) {
            iBindStyleListStrategy = BindStyleListStrategyFactory.getBindStyleList(i);
            if (iBindStyleListStrategy != null) {
                //绑定样式
                iBindStyleListStrategy.bindStyleList(holder.textView, text, comment, holder.itemView.getContext());
            }
        }
        //显示数据
        holder.textView.setText(text);

BindStyleListStrategyFactory的具体实现

public class BindStyleListStrategyFactory {
    //样式种类个数
    public static final int STYLE_COUNT = 3;
    //话题类型
    public static final int TOPIC_TYPE = 0;
    //URL链接类型
    public static final int URL_TYPE = 1;
    //AtUser类型
    public static final int AT_USER_TYPE = 2;
    //返回具体实现类
    public static IBindStyleListStrategy getBindStyleList(int type) {
        switch (type) {
            case TOPIC_TYPE:
                return new BindTopicListStrategy();
            case AT_USER_TYPE:
                return new BindAtUserListStrategy();
            case URL_TYPE:
                return new BindLinkUrlListStrategy();
        }
        return null;
    }
}

上述的解决办法，在增加一个样式类型的时候。只需要定义一个类实现IBindStyleListStrategy接口并实现对应的方法，在BindStyleListStrategyFactory中修改样式种类个数，以及增加返回具体的类型的对象即可扩展样式，而不需要每增加一个样式类型改动adapter中的代码。

四、代码的迭代与收获总结

细节处理总结

1. 在某些细节处理，可能刚开始做的没有很到位。例如刚开始的点击事件处理的代码

 SpanUtils.setForegroundColorSpan(text, color, atUser.getStart(), atUser.getEnd());
            SpanUtils.setClickSpan(text, atUser.getStart(), atUser.getEnd(), atUser,
                    new SpanUtils.SpanClickListener() {
                        @Override
                        public void onClick(Object o) {
                            AtUser atUser = (AtUser) o;
                            Intent intent = new Intent(mActivity, SecondActivity.class);
                            intent.putExtra("text", atUser.getUrl());
                            mActivity.startActivity(intent);
                        }
                    });
        }

上面的代码每当设置一个Span就要new一个回调接口的对象，而其实new出来的对象做的事情都是类似的，权衡之下，如果将事件的处理放到Span内部并结合上面的onTouchUp(TextView widget);方法中处理，可以少写很多重复的代码。

2. 图片的加载

   在处理链接样式的时候，需要根据url地址去加载网络上面的图标。我学习了Glide的基本使用的方法，在Glide提供的回调接口中获取图片的Bitmap对象。得到Bitmap之后，将其设置给相应的Span并通知TextView重绘。刚开始处理的时候，每加载一张图片就重绘一次。如果采取这种方式，会导致TextView被重绘多次，性能不够好。更好的方式是全部的图片加载完成之后，再进行一次重绘。解决方法如下：

        /**
        * 检查一个TextView中所有的链接的Icon图标是否全部加载完成
        *
        * @param linkUrlSpanList Span列表
        * @return 返回是否全部加载完成
        */
    private boolean checkAllLoadSuccess(List<LinkUrlSpan> linkUrlSpanList) {
           boolean loadAll = true;
           for (LinkUrlSpan linkUrlSpan : linkUrlSpanList) {
               loadAll = linkUrlSpan.isLoadSuccess() && loadAll;
           }
           return loadAll;
       }
   

总结

通过这次Demo的练习，对接口的使用，设计模式两个基本原则：开闭原则、单一职责原则，简单工厂模式、策略模式有了更深的理解。其次是学习了Glide的基本使用。在自定义Span实现链接的样式的那一块，在学习自定义view的时候有一定的了解，所以直接在draw方法中进行绘制，完成较快。