在TextView前面（或后面）添加文本（或者图片）标签

2021-05-20 本文已影响0人幻雪之恋_0414

前言

大家都知道，前几年在TextView文本前添加自定义标签文本或标签图片还是比较火的，特别是一些电商项目。不过这几年，UI设计基本很少见到这种设计了，不过还是有些时候，还是会遇到一些在文本前加标签需求。如果使用TextView自带的drawableLeft属性，虽然可以满足一些常规需求，但是可定制化太低，而且文本换行时图片和文本会分离，达不到想要的效果。当然，我这里也只是提供了一种方法，实现一个需求是有千千万万种方法的！

效果图

废话不多说，按照惯例，来一波图：

有的朋友肯定会说这很简单啊，对的，的确很简单。其实我就是把常用的一些方法写到一起，供大家调用，而且不用修改原来的代码就可以设置标签，当然还有一些其他方法（比如：下划线，删除线，格式文本颜色，超链等等），只需要调用对应方法就可以了，节约大波时间。

如何使用

Step 1.先在 build.gradle(Project:XXX) 的 repositories 添加:

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Step 2. 然后在 build.gradle(Module:XXX) 的 dependencies 添加:

dependencies {
       implementation 'com.github.ChinaLike:TagTextView:0.0.8'
}

Step 3. 在XML中引用即可（其中一种方式举例）:

    <com.view.text.TagTextView
        android:id="@+id/tagTextView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginVertical="10dp"
        android:text="荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 支持移动联通电信"
        android:textColor="#666666"
        app:tvt_tag_background_color="#FF6464"
        app:tvt_tag_bottom_padding="1dp"
        app:tvt_tag_left_padding="20dp"
        app:tvt_tag_right_padding="20dp"
        app:tvt_tag_text="新品"
        app:tvt_tag_space="10dp"
        app:tvt_tag_top_padding="1dp"
        app:tvt_text_space="5dp" />

API介绍

TagTextView功能

xml属性

API	类型	默认值	描述	说明
`tvt_left_top_radius`	dimension		标签左上圆角
`tvt_left_bottom_radius`	dimension		标签左下圆角
`tvt_right_top_radius`	dimension		标签右上圆角
`tvt_right_bottom_radius`	dimension		标签右下圆角
`tvt_radius`	dimension	9999dp	标签圆角	当单独设置了标签圆角此方法对应方位圆角将失效
`tvt_tag_left_padding`	dimension	10dp	标签左边内边距
`tvt_tag_top_padding`	dimension		标签顶部内边距
`tvt_tag_right_padding`	dimension	10dp	标签右边内边距
`tvt_tag_bottom_padding`	dimension		标签底部内边距
`tvt_tag_padding`	dimension	0	标签内边距	当单独设置了标签内边距此方法对应方位内边距将失效
`tvt_tag_background_color`	color	Color.GRAY	标签背景颜色
`tvt_tag_space`	dimension	0	标签与标签的间隔
`tvt_text_space`	dimension	0	标签与文本的间隔
`tvt_tag_location`	enum	start	标签显示的位置	start开始位置，end结束位置
`tvt_tag_start_background_color`	color		渐变背景开始颜色
`tvt_tag_end_background_color`	color		渐变背景结束颜色
`tvt_tag_text_size`	dimension	14sp	标签文本大小
`tvt_tag_text_color`	color	Color.WHITE	标签文本颜色
`tvt_first_tag_left_space`	dimension	0	第一个标签距离左边距离
`tvt_tag_text`	string		标签内容	如果`tvt_tag_text` 、`tvt_tag_image`都设置的话，只有`tvt_tag_image`生效
`tvt_tag_image`	reference		图片标签	如果`tvt_tag_text` 、`tvt_tag_image`都设置的话，只有`tvt_tag_image`生效
`tvt_tag_width`	dimension		标签的自定义宽度
`tvt_tag_height`	dimension		标签的自定义高度

属性

