项目地址: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的像素偏移量,然而,我们再看看文档:
文档
妈蛋,这不会返回的是文字的偏移量吧。。。。
事实上,当我们一直查下来,找到这里的时候,看完注释,我觉得好像还真是【不敢妄自下定结论,因为在下没有看下去了】
getPrimaryHorizontal
后面的没看下去,因为调用方法的层级太深了,谷歌了一番后,找到的信息不多。姑且当做是返回文字的偏移量而非点击位置相对于textview的像素偏移量吧。
于是乎,如果不加\0,意味着我们即使点击空白的地方,在判定上,我们点击的永远是textview最后一个文字,而我们的最后一个文字是clickablespan,因此实现了onClick方法。
而我们加了结束符,点击的就是\0,自然不是clickablespan,所以也就没有任何事情发生了。