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

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

前言

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

效果图

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

screenshot.jpg

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

如何使用

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_radiusdimension标签左上圆角
tvt_left_bottom_radiusdimension标签左下圆角
tvt_right_top_radiusdimension标签右上圆角
tvt_right_bottom_radiusdimension标签右下圆角
tvt_radiusdimension9999dp标签圆角当单独设置了标签圆角此方法对应方位圆角将失效
tvt_tag_left_paddingdimension10dp标签左边内边距
tvt_tag_top_paddingdimension标签顶部内边距
tvt_tag_right_paddingdimension10dp标签右边内边距
tvt_tag_bottom_paddingdimension标签底部内边距
tvt_tag_paddingdimension0标签内边距当单独设置了标签内边距此方法对应方位内边距将失效
tvt_tag_background_colorcolorColor.GRAY标签背景颜色
tvt_tag_spacedimension0标签与标签的间隔
tvt_text_spacedimension0标签与文本的间隔
tvt_tag_locationenumstart标签显示的位置start开始位置,end结束位置
tvt_tag_start_background_colorcolor渐变背景开始颜色
tvt_tag_end_background_colorcolor渐变背景结束颜色
tvt_tag_text_sizedimension14sp标签文本大小
tvt_tag_text_colorcolorColor.WHITE标签文本颜色
tvt_first_tag_left_spacedimension0第一个标签距离左边距离
tvt_tag_textstring标签内容如果tvt_tag_texttvt_tag_image都设置的话,只有tvt_tag_image生效
tvt_tag_imagereference图片标签如果tvt_tag_texttvt_tag_image都设置的话,只有tvt_tag_image生效
tvt_tag_widthdimension标签的自定义宽度
tvt_tag_heightdimension标签的自定义高度

属性

API类型默认值描述版本说明说明
leftTopRadiusFloat标签左上圆角
leftBottomRadiusFloat标签左下圆角
rightTopRadiusFloat标签右上圆角
rightBottomRadiusFloat标签右下圆角
radiusFloat9999F标签圆角当单独设置了标签圆角此方法对应方位圆角将失效
tagLeftPaddingInt10dp标签左边内边距
tagTopPaddingInt标签顶部内边距
tagRightPaddingInt10dp标签右边内边距
tagBottomPaddingInt标签底部内边距
tagPaddingInt0标签内边距当单独设置了标签内边距此方法对应方位内边距将失效
tagBackgroundColorIntColor.GRAY标签背景颜色
tagSpaceInt0标签与标签的间隔
textSpaceInt0标签与文本的间隔
tagLocationIntTagLocation.START标签显示的位置TagLocation.START开始位置,TagLocation.END结束位置
tagStartBackgroundColorInt渐变背景开始颜色
tagEndBackgroundColorInt渐变背景结束颜色
tagTextSizeFloat14sp标签文本大小
tagTextColorIntColor.WHITE标签文本颜色
firstTagLeftSpaceInt0第一个标签距离左边距离
tagTextString标签内容如果tagTexttagImage都设置的话,只有tagImage生效
tagImageDrawable图片标签如果tagTexttagImage都设置的话,只有tagImage生效
tagWidthInt标签的自定义宽度
tagHeightInt标签的自定义高度

方法

  • 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,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?)

    设置超链

    data:自定义超链,参考URLSpanConfig

示例介绍

普通标签

QQ20210508-180834@2x.png

  • 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("新品")
        }
复制代码

多个标签

QQ20210508-181615@2x.png

  • 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("新品", "黄金", "心悦")
        }
复制代码

渐变背景

QQ20210508-181903@2x.png

  • 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("优选", "新上市", "推荐")
        }
复制代码

普通图片标签

QQ20210510-162029@2x.png

  • 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))
        }
复制代码

多个图片标签

QQ20210508-181946@2x.png

  • 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);
        }
复制代码

自定义标签

QQ20210508-182024@2x.png

  • 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
                        }

                    }
            )
        }
复制代码

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

下划线

QQ20210511-103544@2x.png

  • 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()
复制代码

删除线

QQ20210511-103612@2x.png

  • 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()
复制代码

格式化字符串

QQ20210511-103646@2x.png

  • 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()
                }
            }

        })
复制代码

超链

QQ20210511-103714@2x.png

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

复制代码

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

文章分类
Android
文章标签