API	类型	默认值	描述	说明
`leftTopRadius`	Float		标签左上圆角
`leftBottomRadius`	Float		标签左下圆角
`rightTopRadius`	Float		标签右上圆角
`rightBottomRadius`	Float		标签右下圆角
`radius`	Float	9999F	标签圆角	当单独设置了标签圆角此方法对应方位圆角将失效
`tagLeftPadding`	Int	10dp	标签左边内边距
`tagTopPadding`	Int		标签顶部内边距
`tagRightPadding`	Int	10dp	标签右边内边距
`tagBottomPadding`	Int		标签底部内边距
`tagPadding`	Int	0	标签内边距	当单独设置了标签内边距此方法对应方位内边距将失效
`tagBackgroundColor`	Int	Color.GRAY	标签背景颜色
`tagSpace`	Int	0	标签与标签的间隔
`textSpace`	Int	0	标签与文本的间隔
`tagLocation`	Int	`TagLocation.START`	标签显示的位置	`TagLocation.START`开始位置，`TagLocation.END`结束位置
`tagStartBackgroundColor`	Int		渐变背景开始颜色
`tagEndBackgroundColor`	Int		渐变背景结束颜色
`tagTextSize`	Float	14sp	标签文本大小
`tagTextColor`	Int	Color.WHITE	标签文本颜色
`firstTagLeftSpace`	Int	0	第一个标签距离左边距离
`tagText`	String		标签内容	如果`tagText` 、`tagImage`都设置的话，只有`tagImage`生效
`tagImage`	Drawable		图片标签	如果`tagText` 、`tagImage`都设置的话，只有`tagImage`生效
`tagWidth`	Int		标签的自定义宽度
`tagHeight`	Int		标签的自定义高度

方法

setTextTag(params)

设置标签

params:标签内容，支持以下格式

 BaseTagAdapter<*>:自定义适配器,自己实现标签显示样式，自定义中只有tvt_tag_space、tvt_text_space、tvt_tag_location、tvt_first_tag_left_space字段有效

 MutableList<T>:多个标签，T支持String、DrawableRes、Bitmap、Drawable

 String:字符串标签，如果是一个只需要传入一个字符串，多个就传入多个字符串

 Bitmap:图片标签，如果是一个只需要传入一个Bitmap，多个就传入多个Bitmap

 Int:图片标签，如果是一个只需要传入一个DrawableRes，多个就传入多个DrawableRes

 Drawable:图片标签，如果是一个只需要传入一个Drawable，多个就传入多个Drawable

扩展功能（不支持xml配置样式）

setTextTag(config:TagConfig,params:Any)

设置标签

config: 标签样式，可选，参考TagConfig

params:标签内容，支持以下格式：

 BaseTagAdapter<*>:自定义适配器,自己实现标签显示样式MutableList<T>:多个标签，T支持String、DrawableRes、Bitmap、Drawable
 
 String:字符串标签，如果是一个只需要传入一个字符串，多个就传入多个字符串
 
 Bitmap:图片标签，如果是一个只需要传入一个Bitmap，多个就传入多个Bitmap
 
 Int:图片标签，如果是一个只需要传入一个DrawableRes，多个就传入多个DrawableRes
 
 Drawable:图片标签，如果是一个只需要传入一个Drawable，多个就传入多个Drawable

setUnderline(underline: String)

设置文本下划线

underline:需要加下划线的文本，如果多个一样，只有第一个加下划线
setUnderline(startIndex: Int, endIndex: Int)

设置文本下划线

startIndex:开始下标

endIndex:结束下标
setUnderline(vararg indexRang: IntArray)

设置文本下划线

indexRang:整型数组，大小为2，可传多组
setUnderline()

设置文本下划线

所有文本都设置下划线
setDeleteLine(underline: String)

设置文本删除线

underline:需要加删除线的文本，如果多个一样，只有第一个加删除线
setDeleteLine(startIndex: Int, endIndex: Int)

设置文本删除线

startIndex:开始下标

endIndex:结束下标
setDeleteLine(vararg indexRang: IntArray)

设置文本删除线

indexRang:整型数组，大小为2，可传多组
setDeleteLine()

设置文本删除线

所有文本都设置删除线
setSpecificTextColor(@ColorInt color: Int,specificText: String，isUnderlineText: Boolean = false,onTagClickListener: OnTagClickListener? = null)

设置指定文字颜色

color:制定文本颜色

specificText:指定文本

isUnderlineText:是否显示下划线，可选，默认值false

