實現EditText內容顯示爲格式化文字效果（文字一塊一塊的顯示）

因爲項目需求，要實如今EditText以小橢圓顯示用戶名稱，刪除時也能將單個的用戶名徹底刪除。在網上查詢資料，才知道這類的效果能夠依靠Spannable來完成。招到了2個參考的資料，分享給你們http://blog.csdn.net/leinote/article/details/9422005 下面講解我本身的理解。 該效果的實現的思路就是將用戶名轉化成圖片插入EditText，經過SpannableString向EditText插入文字信息，用SpannableString的setSpan方法將文字替換成ImageSpan對象，而ImageSpan能夠保存圖片信息；由此就完成了從文字到圖片的轉換。

文字轉成圖片能夠經過 Bitmap.createBitmap方法來實現，在生成時需注意文字佔的寬度

<!-- lang: java -->
Paint paint = new Paint();
paint.setTextSize(h);
int w = (int) paint.measureText(str);
可經過Paint的measureText方法測量出文字所佔的實際長度
下面是生成圖片的代碼，最終生成的是橢圓形的圖片，裏面嵌套了文字
<!-- lang: java -->
	public static Bitmap createBitmap(Context context,String str){
	int h = DisplayUtil.sp2px(context, 16);
	Paint paint = new Paint();
	paint.setTextSize(h);
	int w = (int) paint.measureText(str);//計算文字實際佔用的寬度
	int height = 10+h;//將高度+10防止繪製橢圓時左右的文字超出橢圓範圍
	Bitmap bm = Bitmap.createBitmap(w+20, height, Config.ARGB_4444);
	Canvas c = new Canvas(bm);

	 Paint p2 = new Paint();
	 RectF re = new RectF(5, 0, w+15, height);//矩形
	 float roundPx = 14;
	 p2.setAntiAlias(true);//設置Paint爲無鋸齒
	 c.drawARGB(0, 0, 0, 0);// 透明色 
	 p2.setColor(context.getResources().getColor(R.color.bg_color));
	  c.drawRoundRect(re, roundPx, roundPx, p2);//繪製圓角矩形

	Paint p1 = new Paint();
	p1.setColor(Color.BLACK);
	p1.setTextSize(DisplayUtil.sp2px(context, 16));
	
	c.drawText(str, 10, 20, p1);
	c.save(Canvas.ALL_SAVE_FLAG);
	c.restore();
	return bm;
}

關於生成圓角圖片的方法，可查看下面的連接 http://www.oschina.net/code/snippet_54100_7242

下面是向EditText插入圖片的方法，就是利用了SpannableString和ImageSpan 來實現，兩者具體的用法可參考開發文檔。
<!-- lang: java -->
private void insertEditText(String str) {
	Bitmap bm = EditUtil.createBitmap(this, str);
	if (bm != null) {
		ImageSpan imageSpan = new ImageSpan(this, bm);
		SpannableString spannableString = new SpannableString("[name]"
				+ str + "[/name]");
		spannableString.setSpan(imageSpan, 0,
				("[name]" + str + "[/name]").length(),
				Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
		int index = etActionInviteInfo.getSelectionStart();
		Editable editable = etActionInviteInfo.getEditableText();
		if (index < 0 || index >= editable.length()) {
			editable.append(spannableString);
		} else {
			editable.insert(editable.length(), spannableString);
		}
	}
}

在附上sp轉px的代碼 <!-- lang: java --> /** * 將sp值轉換爲px值，保證文字大小不變 *
* @param spValue * @param fontScale * （DisplayMetrics類中屬性scaledDensity） * @return */
public static int sp2px(Context context, float spValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
} 最終的效果圖以下

具體設置橢圓圖片與文字位置關係的代碼在 Bitmap bm = Bitmap.createBitmap(w+20, height, Config.ARGB_4444); RectF re = new RectF(5, 0, w+15, height);//矩形 c.drawText(str, 10, 20, p1); 這三處，先肯定具體的寬高，而後是內部的橢圓區域，最後是文字的繪製區域。你們可根據不一樣的狀況自行修改