项目地址：https://github.com/razerdp/FriendCircle
一起撸个朋友圈吧这是本文所处文集，所有更新都会在这个文集里面哦，欢迎关注

上篇链接：http://www.jianshu.com/p/80d7f34c5f08
下篇链接：http://www.jianshu.com/p/a2cdf81359fc

事实上，这个控件在很早以前我就已经上传到git而且写了相关文文章了

但是，朋友圈的点赞列表并没有行数要求这么变态，于是本文就原控件上进行进一步改进。

效果图（电脑录制，文字偏小了，在手机上是正常）：

效果图

开工之前，依然是常规的方案思考：

朋友圈的点赞列表我们也经常看到，在实现上，目前我想到的方案有：

• FlowLayout+n个TextView
• TextView+Span

理论上来说，用第一个方案实现最为简单，但别忘了我们的朋友圈是一个List，在性能上来说，方案一并不推荐。于是我采用了方案二。

方案确定了，就可以着手开工，依然从attrs入手，初步定义以下属性，确定我们的大致雏形：

  <!--显示点赞控件-->
    <declare-styleable name="PraiseWidget">
        <!--点击的背景色，默认全透明-->
        <attr name="click_bg_color" format="color"/>
        <!--文字颜色，默认蓝-->
        <attr name="font_color"  format="color"/>
        <!--文字大小，默认14sp-->
        <attr name="font_size" format="dimension"/>
        <!--第一个点赞的图标，默认一个蓝色的心心-->
        <attr name="like_icon" format="reference"/>
    </declare-styleable>

构造器里我们需要设置这两个参数：

//如果不设置，clickableSpan不能响应点击事件
this.setMovementMethod(LinkMovementMethod.getInstance());
this.setHighlightColor(clickBg);

第一个注释已经写了，第二个则是设置点击时的颜色。

接下来就是定义一个公用方法，用于传入数据，考虑到这个控件是定制的，我们可以指定传入的bean，这里我们指定为PraiseInfo这个bean，该类结构如下

/**
 * Created by 大灯泡 on 2016/2/21.
 * 点赞用的bean
 */
public class PraiseInfo {
    public String userNick;//点赞用户的名字
    public int userId;//点赞用户的ID
    public String userAvatar;//点赞用户的头像
}

回到我们的控件，传入我们的数据方法如下：

 public void setDatas(List<PraiseInfo> datas){
        this.datas=datas;
        onPreDraw();
    }

如您所见，我们的操作将会在onPreDraw里面完成，关于onPreDraw，可以参考上一篇文章。

在onPreDraw我们的代码如下：

    @Override
    public boolean onPreDraw() {
        if (datas == null || datas.size() == 0) {
            return super.onPreDraw();
        }
        else {
            createSpanStringBuilder(datas);
            return true;
        }
    }

接下来就是重头戏createSpanStringBuilder方法了。

在开头我们说过，我们使用的是spanstringbuilder，既然用到这个，那肯定得new出来一个builder，但别忘了我们是在一个listview里面展示，我们不可能每次滑动的时候都new吧，那效率得多低，所以我们在控件内部维护一个LruCache。

  private static final LruCache<String, SpannableStringBuilderAllVer> praiseCache
            = new LruCache<String, SpannableStringBuilderAllVer>(50) {
        @Override
        protected int sizeOf(String key, SpannableStringBuilderAllVer value) {
            return 1;
        }
    };

我们存50条应该足够了。

