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

標籤：tracking   obj   thread   detail   文本   line   file   封裝   ++   

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

在的”會議詳情”中。須要支援文本和圖片的混合插入，示範輸入的示範範例：
當會議建立完畢以後，儲存資料到server。然後查看剛剛建立好的會議。

一、明白需求
首先。點擊”會議詳情”文字框中，正常輸入文本，然後點擊左下角的圖片表徵圖。進入系統的相冊用來選擇一張圖片並插入到文字框中，你還能夠將游標停留在隨意的文字中間，完畢圖片的插入。回退建即能夠逐個刪除文字，也能夠刪除圖片。

二、實現思路

假設要在一個EditText中顯示圖片，首先得簡單瞭解一下SpannableString和ImageSpan的使用。在上面的圖文混排的EditText中。儘管看到了生動的圖文效果。可是實際上輸出EditText的get Text().toString()。事實上是："插入一張圖片<img src=\"" + url1+ "\" />。
再插入一張圖片<img src=\"" + url2+ "\" />。"。也就是說，當我選擇圖片插入到EditText中時，儘管顯示了該圖片，可是插入進去的事實上是這個圖片的url。當我儲存這條記錄時，傳給server的值就是："插入一張圖片<img src=\"" + url1+ "\" />。再插入一張圖片<img src=\"" + url2+ "\" />。"這部分代碼例如以下：

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

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

2.擷取到該圖片並調用介面將圖片上傳到server，上傳成功以後擷取到server返回的該圖片的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<Object>() {            @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 = "<img src=\"" + url + "\" />";                        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: 為什麼要把圖片上傳到server上擷取url？
A1: PM要求每插入一次圖片就要調介面將圖片上傳到server上。該介面會返回該圖片的url過來。儘管這樣的要求並非個好的解決方式。假設不須要儲存圖文混合插入的內容。那就不必運行這一步。在imageSpan替換時，能夠用隨意字元替換，由於對於spannebleString而言。插入的圖片事實上就是一些字元而已，這一點能夠輸出edittext.gettext().tostring()來驗證。

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

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

A2: 由於項目的另外一個需求是編輯會議。也就是圖文混合插入的內容支援以後的再次編輯。
當調用會議編輯介面時。會返回會議詳情的資料。這些資料就是："插入一張圖片<img src=\"" + url1+ "\" />。
再插入一張圖片<img src=\"" + url2+ "\" />。"為了讓會議詳情頁面的圖文回顯到EditText中，我會對這些字串通過正則匹配"<img src=\‘‘+*+"\">，假設匹配到這樣的格式。就代表它是一個圖片。然後通過一些處理將圖片回顯出來。

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