在開發(fā)的過程中一喘，可能會遇到過標題里面帶標簽沾谜。比如入下圖

image

實現(xiàn)的方式可能有好幾種，比如html等师逸。但是這個方式麻煩司倚，并且耗內(nèi)存。android 提供強大的SpannableString篓像。具體實現(xiàn)直接上代碼动知。

.....

public class TagsTextView extends android.support.v7.widget.AppCompatTextView {
private Context mContext;
SpannableString span ;
StringBuilder builder = new StringBuilder();
private String value;
ArrayList<String > mTags;
float padding = 0;
float margin ;
float radius;
float textSize ;
float tagPaddingTopBottom;
float titleTextSize;
public TagsTextView(Context context) {
this(context,null);
}

public TagsTextView(Context context, AttributeSet attrs) {
   this(context,attrs,0);
}

public TagsTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context);

    padding = UiUtils.dip2px(mContext,5);
    margin = UiUtils.dip2px(mContext,4);
    radius = UiUtils.dip2px(mContext,2);
    textSize = UiUtils.dip2px(mContext,10);
    titleTextSize = UiUtils.dip2px(mContext,14);

    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TagsTextView);
    padding = ta.getDimension(R.styleable.TagsTextView_tagPaddingLeftRight,padding);
    margin = ta.getDimension(R.styleable.TagsTextView_tagMargin,margin);
    radius = ta.getDimension(R.styleable.TagsTextView_tagRadius,radius);
    textSize = ta.getDimension(R.styleable.TagsTextView_tagTextSize,textSize);
    titleTextSize = ta.getDimension(R.styleable.TagsTextView_titleTextSize,titleTextSize);
    tagPaddingTopBottom = ta.getDimension(R.styleable.TagsTextView_tagPaddingTopBottom,tagPaddingTopBottom);
}

private void init(Context context){
    this.mContext = context;

}

public TagsTextView setTextStr(String value){

    this.value = value;

    return this;
}


public TagsTextView addTags(ArrayList<String > tags){
    this.mTags = tags;


    return this;
}

public void build(){
    builder.delete(0, builder.length());

    int start = 0;
    if(null != mTags && mTags.size() > 0){
        for(int i = 0;i<mTags.size() ;i++){
            String str =  mTags.get(i) ;
            builder.append(str);
        }
        builder.append(value);
        span = new SpannableString(builder);
        for(int i = 0;i<mTags.size() ;i++){
            String str = mTags.get(i) ;
            int color = getColorWithTag(mTags.get(i));
            span.setSpan(new RoundBackgroundColorSpan(color,Color.WHITE),start,start + str.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            span.setSpan(new AbsoluteSizeSpan((int) textSize), start,start + str.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            start += str.length();
        }
        span.setSpan(new AbsoluteSizeSpan((int) titleTextSize), start,builder.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }else{
        builder.append(value);
        span = new SpannableString(builder);
        span.setSpan(new AbsoluteSizeSpan((int) titleTextSize), 0,builder.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    setText(span);
}

private int getColorWithTag(String tag){
    if(tag.equals("新品")){
        return Color.parseColor("#20D6AC");
    }else if(tag.equals("特賣")){
        return Color.parseColor("#E9A433");
    }else if(tag.equals("精選")){
        return Color.parseColor("#A372FF");
    }
    return Color.parseColor("#20D6AC");
}

public class RoundBackgroundColorSpan extends ReplacementSpan {
    private int bgColor;
    private int textColor;
    public RoundBackgroundColorSpan(int bgColor, int textColor) {
        super();
        this.bgColor = bgColor;
        this.textColor = textColor;
    }
    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        //設置寬度為文字寬度加16dp
        return (int) (paint.measureText(text, start, end)+padding * 2 + margin);
    }


    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        int originalColor = paint.getColor();
        paint.setColor(this.bgColor);
        paint.setTextSize(textSize);

        Paint.FontMetrics metrics = paint.getFontMetrics();
        float textHeight = metrics.descent - metrics.ascent;

        System.out.println("textHeight:" + textHeight + "   textsize:"+textSize);
        System.out.println("same:"+ (metrics.descent - metrics.ascent));
        System.out.println("x:" + x +"   y:"+y+"  top:"+top + "   bottom:"+bottom);

        //畫圓角矩形背景,調(diào)試調(diào)整背景的位置。
        canvas.drawRoundRect(new RectF(x ,
                        top + (titleTextSize - textSize)  - UiUtils.dip2px(mContext,tagPaddingTopBottom-1)  , //因為文本本身頂部會有2個dp的默認間距员辩，先將所有的對齊之后盒粮，再調(diào)整布局。
                        x + ((int) paint.measureText(text, start, end)+ 2 * padding),
                        top + (( metrics.descent  - metrics.ascent) )  +UiUtils.dip2px(mContext,2)  +  2 * UiUtils.dip2px(mContext,tagPaddingTopBottom) )
                ,

                radius,
                radius,
                paint);
        paint.setColor(this.textColor);


        //畫文字,兩邊各增加8dp

        //因為字體要默認居中奠滑，因此要計算丹皱。默認頂部對齊。設置文字的位置宋税。
        canvas.drawText(text, start, end, x + padding, y - (titleTextSize - textSize) / 2 + UiUtils.dip2px(mContext,1)
                , paint);


        //將paint復原
        paint.setColor(originalColor);


    }
}

}

......

........

<declare-styleable name="TagsTextView">
<attr name="tagPaddingTopBottom" format="dimension" />
<attr name="tagRadius" format="dimension" />
<attr name="tagMargin" format="dimension"/>
<attr name="tagTextColor" format="color" />
<attr name="tagTextSize" format="dimension" />
<attr name="titleTextSize" format="dimension" />
<attr name="tagPaddingLeftRight" format="dimension" />
</declare-styleable>
使用方式

<TagsTextView
android:id="@+id/tagTitle"
android:gravity="center"
android:background="#e0f020"
app:tagPaddingLeftRight="5dp"
app:tagPaddingTopBottom="1dp"
app:tagTextSize="14dp"
app:titleTextSize="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
.........

實現(xiàn)效果：

image.png