如何創建類似Gmail的收件人（用戶）自定義視圖

我的目標是創建如下所示的在Gmail和Foursquare中使用的類似徽章的視圖。如何創建類似Gmail的收件人（用戶）自定義視圖

enter image description here

到目前爲止，我已經創造了ReplacementSpan處理個人看法的前景色和背景色。

public class SearchTagSpan extends ReplacementSpan { 

    private int backgroundColor; 
    private int forgroundColor; 

    public SearchTagSpan() { 
     backgroundColor = -1; 
     forgroundColor = Color.BLACK; 
    } 

    public SearchTagSpan(int backgroundColor, int forgroundColor) { 
     this.backgroundColor = backgroundColor; 
     this.forgroundColor = forgroundColor; 
    } 

    @Override 
    public void draw(
      Canvas canvas, 
      CharSequence text, int start, int end, 
      float x, int top, int y, int bottom, 
      Paint paint) { 
     RectF rect = new RectF(x, top, x + measureText(paint, text, start, end), bottom); 
     paint.setColor(backgroundColor); 
     canvas.drawRect(rect, paint); 
     paint.setColor(forgroundColor); 
     canvas.drawText(text, start, end, x, y, paint); 
    } 

    @Override 
    public int getSize(
      Paint paint, 
      CharSequence text, int start, int end, 
      Paint.FontMetricsInt fm) { 
     return Math.round(paint.measureText(text, start, end)); 
    } 

    private float measureText(Paint paint, CharSequence text, int start, int end) { 
     return paint.measureText(text, start, end); 
    } 
}

兩種背景和前景顏色是當視圖變得多行每個徽章拉伸的背景以填充線在TextView佈局間距指定正確然而施加。如果我刪除行距，那麼第一行和第二行的背景會相互接觸，如下圖所示。

enter image description here