专栏首页Android开发小工Android实现类似QQ对话框的@他人的整体解决方案

Android实现类似QQ对话框的@他人的整体解决方案

在我们公司的新版APP中社区板块有个在回复回帖中有个@他们的功能,基本需求和QQ群组对话框里@群或组里任何一个成员类似。而数据传输方面,选择了直接传输富文本格式的数据让后台解析出@的对象。基本的需求如下:

  • 用户输入@后就弹出于之有关系的用户,点击返回编辑框输入@UserName(空格),并且整体变色
  • 取消@操作后,编辑器将留下@符号
  • 点击只能点击在@UserName(空格)的外侧
  • 删除也是作为一个整体删除

整体效果大家可以看看QQ群组里的对话框@功能。

@了两个用户后的效果图

我大学最开始写代码的时候,我的大学老师告诉我要把代码功能模块一步步拆分出来,首先我们应该完成@UserName(空格)的整体最为一个对象,并在用户选择想要@的对象后最为一个整体并变色呈现在编辑框里。然后是监控输入@后弹出@用户选择列表。接着是点击不了@UserName(空格)之间的的字符,删除也是同理。这个就是整体性要求。

1.@UserName(空格)的整体呈现

最开始的设想是用一个富文本编辑器,但是了解了富文本编辑器基础知识后感觉没必要实现一个富文本编辑器在APP中,而只需要自定义一个Span类就可以满足需求,而Android本身的URLSpan和我们的需求很像。看下他的实现源码:

public class URLSpan extends ClickableSpan implements ParcelableSpan {

    private final String mURL;

    public URLSpan(String url) {
        mURL = url;
    }

    public URLSpan(Parcel src) {
        mURL = src.readString();
    }
    
    public int getSpanTypeId() {
        return TextUtils.URL_SPAN;
    }
    
    public int describeContents() {
        return 0;
    }

    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(mURL);
    }

    public String getURL() {
        return mURL;
    }

    @Override
    public void onClick(View widget) {
        Uri uri = Uri.parse(getURL());
        Context context = widget.getContext();
        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
        intent.putExtra(Browser.EXTRA_APPLICATION_ID, context.getPackageName());
        context.startActivity(intent);
    }
}

简单分析下上面的代码,mURL存储了url地址,我们用这个存储用户的userId,而ClickableSpan是一个可以点击的Span,因为我们需要点击进入该用户的用户界面,所以需要实现他的onClick方法。向上ClickableSpan知道可以通过重写他的updateDrawState(TextPaint ds)方法实现变色。所以这是我们的ATSpan的代码:

public class ATSpan extends ClickableSpan  {

    private String userId;

    public ATSpan(String userId) {
        this.userId=userId;
    }

    public String getValue(){
        return userId;
    }

    public void setValue(String userId){
        this.userId = userId;
    }

    @Override
    public void onClick(View widget) {
        Context context = widget.getContext();
        Intent intent = new Intent(context, OthersCCActivity.class);
        intent.putExtra("UserId", userId);
        context.startActivity(intent);
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        ds.setColor(Color.parseColor("#FF5DB5F4"));
    }
}

2.监控出现@字符输入就弹出选择列表

通过监听editText的输入内容就设置一个TextWatcher监听输入内容改变后的字符变化,强调的是在为什么在onTextChanged中实现字符监听是考虑到对直接对字符(char)的操作比转成字符串的操作上有性能优势和便捷性优势,而且onTextChanged里直接提供了改变的字符的位置,方便我们的判断条件:if ('@' == s.charAt(start) && count == 1)就是判断新输入的字符是@。直接看代码吧。

editText.addTextChangedListener(new TextWatcher() {

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

                if (!(s.length() > start)) {
                    return;
                }
                if ('@' == s.charAt(start) && count == 1) {
                    toggleSoftInput(posterContentEt,false);
                    showPopuSelectFriend();
                    return;
                }

                if ((s.charAt(start) == '@') && (s.charAt(start + count - 1) == ' ')) {
                    if ('@' == s.charAt(start - 1)) {
                        posterContentEt.getText().delete(start - 1, start);
                    }
                }

            }

            @Override
            public void afterTextChanged(Editable s) {
            }
        });

3.点击 @相关字符的 整体性(就是点不进去,焦点只能落在外面)

先上代码:

posterContentEt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int selectionStart = posterContentEt.getSelectionStart();

                ATSpan[] atSpans = posterContentEt.getText().getSpans(0, posterContentEt.getText().length(), ATSpan.class);
                int length = atSpans.length;

                if (0 == length) {
                    return;
                }

                for (ATSpan atSpan : atSpans) {
                    int start = posterContentEt.getText().getSpanStart(atSpan);
                    int end = posterContentEt.getText().getSpanEnd(atSpan);
                    if (selectionStart >= start && selectionStart <= end) {
                        posterContentEt.setSelection(end);
                        return;
                    }
                }
            }
        });