onTagClickListener:点击事件响应，可选，-1文本被点击，其他是对应下标被点击
setSpecificTextColor(@ColorInt color: Int,startIndex: Int，endIndex: Int,isUnderlineText: Boolean = false,onTagClickListener: OnTagClickListener? = null)

设置指定文字颜色

color:制定文本颜色

startIndex:开始下标

endIndex:结束下标

isUnderlineText:是否显示下划线，可选，默认值false

onTagClickListener:点击事件响应，可选，-1文本被点击，其他是对应下标被点击
setSpecificTextColor(data: MutableList<SpanConfig>,onTagClickListener: OnTagClickListener? = null)

设置指定文字颜色

data:自定义多个指定文本的颜色

onTagClickListener:点击事件响应，可选，-1文本被点击，其他是对应下标被点击

setURLSpan(startIndex: Int,endIndex: Int,type: SpanType,linkText: String,@ColorInt color: Int? = null,isUnderlineText: Boolean = false)

设置超链

startIndex:开始下标

endIndex:结束下标

type:超链接类型，参考SpanType

linkText:链接文本，比如跳转电话，只需要传入电话号码就可以

color:超链文本的颜色

isUnderlineText:是否显示下划线，可选，默认值false
setURLSpan(data: MutableList<URLSpanConfig>?)

设置超链

data:自定义超链，参考URLSpanConfig

示例介绍

普通标签

xml实现方式

        <com.view.text.TagTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
                android:textColor="#666666"
                app:tvt_tag_background_color="#FF0040"
                app:tvt_tag_bottom_padding="1dp"
                app:tvt_tag_left_padding="15dp"
                app:tvt_tag_right_padding="15dp"
                app:tvt_tag_top_padding="1dp"
                app:tvt_tag_text="新品" />

Java代码实现方式

        TagTextView tagTextView = new TagTextView(this);
        tagTextView.setTagLeftPadding((int) DensityUtil.INSTANCE.dp2px(this,15F));
        tagTextView.setTagRightPadding((int) DensityUtil.INSTANCE.dp2px(this,15F));
        tagTextView.setTagTopPadding((int) DensityUtil.INSTANCE.dp2px(this,1F));
        tagTextView.setTagBottomPadding((int) DensityUtil.INSTANCE.dp2px(this,1F));
        tagTextView.setTagBackgroundColor(Color.parseColor("#FF0040"));
        tagTextView.setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机");
        tagTextView.setTextTag("新品");

Kotlin代码实现方式

    TagTextView(this).apply {
            tagLeftPadding = DensityUtil.dp2px(this@MainActivity3, 15f).toInt()
            tagRightPadding = DensityUtil.dp2px(this@MainActivity3, 15f).toInt()
            tagTopPadding = DensityUtil.dp2px(this@MainActivity3, 1f).toInt()
            tagBottomPadding = DensityUtil.dp2px(this@MainActivity3, 1f).toInt()
            tagBackgroundColor = Color.parseColor("#FF0040")
            text = "荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
            setTextTag("新品")
        }

多个标签

xml实现方式

第一步

    <com.view.text.TagTextView
        android:id="@+id/tagTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginVertical="10dp"
        android:text="荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
        android:textColor="#666666"
        app:tvt_tag_background_color="#FF6464"
        app:tvt_tag_bottom_padding="1dp"
        app:tvt_tag_left_padding="20dp"
        app:tvt_tag_right_padding="20dp"
        app:tvt_tag_space="10dp"
        app:tvt_tag_top_padding="1dp"
        app:tvt_text_space="5dp" />

第二步（Java实现）

        TagTextView tagTextView = findViewById(R.id.tagTextView);
        tagTextView.setTextTag("新品", "黄金", "心悦");

或（Kotlin实现）

        tagTextView.setTextTag("新品", "黄金", "心悦")

