Android 在内容前添加标签,方便换行的时候顶格

Android 在内容前添加标签,方便换行的时候顶格

本文记录在TextView上显示文字时，有时候要在文字的前面添加标签，但又要求文字换行的时候要顶格，这个时候我们就不能单纯的用两个控件去显示了，因为两个控件你会发现文字换行的时候无法顶格显示了。所以我们就要在文字上面做文章了。
废话不多说，先来看看效果图。下图就是最后的显示效果，前面的"置顶"和"精品"都是后面添加的文字标签，而真正的内容时后面的“牛年大吉大利…”

正文

下面的代码其实很简单，就是在内容的前面放标签文字。CenterImageSpan就是自定义后的ImageSpan,作用是居中。主要利用的就是SpannableStringBuilder 的特性具体看注释。

/**
     * 设置含标签的文字,这个标签只是颜色不同
     * 同时显示两个标签
     * @param tv 显示的textView
     * @param str 不带标签的内容
     * @param backres1 标签1背景色
     * @param tagstr1 标签1名称
     * @param backres2 标签2背景色
     * @param tagstr2  标签2名称
     * @param size  标签字体大小
     * @return 返回TextView,可以继续做其余的事
     */
    public static TextView setTagStringReturnText(TextView tv,String str,int backres1,String tagstr1,int backres2,String tagstr2,int size){
        //构造第一个标签，
        View view = LayoutInflater.from(tv.getContext()).inflate(R.layout.tagview, null);
        TextView tag = view.findViewById(R.id.tv_tag);
        tag.setText(tagstr1);
        tag.setTextSize(size);
        tag.setBackgroundResource(backres1);
        //由于第一个标签后还是标签，所以这里直接是 tagstr1+" "
        SpannableStringBuilder stringBuilder=new SpannableStringBuilder(tagstr1+" ");
        Bitmap bitmap=convertViewToBitmap(view);
        BitmapDrawable drawable = new BitmapDrawable(bitmap);
        drawable.setBounds(0, 0, tag.getWidth(), tag.getHeight());
        stringBuilder.setSpan( new CenterImageSpan(drawable), 0, tagstr1.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        //构造第二个标签
        View view2 = LayoutInflater.from(tv.getContext()).inflate(R.layout.tagview, null);
        TextView tag2 = view2.findViewById(R.id.tv_tag);
        tag2.setText(tagstr2);
        tag2.setTextSize(size);
        tag2.setBackgroundResource(backres2);
        //由于第二个标签后是跟的内容，所以这里直接是 tagstr2+" "+str
        SpannableStringBuilder stringBuilder2=new SpannableStringBuilder(tagstr2+" "+str);
        Bitmap bitmap2=convertViewToBitmap(view2);
        BitmapDrawable drawable2 = new BitmapDrawable(bitmap2);
        drawable2.setBounds(0, 0, tag2.getWidth(), tag2.getHeight());
        stringBuilder2.setSpan( new CenterImageSpan(drawable2), 0, tagstr2.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
		//把构造的两个标签合并起来显示就行
        tv.setText(stringBuilder.append(stringBuilder2));
        return tv;
    }
/**
     * 根据view返回bitmap
     * @param view
     * @return
     */
    public  static Bitmap convertViewToBitmap(View view) {
        view.setDrawingCacheEnabled(true);
        view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
        view.buildDrawingCache();
        Bitmap bitmap = view.getDrawingCache();
//        view.setDrawingCacheEnabled(false);
//        view.destroyDrawingCache();
        return bitmap;
    }

而文字的布局内容tagview就是：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/tv_tag"
        android:layout_width="wrap_content"
        android:text=""
        android:textColor="@color/white"
        android:paddingTop="1dp"
        android:paddingBottom="2dp"
        android:textSize="8sp"
        android:paddingRight="5dp"
        android:paddingLeft="5dp"
        android:layout_height="wrap_content"/>
</LinearLayout>

上面记录的是显示两个标签，但是显示一个标签或者显示多个标签都是这样的逻辑。

最后附上自定义的CenterImageSpan

public class CenterImageSpan  extends ImageSpan {

    public CenterImageSpan(@NonNull Bitmap b) {
        super(b);
    }

    public CenterImageSpan(@NonNull Bitmap b, int verticalAlignment) {
        super(b, verticalAlignment);
    }

    public CenterImageSpan(@NonNull Context context, @NonNull Bitmap b) {
        super(context, b);
    }

    public CenterImageSpan(@NonNull Context context, @NonNull Bitmap b, int verticalAlignment) {
        super(context, b, verticalAlignment);
    }

    public CenterImageSpan(@NonNull Drawable d) {
        super(d);
    }

    public CenterImageSpan(@NonNull Drawable d, int verticalAlignment) {
        super(d, verticalAlignment);
    }

    public CenterImageSpan(@NonNull Drawable d, @NonNull String source) {
        super(d, source);
    }

    public CenterImageSpan(@NonNull Drawable d, @NonNull String source, int verticalAlignment) {
        super(d, source, verticalAlignment);
    }

    public CenterImageSpan(@NonNull Context context, @NonNull Uri uri) {
        super(context, uri);
    }

    public CenterImageSpan(@NonNull Context context, @NonNull Uri uri, int verticalAlignment) {
        super(context, uri, verticalAlignment);
    }

    public CenterImageSpan(@NonNull Context context, int resourceId) {
        super(context, resourceId);
    }

    public CenterImageSpan(@NonNull Context context, int resourceId, int verticalAlignment) {
        super(context, resourceId, verticalAlignment);
    }

    @Override
    public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, @NonNull Paint paint) {
//        super.draw(canvas, text, start, end, x, top, y, bottom, paint);
        try {
            Drawable d = getDrawable();
            canvas.save();
            int transY = 0;
            transY = ((bottom-top) - d.getBounds().bottom) / 2+top;
            canvas.translate(x, transY);
            d.draw(canvas);
            canvas.restore();
        } catch (Exception e) {
        }
    }

    @Override
    public int getSize(@NonNull Paint paint, CharSequence text, int start, int end, @Nullable Paint.FontMetricsInt fm) {
//        return super.getSize(paint, text, start, end, fm);
        try {
            Drawable d = getDrawable();
            Rect rect = d.getBounds();
            if (fm != null) {
                Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
                int fontHeight = fmPaint.bottom - fmPaint.top;
                int drHeight = rect.bottom - rect.top;

                int top = drHeight / 2 - fontHeight / 4;
                int bottom = drHeight / 2 + fontHeight / 4;

                fm.ascent = -bottom;
                fm.top = -bottom;
                fm.bottom = top;
                fm.descent = top;
            }
            return rect.right;
        } catch (Exception e) {
            return 20;
        }
    }
}