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類中的寫法活得啟發完成的。如果有相關問題可以加我的微信問我。第一次上（寫）床（部落格），難免緊張。