用变量selectionStart 记录下光标选择的位置,遍历所有的ATSpan的位置区间(start,end),如果selectionStart在这个区间就直接返回,光标落在整个@用户的最后。

4.同上,删除操作也是只能删除@相关的整体内容

这个其实和上面一段代码差不多,不同的是通过keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN监听输入字符是删除字符del。

posterContentEt.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {

                if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN) {

                    int selectionStart = posterContentEt.getSelectionStart();

                    ATSpan[] atSpans = posterContentEt.getText().getSpans(0, posterContentEt.getText().length(), ATSpan.class);
                    int length = atSpans.length;

                    if (0 == length) {
                        return false;
                    }

                    for (ATSpan atSpan : atSpans) {
                        int start = posterContentEt.getText().getSpanStart(atSpan);
                        int end = posterContentEt.getText().getSpanEnd(atSpan);
                        if (selectionStart >= start && selectionStart <= end) {
                            posterContentEt.getText().delete(start, end);
                            return true;
                        }
                    }
                }
                return false;
            }
        });

5.转换成富文本格式的内容传服务器

最后ATSpan转换成富文本格式的字符串传到服务器,上代码关门:

public static String convertSpannedToRichText(Spanned spanned) {
        List<CharacterStyle> spanList =
                Arrays.asList(spanned.getSpans(0, spanned.length(), CharacterStyle.class));
        SpannableStringBuilder stringBuilder = new SpannableStringBuilder(spanned);
        for (CharacterStyle characterStyle : spanList) {
            int start = stringBuilder.getSpanStart(characterStyle);
            int end = stringBuilder.getSpanEnd(characterStyle);
            if (start >= 0) {
                String htmlStyle = handleCharacterStyle(characterStyle,
                        stringBuilder.subSequence(start, end).toString());
                if (htmlStyle != null) {
                    stringBuilder.replace(start, end, htmlStyle);
                }
            }
        }
        return stringBuilder.toString();
    }

    private static String handleCharacterStyle(CharacterStyle characterStyle, String text) {
        if (characterStyle instanceof ATSpan) {
            if (TextUtils.isEmpty(text)){
                return "";
            }
            ATSpan span = (ATSpan) characterStyle;
            return String.format("<at userId=\"%s\">%s</at>", span.getValue(), text);
        }
        return null;
    }

最后,基本效果和QQ的群组对话框的效果大致差不多,基本完成了项目需求。从源码中找解决需求可能就是完成这个功能的心得吧。包括后面从服务器获取的富文本数据还原成Span对象也还是从Android源码中Html类中的写法活得启发完成的。如果有相关问题可以加我的微信问我。第一次上(写)床(博客),难免紧张。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数据结构基础-递归和循环技巧

    递归是从数学领域的数学归纳法借鉴过来的一种技术。递归代码通常比迭代代码更加简洁易懂。当任务能够被相似的子任务定义时,采用递归处理十分有效。二分排序和遍历等问题往...

    1025645
  • 数据结构基础-栈和队列

    栈是一个有序线性表,只能在表的一端(成为栈顶,top)执行插入和删除操作。最后插入的元素将第一个被删除。所以栈也称为后进先出(Last In First Out...

    1025645
  • 数据结构基础-二叉树的遍历

    二叉树的基本概念:树是一种类似于链表的数据结构,不过树的一个结点可以指向多个结点。树是一种典型的非线性结构。树是表示具有层次特性的图的结构的一种方法。

    1025645
  • 挑战程序竞赛系列(42):4.1模运算的世界(4)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    用户1147447
  • POJ 刷题系列:3295. Tautology

    题意: 给出二元变量 p,q,r,s,t以及运算符K,A,N,E,C,求所给运算符和变量的集合是否符合永真,若永真输出tautology,否则输出not。 思...

    用户1147447
  • 牛客网-斐波那契数列

    大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0,第1项是1)。 n<=39

    TrueDei
  • 剑指Offer-变态跳台阶

    package Recursion; /** * 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级。求该青蛙跳上一个n级的台阶总共有多少种跳...

    武培轩
  • hdu1021

    @坤的
  • logN复杂度估算与一些示例logN复杂度估算logN复杂度算法举例

    logN复杂度估算 logN复杂度的算法可以认为具有以下特性: 用常数时间将问题的大小削减为某一部分(通常是1/2) 例如分治法求最大子串问题,将一个$O(N...

    月见樽
  • [C语言]N阶勒让德公式

    雨落凋殇

扫码关注云+社区

领取腾讯云代金券