仿微信@功能

最近项目需要做类似微信的@ 功能,在网上找了很多,发现基本都是使用Span 来实现的,觉得写的比较好的就是这篇
Android 如何优雅地实现@人功能?——仿微博、仿QQ、仿微信、零入侵、高扩展性
由于本人对kotlin 的理解不深,有些代码看不太懂,自己根据这个思路用java 写了一遍

首先,我们给 EditText 设置一个 Span 用来标示这个一个整体,代码如下

/**
     * 添加 @内容
     *
     * @param text 包含 @ 符号的字符
     */
    public void addSpan(String text) {
        //将 @字符串插入到 光标之后
        getText().insert(getSelectionEnd(), text);
        //创建一个数据类,由于后面寻找对应的@ 内容
        DataSpan myTextSpan = new DataSpan(); 
        //设置Span
        getText().setSpan(myTextSpan, getSelectionEnd() - text.length(), getSelectionEnd(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
       //将光标设置到最后
        setSelection(getText().length());
    }

设置好了 Span 字符实现了在 EditText 中插入了@ 字符串,下面需要对 @ 字符串进行整体删除,监听 EditText 的 setOnKeyListener 事件:

        //该事件每次删除一个字符都会回调一次
        mEditText.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                //  判断是否为 按下删除 事件
                if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN) {
                    //做整体删除处理
                    return CopyWeChatEditText.KeyDownHelper(mEditText.getText());
                }
                return false;
            }
        });

    /**
     * 找到最后 Span 块
     *
     * @param text
     * @return
     */
    public static boolean KeyDownHelper(Editable text) {
        //找到光标开始结束坐标
        int selectionEnd = Selection.getSelectionEnd(text);
        int selectionStart = Selection.getSelectionStart(text);
        //获取 EditText 中所有的 Span 通过 DataSpan 绑定是的类型
        DataSpan[] spans = text.getSpans(selectionStart, selectionEnd, DataSpan.class);
        for (DataSpan span : spans) {
            if (span != null) {
                //找到第一个非空的 span 和该 span 对应 EditText 中的开始结束位置
                int spanStart = text.getSpanStart(span);
                int spanEnd = text.getSpanEnd(span);
                //假如光标的位置位于该 span 中的最后一位,即位于@ 字符串后面
                if (selectionEnd == spanEnd) {
                    //设置选中该 span 字符串
                    Selection.setSelection(text, spanStart, spanEnd);
                    return false;
                }
            }
        }
        return false;
    }

注意 Selection.setSelection(text, spanStart, spanEnd); 这一行代码,效果就相当于长按后选择字符串,setOnKeyListener 事件的调用时机是键盘按下删除,但字符串还没有做删除操作,所以设置选中,在执行删除操作时候就能删除选中的所有字符,实现@ 内容整块删除效果

现在基本实现了 @ 功能和整块删除效果,但是还有一点小问题,假如自己手动将光标移动到 @字符串中间,然后在删除字符,当将@字符删除,在将光标移动到 @字符串之后,再点击删除,发现整个字符还是被删除了。

要解决这个方法,需要监听 span 字符串是否包含 @ 字符

//设置工厂,用来监听 span 字符串变化
     setEditableFactory(new NoCopySpanEditableFactory(new DirtySpanWatcher()));


    class NoCopySpanEditableFactory extends Editable.Factory {

        private NoCopySpan spans;

        public NoCopySpanEditableFactory(NoCopySpan spans) {
            this.spans = spans;
        }

        @Override
        public Editable newEditable(CharSequence source) {
            //添加 span 字符串的监听
            SpannableStringBuilder stringBuilder = new SpannableStringBuilder(source);
            stringBuilder.setSpan(spans, 0, source.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);
            return stringBuilder;
        }
    }


    class DirtySpanWatcher implements SpanWatcher {

        @Override
        public void onSpanAdded(Spannable text, Object what, int start, int end) {

        }

        @Override
        public void onSpanRemoved(Spannable text, Object what, int start, int end) {

        }

        @Override
        public void onSpanChanged(Spannable text, Object what, int ostart, int oend, int nstart, int nend) {
            //span 字符串改变时候监听
            int spanEnd = text.getSpanEnd(what);
            int spanStart = text.getSpanStart(what);
            if (spanStart >= 0 && spanEnd >= 0 && what instanceof DataSpan) {
                CharSequence charSequence = text.subSequence(spanStart, spanEnd);
                //删除后的字符是否包含 @ 字符
                if (!charSequence.toString().contains("@")) {
                    DataSpan[] spans = text.getSpans(spanStart, spanEnd, DataSpan.class);
                    for (DataSpan span : spans) {
                        if (span != null) {
                            //不包含 @ 字符,将该 span 属性去除
                            text.removeSpan(span);
                            break;
                        }
                    }
                }
            }
        }
    }

到这里,仿微信的@ 功能已经完成,至于为什么会有这两个类,请看转载的文章,如果您有更好的监听方法,请告知我,谢谢
最后附上Demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容