在我們公司的新版APP中社區(qū)板塊有個(gè)在回復(fù)回帖中有個(gè)@他們的功能，基本需求和QQ群組對(duì)話框里@群或組里任何一個(gè)成員類似。而數(shù)據(jù)傳輸方面，選擇了直接傳輸富文本格式的數(shù)據(jù)讓后臺(tái)解析出@的對(duì)象?；镜男枨笕缦拢?/p>

• 用戶輸入@后就彈出于之有關(guān)系的用戶,點(diǎn)擊返回編輯框輸入@UserName(空格),并且整體變色
• 取消@操作后，編輯器將留下@符號(hào)
• 點(diǎn)擊只能點(diǎn)擊在@UserName（空格）的外側(cè)
• 刪除也是作為一個(gè)整體刪除

整體效果大家可以看看QQ群組里的對(duì)話框@功能。

@了兩個(gè)用戶后的效果圖

我大學(xué)最開始寫代碼的時(shí)候，我的大學(xué)老師告訴我要把代碼功能模塊一步步拆分出來，首先我們應(yīng)該完成@UserName(空格)的整體最為一個(gè)對(duì)象，并在用戶選擇想要@的對(duì)象后最為一個(gè)整體并變色呈現(xiàn)在編輯框里。然后是監(jiān)控輸入@后彈出@用戶選擇列表。接著是點(diǎn)擊不了@UserName（空格）之間的的字符，刪除也是同理。這個(gè)就是整體性要求。

1.@UserName(空格)的整體呈現(xiàn)

最開始的設(shè)想是用一個(gè)富文本編輯器，但是了解了富文本編輯器基礎(chǔ)知識(shí)后感覺沒必要實(shí)現(xiàn)一個(gè)富文本編輯器在APP中，而只需要自定義一個(gè)Span類就可以滿足需求，而Android本身的URLSpan和我們的需求很像?？聪滤膶?shí)現(xiàn)源碼：

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存儲(chǔ)了url地址，我們用這個(gè)存儲(chǔ)用戶的userId，而ClickableSpan是一個(gè)可以點(diǎn)擊的Span，因?yàn)槲覀冃枰c(diǎn)擊進(jìn)入該用戶的用戶界面，所以需要實(shí)現(xiàn)他的onClick方法。向上ClickableSpan知道可以通過重寫他的updateDrawState(TextPaint ds)方法實(shí)現(xiàn)變色。所以這是我們的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.監(jiān)控出現(xiàn)@字符輸入就彈出選擇列表

通過監(jiān)聽editText的輸入內(nèi)容就設(shè)置一個(gè)TextWatcher監(jiān)聽輸入內(nèi)容改變后的字符變化，強(qiáng)調(diào)的是在為什么在onTextChanged中實(shí)現(xiàn)字符監(jiān)聽是考慮到對(duì)直接對(duì)字符(char)的操作比轉(zhuǎn)成字符串的操作上有性能優(yōu)勢(shì)和便捷性優(yōu)勢(shì)，而且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.點(diǎn)擊 @相關(guān)字符的 整體性（就是點(diǎn)不進(jìn)去，焦點(diǎn)只能落在外面），最好重寫EditText的onSelectionChanged方法監(jiān)聽selStart的值，落在AtSpan的區(qū)間就把他放在區(qū)間的最后。

先上代碼：

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 記錄下光標(biāo)選擇的位置，遍歷所有的ATSpan的位置區(qū)間（start,end），如果selectionStart在這個(gè)區(qū)間就直接返回，光標(biāo)落在整個(gè)@用戶的最后。

4.同上，刪除操作也是只能刪除@相關(guān)的整體內(nèi)容

這個(gè)其實(shí)和上面一段代碼差不多，不同的是通過keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN監(jiān)聽輸入字符是刪除字符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.轉(zhuǎn)換成富文本格式的內(nèi)容傳服務(wù)器

最后ATSpan轉(zhuǎn)換成富文本格式的字符串傳到服務(wù)器，上代碼關(guān)門:

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的群組對(duì)話框的效果大致差不多，基本完成了項(xiàng)目需求。從源碼中找解決需求可能就是完成這個(gè)功能的心得吧。包括后面從服務(wù)器獲取的富文本數(shù)據(jù)還原成Span對(duì)象也還是從Android源碼中Html類中的寫法活得啟發(fā)完成的。如果有相關(guān)問題可以加我的微信問我。第一次上（寫）床（博客），難免緊張。