在TextView前面(或后面)添加文本(或者图片)标签

2021-11-30 15:51:55 浏览数 (1)

前言

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

效果图

废话不多说,按照惯例,来一波图:

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

如何使用

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

代码语言:javascript复制
allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

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

代码语言:javascript复制
dependencies {
       implementation 'com.github.ChinaLike:TagTextView:0.0.8'
}

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

代码语言:javascript复制
    <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:标签内容,支持以下格式

代码语言:javascript复制
     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:标签内容,支持以下格式:

代码语言:javascript复制
     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实现方式
  1. 第一步
代码语言:javascript复制
    <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" />
  1. 第二步(Java实现)
代码语言:javascript复制
        TagTextView tagTextView = findViewById(R.id.tagTextView);
        tagTextView.setTextTag("新品", "黄金", "心悦");

或(Kotlin实现)

代码语言:javascript复制
        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实现方式
  1. 第一步
代码语言:javascript复制
    <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"/>
  1. 第二部(Java实现)
代码语言:javascript复制
        TagTextView tagTextView = findViewById(R.id.tagTextView);
        tagTextView.setTextTag("优选", "新上市", "推荐");

或(Kotlin实现)

代码语言:javascript复制
        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实现方式
  1. 第一步
代码语言:javascript复制
    <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"/>
  1. 第二步(Java实现)
代码语言:javascript复制
        TagTextView tagTextView = findViewById(R.id.tagTextView);
        tagTextView.setTextTag(R.mipmap.icon_hot, R.mipmap.icon_new2, R.mipmap.icon_new3);

或(Kotlin实现)

代码语言:javascript复制
        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实现方式
  1. 第一步
代码语言:javascript复制
    <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"/>
  1. 第二步(Java实现)
代码语言:javascript复制
        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实现)

代码语言:javascript复制
        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)))

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

0 人点赞