Java代码实现方式

        TagTextView tagTextView = new TagTextView(this);
        tagTextView.setTagLeftPadding((int) DensityUtil.INSTANCE.dp2px(this,20F));
        tagTextView.setTagRightPadding((int) DensityUtil.INSTANCE.dp2px(this,20F));
        tagTextView.setTagTopPadding((int) DensityUtil.INSTANCE.dp2px(this,1F));
        tagTextView.setTagBottomPadding((int) DensityUtil.INSTANCE.dp2px(this,1F));
        tagTextView.setTagBackgroundColor(Color.parseColor("#FF6464"));
        tagTextView.setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机");
        tagTextView.setTextColor(Color.parseColor("#666666"));
        tagTextView.setTagSpace((int) DensityUtil.INSTANCE.dp2px(this,10F));
        tagTextView.setTextSpace((int) DensityUtil.INSTANCE.dp2px(this,5F));
        tagTextView.setTextTag("新品", "黄金", "心悦");

Kotlin代码实现方式

        val tagTextView = TagTextView(this).apply {
            tagLeftPadding = DensityUtil.dp2px(this@MainActivity3, 20f).toInt()
            tagRightPadding = DensityUtil.dp2px(this@MainActivity3, 20f).toInt()
            tagTopPadding = DensityUtil.dp2px(this@MainActivity3, 1f).toInt()
            tagBottomPadding = DensityUtil.dp2px(this@MainActivity3, 1f).toInt()
            tagBackgroundColor = Color.parseColor("#FF6464")
            text = "荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
            setTextColor(Color.parseColor("#666666"))
            tagSpace = DensityUtil.dp2px(this@MainActivity3, 10f).toInt()
            textSpace = DensityUtil.dp2px(this@MainActivity3, 5f).toInt()
            setTextTag("新品", "黄金", "心悦")
        }

渐变背景

xml实现方式

第一步

    <com.view.text.TagTextView
        android:id="@+id/tagTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
        android:textColor="#666666"
        app:tvt_tag_end_background_color="@color/tagEndBackgroundColor"
        app:tvt_tag_start_background_color="@color/tagStartBackgroundColor"/>

第二部（Java实现）

        TagTextView tagTextView = findViewById(R.id.tagTextView);
        tagTextView.setTextTag("优选", "新上市", "推荐");

或（Kotlin实现）

        tagTextView.setTextTag("优选", "新上市", "推荐")

Java代码实现方式

        TagTextView tagTextView = new TagTextView(this);
        tagTextView.setTagStartBackgroundColor(ContextCompat.getColor(this,R.color.tagStartBackgroundColor));
        tagTextView.setTagEndBackgroundColor(ContextCompat.getColor(this,R.color.tagEndBackgroundColor));
        tagTextView.setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机");
        tagTextView.setTextColor(Color.parseColor("#666666"));
        tagTextView.setTextTag("优选", "新上市", "推荐");

Kotlin代码实现方式

        val tagTextView = TagTextView(this).apply {
            tagStartBackgroundColor = ContextCompat.getColor(this@MainActivity3, R.color.tagStartBackgroundColor)
            tagEndBackgroundColor = ContextCompat.getColor(this@MainActivity3, R.color.tagEndBackgroundColor)
            setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机")
            setTextColor(Color.parseColor("#666666"))
            setTextTag("优选", "新上市", "推荐")
        }

普通图片标签

xml实现方式

    <com.view.text.TagTextView
        android:id="@+id/tagTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
        android:textColor="#666666"
        app:tvt_tag_image="@mipmap/notice"
        app:tvt_tag_space="10dp"
        app:tvt_text_space="5dp"/>

Java代码实现方式

        TagTextView tagTextView = new TagTextView(this);
        tagTextView.setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机");
        tagTextView.setTextColor(Color.parseColor("#666666"));
        tagTextView.setTagSpace((int) DensityUtil.INSTANCE.dp2px(this,10F));
        tagTextView.setTextSpace((int) DensityUtil.INSTANCE.dp2px(this,5F));
        tagTextView.setTextTag(getResources().getDrawable(R.mipmap.notice));

Kotlin代码实现方式

        val tagTextView = TagTextView(this).apply {
            text = "荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
            setTextColor(Color.parseColor("#666666"))
            tagSpace = dp2px(this@MainActivity3, 10f).toInt()
            textSpace = dp2px(this@MainActivity3, 5f).toInt()
            setTextTag(resources.getDrawable(R.mipmap.notice))
        }

多个图片标签

xml实现方式

第一步

    <com.view.text.TagTextView
        android:id="@+id/tagTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
        android:textColor="#666666"
        app:tvt_tag_space="10dp"/>

