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

原创

前端小tips

发布于 2021-11-30 15:51:55

2.6K0

发布于 2021-11-30 15:51:55

前言

大家都知道，前几年在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 } } ) }

涉及到的示例文件如果没有，可以滑动到底部查看源码，在demo可以找到

下划线

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)))

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

textview