然后我们的createSpanStringBuilder方法代码如下：

 private void createSpanStringBuilder(List<PraiseInfo> datas) {
        if (datas == null || datas.size() == 0) return;
        String key = Integer.toString(datas.hashCode() + datas.size());
        SpannableStringBuilderAllVer spanStrBuilder = praiseCache.get(key);
        if (spanStrBuilder == null) {
            ImageSpan icon = new ImageSpan(getContext(), iconRes, TEXT_ALIGNMENT_GRAVITY);
            //因为spanstringbuilder不支持直接append span，所以通过spanstring转换
            SpannableString iconSpanStr = new SpannableString(" ");
            iconSpanStr.setSpan(icon, 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

            spanStrBuilder = new SpannableStringBuilderAllVer(iconSpanStr);
            //给出两个空格，点赞图标后
            spanStrBuilder.append("  ");
            for (int i = 0; i < datas.size(); i++) {
                ClickEvent clickEvent = new ClickEvent.Builder(getContext(), datas.get(i)).setTextSize(textSize)
                                                                                          .build();
                spanStrBuilder.append(datas.get(i).userNick, clickEvent, 0);
                if (i != datas.size() - 1) spanStrBuilder.append(", ");
                else spanStrBuilder.append("\0");
            }
            praiseCache.put(key, spanStrBuilder);
        }
        setText(spanStrBuilder);
    }

针对代码解析如下：

1. 我们的key用的是list的hashCode和大小确定。
2. 在添加到最后一个bean时，我们需要加一个字符\0，否则我们点击textview的空白位置会点到最后一个[*关于这个问题，本篇附录会有解析]。
3. 点击事件，我们的点击事件采用的是ClickableSpan，ClickableSpan支持文字点击，另外可以看到我们有一个类是SpannableStringBuilderAllVer，这个类其实是从api21抽取出来，我们主要将这个方法抽取：

public SpannableStringBuilderAllVer append(CharSequence text, Object what, int flags)

为何，因为。。。。。这个方法实在方便，不需要老是setSpan....

SpannableStringBuilderAllVer.java:

public class SpannableStringBuilderAllVer extends SpannableStringBuilder {
    public SpannableStringBuilderAllVer() {
        super("");
    }

    public SpannableStringBuilderAllVer(CharSequence text) {
        super(text, 0, text.length());
    }

    public SpannableStringBuilderAllVer(CharSequence text, int start, int end) {
        super(text, start, end);
    }

    public SpannableStringBuilderAllVer append(CharSequence text) {
        if (text == null) return this;
        int length = length();
        return (SpannableStringBuilderAllVer) replace(length, length, text, 0, text.length());
    }

    /** 该方法在原API里面只支持API21或者以上，这里抽取出来以适应低版本 */
    public SpannableStringBuilderAllVer append(CharSequence text, Object what, int flags) {
        if (text == null) return this;
        int start = length();
        append(text);
        setSpan(what, start, length(), flags);
        return this;
    }
}

我们的ClickEvent的clickablespan使用builder模式，因为指不定以后也许会增加些什么奇怪的参数，所以对于4个参数以上的，或者可能以后会有4个参数以上的，我一般都会采用builder。

/**
 * Created by 大灯泡 on 2016/2/21.
 * 点击事件
 */
public class ClickEvent extends ClickableSpan {
    private static final int DEFAULT_COLOR = 0xff517fae;
    private int color;
    private Context mContext;
    private int textSize;
    private PraiseInfo mPraiseInfo;

    private ClickEvent() {}

    private ClickEvent(Builder builder) {
        mContext = builder.mContext;
        mPraiseInfo = builder.mPraiseInfo;
        this.textSize = builder.textSize;
        this.color = builder.color;
    }

    @Override
    public void onClick(View widget) {
        Toast.makeText(mContext, "当前用户名是： " + mPraiseInfo.userNick + "   它的ID是： " + mPraiseInfo.userId,
                Toast.LENGTH_SHORT).show();
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        super.updateDrawState(ds);
        //去掉下划线
        if (color == 0) {
            ds.setColor(DEFAULT_COLOR);
        }
        else {
            ds.setColor(color);
        }
        ds.setTextSize(textSize);
        ds.setUnderlineText(false);
    }

    public static class Builder {
        private int color;
        private Context mContext;
        private int textSize=16;
        private PraiseInfo mPraiseInfo;

        public Builder(Context context, @NonNull PraiseInfo info) {
            mContext = context;
            mPraiseInfo=info;
        }

        public Builder setTextSize(int textSize) {
            this.textSize = textSize;
            return this;
        }

        public Builder setColor(int color) {
            this.color = color;
            return this;
        }

        public ClickEvent build() {
            return new ClickEvent(this);
        }
    }
}

最后，我们别忘了在onDetachedFromWindow回调里面清掉缓存，否则我们的缓存会持有context从而导致activity无法被回收。

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        praiseCache.evictAll();
        if (praiseCache.size() == 0) {
            Log.d(TAG, "clear cache success!");
        }
    }

本篇的点赞列表控件实现完成，下一篇将会实现评论列表。
ps：如您所见，目前所有的控件并没有放到我们的朋友圈listview里面，这个步骤将会在服务器部署后，有数据时一并进行，所以目前我们实现后是单个测试的。

【附：】
上文提到，我们需要在stringbuilder的最后添加\0，那么\0是个什么东东呢？如您所见，这是一个什么都木有的空字符，一般用于表示字符串结束，为何我们要手动添加？

在这之前，不妨看看实现clickablespan的必须方法：

setMovementMethod(LinkMovementMethod.getInstance());

我们看看LinkMovementMethod的方法，直接看onTouchEvent：

LinkMovementMethod

在这里我们可以获取几个信息：

1. 当我们点击时，在touchevent里面得到我们的点击位置（相对父控件的位置，即相对TextView的位置）
2. 对x,y进行校正，比如有padding或者有滑动的。
3. 得到点击的具体行数以及偏移量（问题就是出在这里）
4. 得到当前点击位置的clickablespan数组，如果不为空，则证明点击位置是一个clickablespan，则调用其onClick方法，否则取消本次点击。

可以看到，系统的判断方法重点在于off这个参数，因为getSpans是与off这个参数挂钩的（start=end=off）。那么具体看看我们的off是怎么拿到的，就需要看看getOffsetForHorizontal这个方法，这个方法返回的是layou里面某一行的水平偏移量，在textview里，就是第几行文字的水平偏移量，理论上来说，我们点击一个textview空白的地方，拿到的应该是相对于textview的像素偏移量，然而，我们再看看文档：

文档

妈蛋，这不会返回的是文字的偏移量吧。。。。
事实上，当我们一直查下来，找到这里的时候，看完注释，我觉得好像还真是【不敢妄自下定结论，因为在下没有看下去了】

getPrimaryHorizontal

后面的没看下去，因为调用方法的层级太深了，谷歌了一番后，找到的信息不多。姑且当做是返回文字的偏移量而非点击位置相对于textview的像素偏移量吧。

于是乎，如果不加\0，意味着我们即使点击空白的地方，在判定上，我们点击的永远是textview最后一个文字，而我们的最后一个文字是clickablespan，因此实现了onClick方法。

而我们加了结束符，点击的就是\0，自然不是clickablespan，所以也就没有任何事情发生了。