Android圖文混排（一）－實現EditText圖文混合插入上傳

Android圖文混排（一）－實現EditText圖文混合插入上傳

前段時間做了一個Android會議管理系統，項目需求涉及到EditText的圖文混排，如圖：

在上圖的”會議詳情”中，需要支持文本和圖片的混合插入，下圖演示輸入的示例：
當會議創建完成以後，保存數據到服務器，然後查看剛剛創建好的會議，如圖：

一、明確需求
首先，點擊”會議詳情”文本框中，正常輸入文本，然後點擊左下角的圖片圖標，進入系統的相冊用來選擇一張圖片並插入到文本框中，你還可以將光標停留在任意的文字中間，完成圖片的插入，回退建即可以逐個刪除文字，也可以刪除圖片。<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxzdHJvbmc+tv6hosq1z9bLvMK3PC9zdHJvbmc+PC9wPg0KPHByZSBjbGFzcz0="brush:java;"> 如果要在一個EditText中顯示圖片，首先得簡單了解一下SpannableString和ImageSpan的使用。 在上面的圖文混排的EditText中，雖然看到了生動的圖文效果，但是實際上輸出EditText的get Text().toString()， 其實是："插入一張圖片。再插入一張圖片。"。 也就是說，當我選擇圖片插入到EditText中時，雖然顯示了該圖片，但是插入進去的其實是這個圖片的url。 當我保存這條記錄時，傳給服務器的值就是："插入一張圖片。 再插入一張圖片。" 這部分代碼如下：

1.點擊圖片按鈕進入系統相冊

    /**
     * 圖文詳情頁面選擇圖片
     */
    public void getImage() {
        intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("image/*");
        startActivityForResult(intent, 0);
    }

2.獲取到該圖片並調用接口將圖片上傳到服務器，上傳成功以後獲取到服務器返回的該圖片的url

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (resultCode == RESULT_OK && requestCode == 0) {
            ContentResolver resolver = getContentResolver();
            // 獲得圖片的uri
            Uri originalUri = data.getData();
            bitmap = null;
            try {
                Bitmap originalBitmap = BitmapFactory.decodeStream(resolver.openInputStream(originalUri));
                bitmap = ImageUtils.resizeImage(originalBitmap, 600);
                // 將原始圖片的bitmap轉換為文件
                // 上傳該文件並獲取url
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        insertPic(bitmap, 0);
                    }
                }).start();
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }

        }
｝

3.通過執行insertPic()方法，獲取到url並做一些處理，讓其在edittext中顯示

    /**
     * 插入圖片
     */
    private void insertPic(Bitmap bm, final int index) {
        AjaxParams params = new AjaxParams();
        try {
            params.put("image", LeoUtils.saveBitmap(bm));
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        FinalHttp fh = new FinalHttp();
        System.out.println("params=" + params.toString());
        fh.post(HttpUrlConstant.UPLOAD_PIC, params, new AjaxCallBack

上面的注釋寫的很詳細了，即使之前不了解SpannerString和ImageSpan，相信也能夠體會到它們的用法。至此，android edittext的圖文混合插入需求就已經完成了。

三、補充說明
Q1: 為什麼要把圖片上傳到服務器上獲取url？
A1: PM要求每插入一次圖片就要調接口將圖片上傳到服務器上，該接口會返回該圖片的url過來，盡管這種要求並不是個好的解決方案。如果不需要保存圖文混合插入的內容，那就不必執行這一步，在imageSpan替換時，可以用任意字符替換，因為對於spannebleString而言，插入的圖片其實就是一些字符而已，這一點可以輸出edittext.gettext().tostring()來驗證。

// 用ImageSpan對象替換
spannableString.setSpan(imageSpan, 0, "圖片1", Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Q2: 為什麼要把圖片的url再次包裝成帶img標簽的字符串？

A2: 因為項目的另外一個需求是編輯會議，也就是圖文混合插入的內容支持以後的再次編輯。
當調用會議編輯接口時，會返回會議詳情的數據，
這些數據就是："插入一張圖片。再插入一張圖片。"
為了讓會議詳情頁面的圖文回顯到EditText中，我會對這些字符串通過正則匹配"，
如果匹配到這種格式，就代表它是一個圖片，然後通過一些處理將圖片回顯出來。