Android圖文混排-實現EditText圖文混合插入上傳
前段時間做了一個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圖文混合插入上傳