实现EditText内容显示为格式化文字效果（文字一块一块的显示）

2019独角兽企业重金招聘Python工程师标准>>>

由于项目需求，要实现在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); 这三处，先确定具体的宽高，然后是内部的椭圆区域，最后是文字的绘制区域。大家可根据不同的情况自行修改

转载于:https://my.oschina.net/u/1409622/blog/181764