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

由于项目需求，要实现在EditText以小椭圆显示用户名称，删除时也能将单个的用户名完全删除。在网上查询资料，才知道这类的效果可以依靠Spannable来完成。招到了2个参考的资料，分享给大家http://blog.csdn.net/leinote/article/details/9422005
下面讲解我自己的理解。
该效果的实现的思路就是将用户名转化成图片插入EditText，通过SpannableString向EditText插入文字信息，用SpannableString的setSpan方法将文字替换成ImageSpan对象，而ImageSpan可以保存图片信息；由此就完成了从文字到图片的转换。

文字转成图片可以通过 Bitmap.createBitmap方法来实现，在生成时需注意文字占的宽度

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

<!-- 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的代码

  /** 
 * 将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);
这三处，先确定具体的宽高，然后是内部的椭圆区域，最后是文字的绘制区域。大家可根据不同的情况自行修改