第二步（Java实现）

        TagTextView tagTextView = findViewById(R.id.tagTextView);
        tagTextView.setTextTag(R.mipmap.icon_hot, R.mipmap.icon_new2, R.mipmap.icon_new3);

或（Kotlin实现）

        tagTextView.setTextTag(R.mipmap.icon_hot, R.mipmap.icon_new2, R.mipmap.icon_new3);

Java代码实现方式

        TagTextView tagTextView = new TagTextView(this);
        tagTextView.setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机");
        tagTextView.setTextColor(Color.parseColor("#666666"));
        tagTextView.setTagSpace((int) DensityUtil.INSTANCE.dp2px(this,10F));
        tagTextView.setTextTag(R.mipmap.icon_hot, R.mipmap.icon_new2, R.mipmap.icon_new3);

Kotlin代码实现方式

        val tagTextView = TagTextView(this).apply {
            text = "荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
            setTextColor(Color.parseColor("#666666"))
            tagSpace = dp2px(this@MainActivity3, 10f).toInt()
            setTextTag(R.mipmap.icon_hot, R.mipmap.icon_new2, R.mipmap.icon_new3);
        }

自定义标签

xml实现方式

第一步

    <com.view.text.TagTextView
        android:id="@+id/tagTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
        android:textColor="#666666"
        app:tvt_text_space="10dp"
        app:tvt_tag_space="5dp"/>

第二步（Java实现）

        List<String> data = new ArrayList();
        data.add("");
        data.add("圆角标签");
        data.add("有边框标签");
        data.add("渐变标签");
        data.add("自定义圆角");

        TagTextView tagTextView = findViewById(R.id.tagTextView);
        tagTextView.setTextTag(new BaseTagAdapter<String>(this,data) {
            @NotNull
            @Override
            public View convert(int i) {
                View view = new View(MainActivity.this);
                if (i == 0){
                    view = new AppCompatImageView(MainActivity.this);
                    ((AppCompatImageView) view).setImageResource(R.mipmap.notice);
                }else if (i == 1){
                    view = LayoutInflater.from(MainActivity.this).inflate(R.layout.adapter_custom_tag,null);
                    view.findViewById(R.id.rootView).setBackgroundResource(R.drawable.radius_fill_bg);
                    AppCompatTextView textView = view.findViewById(R.id.tagText);
                    textView.setText(data.get(i));
                    textView.setTextColor(Color.RED);
                    textView.setTextSize(TypedValue.COMPLEX_UNIT_PX,DensityUtil.INSTANCE.sp2px(MainActivity.this,10F));
                }else if (i == 2){
                    view = LayoutInflater.from(MainActivity.this).inflate(R.layout.adapter_custom_tag,null);
                    AppCompatTextView textView = view.findViewById(R.id.tagText);
                    textView.setText(data.get(i));
                }else if (i == 3){
                    view = LayoutInflater.from(MainActivity.this).inflate(R.layout.adapter_custom_tag,null);
                    view.findViewById(R.id.rootView).setBackgroundResource(R.drawable.gra_bg);
                    AppCompatTextView textView = view.findViewById(R.id.tagText);
                    textView.setText(data.get(i));
                }else if (i == 4){
                    view = LayoutInflater.from(MainActivity.this).inflate(R.layout.adapter_custom_tag,null);
                    view.findViewById(R.id.rootView).setBackgroundResource(R.drawable.custom_radius);
                    AppCompatTextView textView = view.findViewById(R.id.tagText);
                    textView.setText(data.get(i));
                }
                return view;
            }
        });

