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() {            @Override            public void onFailure(Throwable t, int errorNo, String strMsg) {                super.onFailure(t, errorNo, strMsg);                ToastUtil.show(getApplicationContext(), "圖片上傳失敗，請檢查網路")；            }            @Override            public void onSuccess(Object t) {                super.onSuccess(t);                System.out.println(t.toString());                try {                    JSONObject jsonObject = new JSONObject(t.toString());                    String url = jsonObject.getString("recordName");                    switch (index) {                    case 0:                        // 根據Bitmap對象建立ImageSpan對象                        ImageSpan imageSpan = new ImageSpan(CreateMeetingActivity.this, bitmap);                        // 建立一個SpannableString對象，以便插入用ImageSpan對象封裝的映像                        String tempUrl = "";                        SpannableString spannableString = new SpannableString(tempUrl);                        // 用ImageSpan對象替換你指定的字串                        spannableString.setSpan(imageSpan, 0, tempUrl.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);                        // 將選擇的圖片追加到EditText中游標所在位置                        int index = et_detail.getSelectionStart(); // 擷取游標所在位置                        Editable edit_text = et_detail.getEditableText();                        if (index < 0 || index >= edit_text.length()) {                            edit_text.append(spannableString);                        } else {                            edit_text.insert(index, spannableString);                        }                        System.out.println("插入的圖片：" + spannableString.toString());                        break;                    case 1:                        // 與本案例無關的代碼                        break;                    }                } catch (JSONException e) {                    e.printStackTrace();                }            }        });    }

上面的注釋寫的很詳細了，即使之前不瞭解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中，我會對這些字串通過正則匹配"，如果匹配到這種格式，就代表它是一個圖片，然後通過一些處理將圖片回顯出來。