流水不争先,争的是滔滔不绝

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

即时通讯软件开发 云聊IM 1026℃

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

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

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

效果图(电脑录制,文字偏小了,在手机上是正常):

效果图

开工之前,依然是常规的方案思考:

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

  1. FlowLayout+n个TextView
  2. 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);
}

针对代码解析如下:

  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,所以也就没有任何事情发生了。

版权声明:部分文章、图片等内容为用户发布或互联网整理而来,仅供学习参考。如有侵犯您的版权,请联系我们,将立刻删除。
点击这里给我发消息