前段時間做了一個Android會議管理系統(tǒng)，項目需求涉及到EditText的圖文混排，如圖：
在上圖的”會議詳情”中，需要支持文本和圖片的混合插入，下圖演示輸入的示例：
當(dāng)會議創(chuàng)建完成以后，保存數(shù)據(jù)到服務(wù)器，然后查看剛剛創(chuàng)建好的會議，如圖：
一、明確需求
首先，點擊”會議詳情”文本框中，正常輸入文本，然后點擊左下角的圖片圖標(biāo)，進(jìn)入系統(tǒng)的相冊用來選擇一張圖片并插入到文本框中，你還可以將光標(biāo)停留在任意的文字中間，完成圖片的插入，回退建即可以逐個刪除文字，也可以刪除圖片。
二、實現(xiàn)思路
如果要在一個EditText中顯示圖片，首先得簡單了解一下SpannableString和ImageSpan的使用。
在上面的圖文混排的EditText中，雖然看到了生動的圖文效果，但是實際上輸出EditText的get Text().toString()，
其實是："插入一張圖片<img src=/"" + url1+ "/" />。再插入一張圖片<img src=/"" + url2+ "/" />。"。
也就是說，當(dāng)我選擇圖片插入到EditText中時，雖然顯示了該圖片，但是插入進(jìn)去的其實是這個圖片的url。
當(dāng)我保存這條記錄時，傳給服務(wù)器的值就是："插入一張圖片<img src=/"" + url1+ "/" />。
再插入一張圖片<img src=/"" + url2+ "/" />。"
這部分代碼如下：
1.點擊圖片按鈕進(jìn)入系統(tǒng)相冊
/** * 圖文詳情頁面選擇圖片 */ public void getImage() { intent = new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); intent.setType("image/*"); startActivityForResult(intent, 0); }2.獲取到該圖片并調(diào)用接口將圖片上傳到服務(wù)器，上傳成功以后獲取到服務(wù)器返回的該圖片的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轉(zhuǎn)換為文件 // 上傳該文件并獲取url new Thread(new Runnable() { @Override public void run() { insertPic(bitmap, 0); } }).start(); } catch (FileNotFoundException e) { e.printStackTrace(); } }｝3.通過執(zhí)行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(), "圖片上傳失敗，請檢查網(wǎng)絡(luò)")； } @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: // 根據(jù)Bitmap對象創(chuàng)建ImageSpan對象 ImageSpan imageSpan = new ImageSpan(CreateMeetingActivity.this, bitmap); // 創(chuàng)建一個SpannableString對象，以便插入用ImageSpan對象封裝的圖像 String tempUrl = "<img src=/"" + url + "/" />"; SpannableString spannableString = new SpannableString(tempUrl); // 用ImageSpan對象替換你指定的字符串 spannableString.setSpan(imageSpan, 0, tempUrl.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); // 將選擇的圖片追加到EditText中光標(biāo)所在位置 int index = et_detail.getSelectionStart(); // 獲取光標(biāo)所在位置 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: // 與本案例無關(guān)的代碼 break; } } catch (JSONException e) { e.printStackTrace(); } } }); }上面的注釋寫的很詳細(xì)了，即使之前不了解SpannerString和ImageSpan，相信也能夠體會到它們的用法。至此，android edittext的圖文混合插入需求就已經(jīng)完成了。
三、補充說明
Q1: 為什么要把圖片上傳到服務(wù)器上獲取url？
A1: PM要求每插入一次圖片就要調(diào)接口將圖片上傳到服務(wù)器上，該接口會返回該圖片的url過來，盡管這種要求并不是個好的解決方案。如果不需要保存圖文混合插入的內(nèi)容，那就不必執(zhí)行這一步，在imageSpan替換時，可以用任意字符替換，因為對于spannebleString而言，插入的圖片其實就是一些字符而已，這一點可以輸出edittext.gettext().tostring()來驗證。
// 用ImageSpan對象替換spannableString.setSpan(imageSpan, 0, "圖片1", Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
Q2: 為什么要把圖片的url再次包裝成帶img標(biāo)簽的字符串？
A2: 因為項目的另外一個需求是編輯會議，也就是圖文混合插入的內(nèi)容支持以后的再次編輯。
當(dāng)調(diào)用會議編輯接口時，會返回會議詳情的數(shù)據(jù)，這些數(shù)據(jù)就是："插入一張圖片<img src=/"" + url1+ "/" />。再插入一張圖片<img src=/"" + url2+ "/" />。"
為了讓會議詳情頁面的圖文回顯到EditText中，我會對這些字符串通過正則匹配"<img src=/''+*+"/">，如果匹配到這種格式，就代表它是一個圖片，然后通過一些處理將圖片回顯出來。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
圖片精選