或（Kotlin实现）

        val data: MutableList<String> = mutableListOf("", "圆角标签", "有边框标签", "渐变标签", "自定义圆角")
        findViewById<TagTextView>(R.id.tagTextView).setTextTag(
                object : BaseTagAdapter<String>(this@MainActivity3, data) {
                    override fun convert(position: Int): View {
                        var view: View = View(context)
                        when (position) {
                            0 -> {
                                view = AppCompatImageView(context).apply {
                                    setImageResource(R.mipmap.notice)
                                }
                            }
                            1 -> {
                                view = LayoutInflater.from(context).inflate( R.layout.adapter_custom_tag, null )
                                view.findViewById<LinearLayout>(R.id.rootView).setBackgroundResource(R.drawable.radius_fill_bg)
                                view.findViewById<AppCompatTextView>(R.id.tagText).apply {
                                    text = "${data[position]}"
                                    setTextColor(Color.RED)
                                    setTextSize( TypedValue.COMPLEX_UNIT_PX, DensityUtil.sp2px(this@MainActivity3, 10F))
                                }
                            }
                            2 -> {
                                view = LayoutInflater.from(context).inflate( R.layout.adapter_custom_tag, null)
                                view.findViewById<AppCompatTextView>(R.id.tagText).text = "${data[position]}"
                            }
                            3 -> {
                                view = LayoutInflater.from(context).inflate(R.layout.adapter_custom_tag,null)
                                view.findViewById<LinearLayout>(R.id.rootView).setBackgroundResource(R.drawable.gra_bg)
                                view.findViewById<AppCompatTextView>(R.id.tagText).text = "${data[position]}"
                            }
                            4 -> {
                                view = LayoutInflater.from(context).inflate(R.layout.adapter_custom_tag,null)
                                view.findViewById<LinearLayout>(R.id.rootView).setBackgroundResource(R.drawable.custom_radius)
                                view.findViewById<AppCompatTextView>(R.id.tagText).text = "${data[position]}"
                            }
                        }
                        return view
                    }

                }
        )

Java代码实现方式

        List<String> data = new ArrayList();
        data.add("");
        data.add("圆角标签");
        data.add("有边框标签");
        data.add("渐变标签");
        data.add("自定义圆角");

        TagTextView tagTextView = new TagTextView(this);
        tagTextView.setTagSpace((int) DensityUtil.INSTANCE.dp2px(this,5F));
        tagTextView.setTextSpace((int) DensityUtil.INSTANCE.dp2px(this,10F));
        tagTextView.setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机");
        tagTextView.setTextColor(Color.parseColor("#666666"));
        tagTextView.setTextTag(new BaseTagAdapter<String>(this,data) {
            @NotNull
            @Override
            public View convert(int i) {
                View view = new View(MainActivity.this);
                if (i == 0){
                    view = new AppCompatImageView(MainActivity.this);
                    ((AppCompatImageView) view).setImageResource(R.mipmap.notice);
                }else if (i == 1){
                    view = LayoutInflater.from(MainActivity.this).inflate(R.layout.adapter_custom_tag,null);
                    view.findViewById(R.id.rootView).setBackgroundResource(R.drawable.radius_fill_bg);
                    AppCompatTextView textView = view.findViewById(R.id.tagText);
                    textView.setText(data.get(i));
                    textView.setTextColor(Color.RED);
                    textView.setTextSize(TypedValue.COMPLEX_UNIT_PX,DensityUtil.INSTANCE.sp2px(MainActivity.this,10F));
                }else if (i == 2){
                    view = LayoutInflater.from(MainActivity.this).inflate(R.layout.adapter_custom_tag,null);
                    AppCompatTextView textView = view.findViewById(R.id.tagText);
                    textView.setText(data.get(i));
                }else if (i == 3){
                    view = LayoutInflater.from(MainActivity.this).inflate(R.layout.adapter_custom_tag,null);
                    view.findViewById(R.id.rootView).setBackgroundResource(R.drawable.gra_bg);
                    AppCompatTextView textView = view.findViewById(R.id.tagText);
                    textView.setText(data.get(i));
                }else if (i == 4){
                    view = LayoutInflater.from(MainActivity.this).inflate(R.layout.adapter_custom_tag,null);
                    view.findViewById(R.id.rootView).setBackgroundResource(R.drawable.custom_radius);
                    AppCompatTextView textView = view.findViewById(R.id.tagText);
                    textView.setText(data.get(i));
                }
                return view;
            }
        });

