Android實現(xiàn)EditText圖文混合插入上傳功能
前段時間做了一個Android會議管理系統(tǒng),項目需求涉及到EditText的圖文混排,如圖:
在上圖的”會議詳情”中,需要支持文本和圖片的混合插入,下圖演示輸入的示例:

當(dāng)會議創(chuàng)建完成以后,保存數(shù)據(jù)到服務(wù)器,然后查看剛剛創(chuàng)建好的會議,如圖:

一、明確需求
首先,點擊”會議詳情”文本框中,正常輸入文本,然后點擊左下角的圖片圖標(biāo),進入系統(tǒng)的相冊用來選擇一張圖片并插入到文本框中,你還可以將光標(biāo)停留在任意的文字中間,完成圖片的插入,回退建即可以逐個刪除文字,也可以刪除圖片。
二、實現(xiàn)思路
如果要在一個EditText中顯示圖片,首先得簡單了解一下SpannableString和ImageSpan的使用。
在上面的圖文混排的EditText中,雖然看到了生動的圖文效果,但是實際上輸出EditText的get Text().toString(),
其實是:"插入一張圖片<img src=\"" + url1+ "\" />。再插入一張圖片<img src=\"" + url2+ "\" />。"。
也就是說,當(dāng)我選擇圖片插入到EditText中時,雖然顯示了該圖片,但是插入進去的其實是這個圖片的url。
當(dāng)我保存這條記錄時,傳給服務(wù)器的值就是:"插入一張圖片<img src=\"" + url1+ "\" />。
再插入一張圖片<img src=\"" + url2+ "\" />。"
這部分代碼如下:
1.點擊圖片按鈕進入系統(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í)有所幫助,也希望大家多多支持腳本之家。
- Android TextView實現(xiàn)圖文混合編排的方法
- Android取消EditText自動獲取焦點默認(rèn)行為
- Android控件系列之EditText使用方法
- android同時控制EditText輸入字符個數(shù)和禁止特殊字符輸入的方法
- Android中EditText實現(xiàn)不可編輯解決辦法
- Android定制自己的EditText輕松改變底線顏色
- Android中EditText顯示明文與密碼的兩種方式
- android基礎(chǔ)教程之a(chǎn)ndroid的listview與edittext沖突解決方法
- 全面解析Android中對EditText輸入實現(xiàn)監(jiān)聽的方法
- Android中實現(xiàn)EditText圓角的方法
相關(guān)文章
Android SoundPool實現(xiàn)簡短小音效
這篇文章主要為大家詳細(xì)介紹了Android SoundPool實現(xiàn)簡短小音效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11
Android webview與js的數(shù)據(jù)交互
有了WebView這個組件,Android應(yīng)用開發(fā)技術(shù)也就轉(zhuǎn)嫁到html與java數(shù)據(jù)交互上來。說白了就是js與WebView的數(shù)據(jù)交互,這就是本文所要討論的2017-04-04
Android TextView設(shè)置背景色與邊框的方法詳解
本篇文章是對Android中TextView設(shè)置背景色與邊框的方法進行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06
Android開發(fā)筆記之:如何安全中止一個自定義線程Thread的方法
本篇文章是對Android中如何安全中止一個自定義線程Thread的方法進行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05
使用Retrofit下載文件并實現(xiàn)進度監(jiān)聽的示例
這篇文章主要介紹了使用Retrofit下載文件并實現(xiàn)進度監(jiān)聽的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Android App開發(fā)中使用RecyclerView實現(xiàn)Gallery畫廊的實例
這篇文章主要介紹了Android App開發(fā)中使用RecyclerView實現(xiàn)Gallery畫廊的實例,比普通的ListView實現(xiàn)的效果更為強大,需要的朋友可以參考下2016-04-04
Android實現(xiàn)靜態(tài)廣播監(jiān)聽器的方法
這篇文章主要介紹了Android實現(xiàn)靜態(tài)廣播監(jiān)聽器的方法,涉及Android的廣播機制與記錄監(jiān)聽廣播信息的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07

