Android手把手朋友圈实战教程（九）控件篇【点赞列表】

项目地址：https://github.com/razerdp/FriendCircle

事实上，这个控件在很早以前我就已经上传到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 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 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);
}

针对代码解析如下：

我们的key用的是list的hashCode和大小确定。
在添加到最后一个bean时，我们需要加一个字符\0，否则我们点击textview的空白位置会点到最后一个[*关于这个问题，本篇附录会有解析]。
点击事件，我们的点击事件采用的是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

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

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

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