Kotlin代码实现方式

        val data: MutableList<String> = mutableListOf("", "圆角标签", "有边框标签", "渐变标签", "自定义圆角")
        val tagTextView = TagTextView(this).apply {
            tagSpace = DensityUtil.dp2px(this@MainActivity3, 5F).toInt()
            textSpace = DensityUtil.dp2px(this@MainActivity3, 10F).toInt()
            text = "荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
            setTextColor(Color.parseColor("#666666"))
            setTextTag(
                    object : BaseTagAdapter<String>(this@MainActivity3, data) {
                        override fun convert(position: Int): View {
                            var view: View = View(context)
                            when (position) {
                                0 -> {
                                    view = AppCompatImageView(context).apply {
                                        setImageResource(R.mipmap.notice)
                                    }
                                }
                                1 -> {
                                    view = LayoutInflater.from(context).inflate(R.layout.adapter_custom_tag, null)
                                    view.findViewById<LinearLayout>(R.id.rootView).setBackgroundResource(R.drawable.radius_fill_bg)
                                    view.findViewById<AppCompatTextView>(R.id.tagText).apply {
                                        text = "${data[position]}"
                                        setTextColor(Color.RED)
                                        setTextSize(TypedValue.COMPLEX_UNIT_PX, DensityUtil.sp2px(this@MainActivity3, 10F))
                                    }
                                }
                                2 -> {
                                    view = LayoutInflater.from(context).inflate(R.layout.adapter_custom_tag, null)
                                    view.findViewById<AppCompatTextView>(R.id.tagText).text = "${data[position]}"
                                }
                                3 -> {
                                    view = LayoutInflater.from(context).inflate(R.layout.adapter_custom_tag, null)
                                    view.findViewById<LinearLayout>(R.id.rootView).setBackgroundResource(R.drawable.gra_bg)
                                    view.findViewById<AppCompatTextView>(R.id.tagText).text = "${data[position]}"
                                }
                                4 -> {
                                    view = LayoutInflater.from(context).inflate(R.layout.adapter_custom_tag, null)
                                    view.findViewById<LinearLayout>(R.id.rootView).setBackgroundResource(R.drawable.custom_radius)
                                    view.findViewById<AppCompatTextView>(R.id.tagText).text = "${data[position]}"
                                }
                            }
                            return view
                        }

                    }
            )
        }

<font color=red>涉及到的示例文件如果没有，可以滑动到底部查看源码，在demo可以找到</font>

下划线

Java实现

        AppCompatTextView tagTextView = new AppCompatTextView(this);
        tagTextView.setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机");
        //根据下标设置
        TextViewExKt.setUnderline(tagTextView,0,10);
        //根据指定字符串设置
        TextViewExKt.setUnderline(tagTextView,"5G");
        //支持多个设置
        int[] params = new int[2];
        params[0] = 0;
        params[1] = 10;
        TextViewExKt.setUnderline(tagTextView,params);
        //设置全部
        TextViewExKt.setUnderline(tagTextView);

Kotlin实现

        val tagTextView = AppCompatTextView(this).apply {
            text = "荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
        }
        //根据下标设置
        tagTextView.setUnderline(0,10)
        //根据指定字符串设置
        tagTextView.setUnderline("5G")
        //支持多个设置
        tagTextView.setUnderline(intArrayOf(0,10))
        //设置全部
        tagTextView.setUnderline()

删除线

Java实现

        AppCompatTextView tagTextView = new AppCompatTextView(this);
        tagTextView.setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机");
        //根据下标设置
        TextViewExKt.setDeleteLine(tagTextView,0,10);
        //根据指定字符串设置
        TextViewExKt.setDeleteLine(tagTextView,"5G");
        //支持多个设置
        int[] params = new int[2];
        params[0] = 0;
        params[1] = 10;
        TextViewExKt.setDeleteLine(tagTextView,params);
        //设置全部
        TextViewExKt.setDeleteLine(tagTextView);

Kotlin实现

        val tagTextView = AppCompatTextView(this).apply {
            text = "荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
        }
        //根据下标设置
        tagTextView.setDeleteLine(0,10)
        //根据指定字符串设置
        tagTextView.setDeleteLine("5G")
        //支持多个设置
        tagTextView.setDeleteLine(intArrayOf(0,10))
        //设置全部
        tagTextView.setDeleteLine()

格式化字符串

