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

前言

大家都知道,前几年在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_texttvt_tag_image都设置的话,只有tvt_tag_image生效
tvt_tag_image reference 图片标签 如果tvt_tag_texttvt_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 标签内容 如果tagTexttagImage都设置的话,只有tagImage生效
tagImage Drawable 图片标签 如果tagTexttagImage都设置的话,只有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实现方式
  1. 第一步
    <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实现)
        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实现方式
  1. 第一步
    <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实现)
        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实现方式
  1. 第一步
    <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实现)
        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实现方式
  1. 第一步
    <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实现)
        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)))

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,467评论 1 45
  • HTML是一种超文本标记语言 一、选择器 类选择器:.class id选择器:#id 通配选择器:*(选择所有元素...
    行走在路上的大熊阅读 414评论 0 1
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  • 1.1、什么是HTML语义化?有什么好处? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者...
    倾城一梦1123阅读 2,408评论 1 11
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,534评论 28 53