Android 圖文混排(EditText)
最近公司的專案中要求使用者可以在移動端編輯圖文混排,以前沒有弄過這方面的東東,所以一方面記錄一下開發歷程,一方面秉著分享的精神寫出來希望對看到這篇文章的人一點幫助。
先上效果圖
搜尋了一下網上的解決方案我這裡找到了兩個:
1.採用SpannableString和ImageSpan兩個類來實現這一功能。
2,.採用通過html的<img
>標籤的方式插入到edittext中去。
這裡我選擇的是第一種,第二種方式我不知道如何從edittext物件中取出img標籤對應的路徑。
現在直接上程式碼:
private void appendImage(String imgUrl) {
// 用imgUrl獲取Bitmap物件
Bitmap bitmap = ImageLoader.getInstance().loadImageSync(
"file://" + imgUrl);
// 將Bitmap物件轉換成Drawable物件
Resources res = getApplicationContext().getResources();
Drawable drawable = new BitmapDrawable(res, bitmap);
// 用imgUrl初始化SpannableString物件
msp = new SpannableString(imgUrl);
// 設定圖片寬高
drawable.setBounds(0, 0, 600, 800);
msp.setSpan(new ImageSpan(drawable), 0, imgUrl.length(),
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
// 獲取Editable的物件
Editable edit = editText.getEditableText();
// 獲取游標位置
int index = editText.getSelectionStart();
// 游標所在位置插入文字
edit.insert(index, msp);
Log.i("圖文混排",editText.getText().toString());
}
這個程式碼非常簡單了,可以分成兩部分來看。
第一部分:因為我們移動端編輯圖文,圖片肯定來自本地檔案,我們根據這個路徑將其最終轉換成Drawable物件,這裡我採用的是
ImageLoader框架直接獲取到Bitmap物件然後轉換成Drawable物件,大家根據自己專案,換成相應的取得Bitmap物件的方法即可。
第二部分:初始化SpannableString物件。
msp = new SpannableString(imgUrl);
這裡的引數很重要,為什麼這麼說呢,我們以開頭的效果圖為例,通過結尾的Log列印下:
隨便寫寫字/storage/emulated/thumbnails/1448764326621.jpg啊啊
我們發現editText.getText().toString()列印的內容文字部分還是文字,但是圖片部分就是SpannableString物件的引數,因為我們移動端編輯完圖文肯定是要釋出的,這時候我們就需要上傳這些圖片,那麼因為內容中包換路徑我們就能想寫辦法獲取路徑。
我就是在這個地方卡住了,一開始隨便用了個“image”這樣的字串建立的物件,然後後期我發現我不知道從哪裡拿到圖片的原始路徑。
剩下的看程式碼註釋就可以知道我們將圖片放入了游標位置。
接下來自然是與伺服器的互動了,這裡我們要想辦法從editText.getText().toString()中取出我們所有加入的圖片的路徑。
還是上程式碼:
//從EditText中獲取圖片所對應的路徑
private ArrayList<String> getImagePath() {
Editable edit = editText.getText();
String path = null;
ArrayList<String> pathArr = new ArrayList<String>();
ImageSpan[] spans = edit.getSpans(0, edit.length(), ImageSpan.class);
for (ImageSpan ip : spans) {
int start = edit.getSpanStart(ip);
int end = edit.getSpanEnd(ip);
path = edit.toString().substring(start, end);
path = path.substring(0, path.length());
pathArr.add(path);
}
return pathArr;
}
這個是我從“仿小米便籤圖文混排 EditText解決尾部插入文字bug”中提出的方法也感謝原作者。大家如果想看可以百度搜下這個內容。
就是這樣一個方法我們就拿到了路徑的集合,然後大家呼叫自己專案中的上傳方法將圖片上傳到伺服器吧!
接下來我們用上傳成功後得到的網路路徑替換原本editText中的本地路徑
/**
* 用網路路徑替換本地路徑
* @param urls 上傳圖片後得到的網路路徑集合
* @return editText 替換後的文字內容(用於最終上傳)
*/
public String getEditText(ArrayList<String> urls) {
Editable edit = editText.getText();
String cont = edit.toString();
ImageSpan[] spans = edit.getSpans(0,edit.length(),
ImageSpan.class);
int size = spans.length;
for (int i = 0; i < size ; i++) {
int start = edit.getSpanStart(spans[i]);
int end = edit.getSpanEnd(spans[i]);
String path = edit.toString().substring(start, end);
cont = cont.replace(path, urls.get(i));
}
editText.setText(cont);
return cont;
}
這樣我們就拿到了替換後的editText中的文字內容,這也就是最終我們需要上傳的內容!