Java实现

        AppCompatTextView tagTextView = new AppCompatTextView(this);
        tagTextView.setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机");
        //指定单个字符串
        TextViewExKt.setSpecificTextColor(tagTextView, Color.GREEN, "荣耀V40轻奢版", true, index -> {
            if (index == -1){
                Toast.makeText(MainActivity.this,"文本被点击",Toast.LENGTH_SHORT).show();
            }else {
                Toast.makeText(MainActivity.this, "第"+index+"被点击", Toast.LENGTH_SHORT).show();
            }
        });
        //指定单个下标
        TextViewExKt.setSpecificTextColor(tagTextView, Color.GREEN, 0, 10, true, index -> {
            if (index == -1){
                Toast.makeText(MainActivity.this,"文本被点击",Toast.LENGTH_SHORT).show();
            }else {
                Toast.makeText(MainActivity.this, "第"+index+"被点击", Toast.LENGTH_SHORT).show();
            }
        });
        //多个
        List<SpanConfig> params = new ArrayList<>();
        SpanConfig spanConfig1 = new SpanConfig(0, 2);
        params.add(spanConfig1);
        SpanConfig spanConfig2 = new SpanConfig(17, 26, Color.GREEN, true);
        params.add(spanConfig2);
        TextViewExKt.setSpecificTextColor(tagTextView, params, index -> {
            if (index == -1){
                Toast.makeText(MainActivity.this,"文本被点击",Toast.LENGTH_SHORT).show();
            }else {
                Toast.makeText(MainActivity.this, "第"+index+"被点击", Toast.LENGTH_SHORT).show();
            }
        });

Kotlin实现

        val tagTextView = AppCompatTextView(this).apply {
            text = "荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
        }
        //指定单个字符串
        tagTextView.setSpecificTextColor(Color.GREEN, "荣耀V40轻奢版", true, object : OnTagClickListener {
            override fun onTagClick(tagIndex: Int) {
                if (tagIndex == -1) {
                    Toast.makeText(this@MainActivity3, "文本被点击", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(this@MainActivity3, "第${tagIndex}被点击", Toast.LENGTH_SHORT).show()
                }
            }

        })
        //指定单个下标
        tagTextView.setSpecificTextColor(Color.GREEN, 0, 10, true, object : OnTagClickListener {
            override fun onTagClick(tagIndex: Int) {
                if (tagIndex == -1) {
                    Toast.makeText(this@MainActivity3, "文本被点击", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(this@MainActivity3, "第${tagIndex}被点击", Toast.LENGTH_SHORT).show()
                }
            }
        })
        //多个
        tagTextView.setSpecificTextColor(mutableListOf(SpanConfig(0, 2), SpanConfig(17, 26, Color.GREEN, true)), object : OnTagClickListener {
            override fun onTagClick(tagIndex: Int) {
                if (tagIndex == -1) {
                    Toast.makeText(this@MainActivity3, "文本被点击", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(this@MainActivity3, "第${tagIndex}被点击", Toast.LENGTH_SHORT).show()
                }
            }

        })

超链

Java实现

        AppCompatTextView tagTextView = new AppCompatTextView(this);
        tagTextView.setText("荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机");
        //单个超链实现
        TextViewExKt.setURLSpan(tagTextView, 0, 10, TEL.INSTANCE, "1234", Color.RED, true);
        //  多个超链实现
        List<URLSpanConfig> params = new ArrayList<>();
        URLSpanConfig config1 = new URLSpanConfig(0,11,TEL.INSTANCE,"12345",Color.RED,false);
        params.add(config1);
        URLSpanConfig config2 = new URLSpanConfig(12,15,HTTP.INSTANCE,"http://www.baidu.com",Color.GREEN,true);
        params.add(config2);
        TextViewExKt.setURLSpan(tagTextView,params);

Kotlin实现

        val tagTextView = AppCompatTextView(this).apply {
            text = "荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+128GB钛空银 移动联通电信5G 双卡双待手机"
        }
        //单个超链实现
        tagTextView.setURLSpan(0, 10, SpanType.TEL, "1234", Color.RED, true)
        //  多个超链实现
        tagTextView.setURLSpan(mutableListOf(URLSpanConfig(0,11,SpanType.TEL,"12345"),URLSpanConfig(12,15,SpanType.HTTP,"http://www.baidu.com",Color.GREEN,true)))

如有问题欢迎留言源码地址

在TextView前面（或后面）添加文本（或者图片）标签

前言

效果图

如何使用

API介绍

TagTextView功能

扩展功能（不支持xml配置样式）

示例介绍

猜你喜欢

热点阅读