preface

As we all know, a few years ago in the TextView text to add a custom tag text or tag picture is relatively popular, especially some e-commerce projects. In recent years, UI design has rarely seen this kind of design, but there are still times when you will encounter the need to put tags before text. If you use the drawableLeft property that comes with TextView, you can meet some general requirements, but the customization is too low, and the image and text are separated when the text is newline, which doesn’t give you the desired effect. Of course, I am only providing one method, there are thousands of ways to achieve a requirement!

rendering

Without further ado, here’s the usual wave:

Some of you will say it’s easy. Yes, it is. In fact, I just put some commonly used methods to write together, for you to call, and do not change the original code can set the label, of course, there are some other methods (such as: underline, delete line, format text color, hyperlink, etc.), just need to call the corresponding method can be, save big wave time.

How to use

Step 1 add Repositories for Build. Gradle (Project:XXX)

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

Step 2. Add dependencies to build.gradle(Module:XXX)

Dependencies {implementation 'com. Making. ChinaLike: TagTextView: 0.0.8'}Copy the code

Step 3. Reference in XML (one of the methods is an example) :

<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 下 载 "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_bottom_padding =" new" app:tvt_tag_space="10dp" app:tvt_tag_top_padding="1dp" app:tvt_text_space="5dp" />Copy the code

The API is introduced

TagTextView function

XML attributes

API	type	The default value	describe	instructions
`tvt_left_top_radius`	dimension		Label top left rounded corner
`tvt_left_bottom_radius`	dimension		Bottom left corner of label
`tvt_right_top_radius`	dimension		Label upper right rounded corner
`tvt_right_bottom_radius`	dimension		Bottom right corner of label
`tvt_radius`	dimension	9999dp	Label the rounded	If label fillet is set separately, this method will be invalid for the corresponding azimuth fillet
`tvt_tag_left_padding`	dimension	10dp	Left inside margin of label
`tvt_tag_top_padding`	dimension		Inside margin at the top of the label
`tvt_tag_right_padding`	dimension	10dp	Right inside margin of label
`tvt_tag_bottom_padding`	dimension		Bottom margin of label
`tvt_tag_padding`	dimension	0	Label margin	This method is invalid when the label inner margin is set separately
`tvt_tag_background_color`	color	Color.GRAY	Label Background Color
`tvt_tag_space`	dimension	0	Label spacing
`tvt_text_space`	dimension	0	The spacing between the label and the text
`tvt_tag_location`	enum	start	The position of the label	Start indicates the start position, end indicates the end position
`tvt_tag_start_background_color`	color		Gradient background start color
`tvt_tag_end_background_color`	color		Gradient background end color
`tvt_tag_text_size`	dimension	14sp	Label Text size
`tvt_tag_text_color`	color	Color.WHITE	Label Text Color
`tvt_first_tag_left_space`	dimension	0	The first label is the distance to the left
`tvt_tag_text`	string		Label content	if`tvt_tag_text` 、`tvt_tag_image`If you set all of them, only`tvt_tag_image`To take effect
`tvt_tag_image`	reference		Image label	if`tvt_tag_text` 、`tvt_tag_image`If you set all of them, only`tvt_tag_image`To take effect
`tvt_tag_width`	dimension		The custom width of the label
`tvt_tag_height`	dimension		The custom height of the tag

attribute

API	type	The default value	describe	instructions
`leftTopRadius`	Float		Label top left rounded corner
`leftBottomRadius`	Float		Bottom left corner of label
`rightTopRadius`	Float		Label upper right rounded corner
`rightBottomRadius`	Float		Bottom right corner of label
`radius`	Float	9999F	Label the rounded	If label fillet is set separately, this method will be invalid for the corresponding azimuth fillet
`tagLeftPadding`	Int	10dp	Left inside margin of label
`tagTopPadding`	Int		Inside margin at the top of the label
`tagRightPadding`	Int	10dp	Right inside margin of label
`tagBottomPadding`	Int		Bottom margin of label
`tagPadding`	Int	0	Label margin	This method is invalid when the label inner margin is set separately
`tagBackgroundColor`	Int	Color.GRAY	Label Background Color
`tagSpace`	Int	0	Label spacing
`textSpace`	Int	0	The spacing between the label and the text
`tagLocation`	Int	`TagLocation.START`	The position of the label	`TagLocation.START`The starting position,`TagLocation.END`End position
`tagStartBackgroundColor`	Int		Gradient background start color
`tagEndBackgroundColor`	Int		Gradient background end color
`tagTextSize`	Float	14sp	Label Text size
`tagTextColor`	Int	Color.WHITE	Label Text Color
`firstTagLeftSpace`	Int	0	The first label is the distance to the left
`tagText`	String		Label content	if`tagText` 、`tagImage`If you set all of them, only`tagImage`To take effect
`tagImage`	Drawable		Image label	if`tagText` 、`tagImage`If you set all of them, only`tagImage`To take effect
`tagWidth`	Int		The custom width of the label
`tagHeight`	Int		The custom height of the tag

methods

setTextTag(params)

Set up the label

Params: Tag content in the following formats

BaseTagAdapter<*>: A custom adapter that implements its own label display style, Only the tVT_tag_space, tVT_text_space, tVT_tag_location, tVT_first_tag_left_space fields are valid in the custom MutableList<T>: multiple tags, Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String: Drawable String If you pass a Bitmap Int with one DrawableRes, you pass multiple drawables. If you pass a Bitmap Int with one DrawableRes, you pass multiple drawables. If you pass a Bitmap Int with one Drawable, you pass multiple drawablesCopy the code

Extended functionality (XML configuration style not supported)

setTextTag(config:TagConfig,params:Any)

Set up the label

Config: optional tag style. See TagConfig

Params: Tag content. The following formats are supported:

MutableList<T>: multiple tags. T supports String, DrawableRes, Bitmap, Drawable String: String tags. Int: DrawableRes: DrawableRes: DrawableRes: DrawableRes: DrawableRes: DrawableRes: DrawableRes: DrawableRes: DrawableRes: DrawableRes: DrawableRes: DrawableRes Drawable: Drawable: Drawable: Drawable: Drawable: Drawable: Drawable: Drawable: Drawable: Drawable: Drawable: Drawable: Drawable: DrawableCopy the code

setUnderline(underline: String)

Underline text

Underline: Underline the text that needs to be underlined. If more than one text is the same, underline only the first one
setUnderline(startIndex: Int, endIndex: Int)

Underline text

StartIndex: indicates the startIndex

EndIndex: indicates the endIndex
setUnderline(vararg indexRang: IntArray)

Underline text

IndexRang: an integer array of size 2. Multiple groups can be passed
setUnderline()

Underline text

Underline all text
setDeleteLine(underline: String)

Set the text strikeout line

Underline: Underline the text that needs to be deleted. If more than one text is the same, only the first text needs to be deleted
setDeleteLine(startIndex: Int, endIndex: Int)

Set the text strikeout line

StartIndex: indicates the startIndex

EndIndex: indicates the endIndex
setDeleteLine(vararg indexRang: IntArray)

Set the text strikeout line

IndexRang: an integer array of size 2. Multiple groups can be passed
setDeleteLine()

Set the text strikeout line

Delete lines are set for all text
SetSpecificTextColor (@ ColorInt color: Int, specificText: String, isUnderlineText: Boolean = false, onTagClickListener: OnTagClickListener? = null)

Sets the specified text color

Color: Specify the text color

SpecificText: Specifies the text

IsUnderlineText: Whether to display underscores. Optional. Default is false

OnTagClickListener: Click event response, optional, -1 text is clicked, others the corresponding subscript is clicked
SetSpecificTextColor (@specificTextColor: Int,startIndex: Int, endIndex: Int,isUnderlineText: Boolean = false,onTagClickListener: OnTagClickListener? = null)

Sets the specified text color

Color: Specify the text color

StartIndex: indicates the startIndex

EndIndex: indicates the endIndex

IsUnderlineText: Whether to display underscores. Optional. Default is false

OnTagClickListener: Click event response, optional, -1 text is clicked, others the corresponding subscript is clicked
setSpecificTextColor(data: MutableList,onTagClickListener: OnTagClickListener? = null)

Sets the specified text color

Data: Customizes multiple colors for the specified text

OnTagClickListener: Click event response, optional, -1 text is clicked, others the corresponding subscript is clicked
setURLSpan(startIndex: Int,endIndex: Int,type: SpanType,linkText: String,@ColorInt color: Int? = null,isUnderlineText: Boolean = false)

Set the hyperlinked

StartIndex: indicates the startIndex

EndIndex: indicates the endIndex

Type: indicates the type of the hyperlink. For details, see SpanType

LinkText: linkText, such as to jump a phone, just by passing in the phone number

Color: The color of the hyperlinked text

IsUnderlineText: Whether to display underscores. Optional. Default is false
setURLSpan(data: MutableList?)

Set the hyperlinked

Data: customize the hyperlink. See URLSpanConfig

The sample is introduced

Common label

XML implementation

        <com.view.text.TagTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
                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="New" />
Copy the code

Java code implementation

        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("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone");
        tagTextView.setTextTag("New");
Copy the code

Kotlin code implementation

    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 = "Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
            setTextTag("New")}Copy the code

Multiple tags

XML implementation

The first step

    <com.view.text.TagTextView
        android:id="@+id/tagTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginVertical="10dp"
        android:text="Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
        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" />
Copy the code

Step 2 (Java implementation)

        TagTextView tagTextView = findViewById(R.id.tagTextView);
        tagTextView.setTextTag("New"."Gold"."Heart yue");
Copy the code

Or (Kotlin implementation)

        tagTextView.setTextTag("New"."Gold"."Heart yue")
Copy the code

Java code implementation

        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("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone");
        tagTextView.setTextColor(Color.parseColor("# 666666"));
        tagTextView.setTagSpace((int) DensityUtil.INSTANCE.dp2px(this,10F));
        tagTextView.setTextSpace((int) DensityUtil.INSTANCE.dp2px(this,5F));
        tagTextView.setTextTag("New"."Gold"."Heart yue");
Copy the code

Kotlin code implementation

        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 = "Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
            setTextColor(Color.parseColor("# 666666"))
            tagSpace = DensityUtil.dp2px(this@MainActivity3, 10f).toInt()
            textSpace = DensityUtil.dp2px(this@MainActivity3, 5f).toInt()
            setTextTag("New"."Gold"."Heart yue")}Copy the code

The gradient background

XML implementation

The first step

    <com.view.text.TagTextView
        android:id="@+id/tagTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
        android:textColor="# 666666"
        app:tvt_tag_end_background_color="@color/tagEndBackgroundColor"
        app:tvt_tag_start_background_color="@color/tagStartBackgroundColor"/>
Copy the code

Part 2 (Java Implementation)

        TagTextView tagTextView = findViewById(R.id.tagTextView);
        tagTextView.setTextTag("Select"."New to the market"."Recommended");
Copy the code

Or (Kotlin implementation)

        tagTextView.setTextTag("Select"."New to the market"."Recommended")
Copy the code

Java code implementation

        TagTextView tagTextView = new TagTextView(this);
        tagTextView.setTagStartBackgroundColor(ContextCompat.getColor(this,R.color.tagStartBackgroundColor));
        tagTextView.setTagEndBackgroundColor(ContextCompat.getColor(this,R.color.tagEndBackgroundColor));
        tagTextView.setText("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone");
        tagTextView.setTextColor(Color.parseColor("# 666666"));
        tagTextView.setTextTag("Select"."New to the market"."Recommended");
Copy the code

Kotlin code implementation

        val tagTextView = TagTextView(this).apply {
            tagStartBackgroundColor = ContextCompat.getColor(this@MainActivity3, R.color.tagStartBackgroundColor)
            tagEndBackgroundColor = ContextCompat.getColor(this@MainActivity3, R.color.tagEndBackgroundColor)
            setText("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone")
            setTextColor(Color.parseColor("# 666666"))
            setTextTag("Select"."New to the market"."Recommended")}Copy the code

General picture label

XML implementation

    <com.view.text.TagTextView
        android:id="@+id/tagTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
        android:textColor="# 666666"
        app:tvt_tag_image="@mipmap/notice"
        app:tvt_tag_space="10dp"
        app:tvt_text_space="5dp"/>
Copy the code

Java code implementation

        TagTextView tagTextView = new TagTextView(this);
        tagTextView.setText("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone");
        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));
Copy the code

Kotlin code implementation

        val tagTextView = TagTextView(this).apply {
            text = "Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
            setTextColor(Color.parseColor("# 666666"))
            tagSpace = dp2px(this@MainActivity3, 10f).toInt()
            textSpace = dp2px(this@MainActivity3, 5f).toInt()
            setTextTag(resources.getDrawable(R.mipmap.notice))
        }
Copy the code

Multiple picture labels

XML implementation

The first step

    <com.view.text.TagTextView
        android:id="@+id/tagTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
        android:textColor="# 666666"
        app:tvt_tag_space="10dp"/>
Copy the code

Step 2 (Java implementation)

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

Or (Kotlin implementation)

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

Java code implementation

        TagTextView tagTextView = new TagTextView(this);
        tagTextView.setText("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone");
        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);
Copy the code

Kotlin code implementation

        val tagTextView = TagTextView(this).apply {
            text = "Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
            setTextColor(Color.parseColor("# 666666"))
            tagSpace = dp2px(this@MainActivity3, 10f).toInt()
            setTextTag(R.mipmap.icon_hot, R.mipmap.icon_new2, R.mipmap.icon_new3);
        }
Copy the code

Custom tags

XML implementation

The first step

    <com.view.text.TagTextView
        android:id="@+id/tagTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
        android:textColor="# 666666"
        app:tvt_text_space="10dp"
        app:tvt_tag_space="5dp"/>
Copy the code

Step 2 (Java implementation)

        List<String> data = new ArrayList();
        data.add("");
        data.add("Fillet Label");
        data.add("Label with border");
        data.add("Gradient Label");
        data.add("Custom rounded corners");

        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));
                }
                returnview; }});Copy the code

Or (Kotlin implementation)

        val data: MutableList<String> = mutableListOf(""."Fillet Label"."Label with border"."Gradient Label"."Custom rounded corners")
        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
                    }

                }
        )
Copy the code

Java code implementation

        List<String> data = new ArrayList();
        data.add("");
        data.add("Fillet Label");
        data.add("Label with border");
        data.add("Gradient Label");
        data.add("Custom rounded corners");

        TagTextView tagTextView = new TagTextView(this);
        tagTextView.setTagSpace((int) DensityUtil.INSTANCE.dp2px(this,5F));
        tagTextView.setTextSpace((int) DensityUtil.INSTANCE.dp2px(this,10F));
        tagTextView.setText("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone");
        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));
                }
                returnview; }});Copy the code

Kotlin code implementation

        val data: MutableList<String> = mutableListOf(""."Fillet Label"."Label with border"."Gradient Label"."Custom rounded corners")
        val tagTextView = TagTextView(this).apply {
            tagSpace = DensityUtil.dp2px(this@MainActivity3, 5F).toInt()
            textSpace = DensityUtil.dp2px(this@MainActivity3, 10F).toInt()
            text = "Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
            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
                        }

                    }
            )
        }
Copy the code

If the sample files involved are not available, you can slide to the bottom to see the source code, which is available in Demo

The underline

Java implementation

        AppCompatTextView tagTextView = new AppCompatTextView(this);
        tagTextView.setText("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone");
        // Set according to the subscript
        TextViewExKt.setUnderline(tagTextView,0.10);
        // Set according to the specified string
        TextViewExKt.setUnderline(tagTextView,"5G");
        // Supports multiple Settings
        int[] params = new int[2];
        params[0] = 0;
        params[1] = 10;
        TextViewExKt.setUnderline(tagTextView,params);
        // Set all
        TextViewExKt.setUnderline(tagTextView);

Copy the code

Kotlin implementation

        val tagTextView = AppCompatTextView(this).apply {
            text = "Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
        }
        // Set according to the subscript
        tagTextView.setUnderline(0.10)
        // Set according to the specified string
        tagTextView.setUnderline("5G")
        // Supports multiple Settings
        tagTextView.setUnderline(intArrayOf(0.10))
        // Set all
        tagTextView.setUnderline()
Copy the code

Delete the line

Java implementation

        AppCompatTextView tagTextView = new AppCompatTextView(this);
        tagTextView.setText("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone");
        // Set according to the subscript
        TextViewExKt.setDeleteLine(tagTextView,0.10);
        // Set according to the specified string
        TextViewExKt.setDeleteLine(tagTextView,"5G");
        // Supports multiple Settings
        int[] params = new int[2];
        params[0] = 0;
        params[1] = 10;
        TextViewExKt.setDeleteLine(tagTextView,params);
        // Set all
        TextViewExKt.setDeleteLine(tagTextView);
Copy the code

Kotlin implementation

        val tagTextView = AppCompatTextView(this).apply {
            text = "Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
        }
        // Set according to the subscript
        tagTextView.setDeleteLine(0.10)
        // Set according to the specified string
        tagTextView.setDeleteLine("5G")
        // Supports multiple Settings
        tagTextView.setDeleteLine(intArrayOf(0.10))
        // Set all
        tagTextView.setDeleteLine()
Copy the code

Format string

Java implementation

        AppCompatTextView tagTextView = new AppCompatTextView(this);
        tagTextView.setText("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone");
        // Specify a single string
        TextViewExKt.setSpecificTextColor(tagTextView, Color.GREEN, "Glory V40 Light Luxury edition".true, index -> {
            if (index == -1){
                Toast.makeText(MainActivity.this,"Text is clicked",Toast.LENGTH_SHORT).show();
            }else {
                Toast.makeText(MainActivity.this, "The first"+index+"Being clicked", Toast.LENGTH_SHORT).show(); }});// Specify a single index
        TextViewExKt.setSpecificTextColor(tagTextView, Color.GREEN, 0.10.true, index -> {
            if (index == -1){
                Toast.makeText(MainActivity.this,"Text is clicked",Toast.LENGTH_SHORT).show();
            }else {
                Toast.makeText(MainActivity.this, "The first"+index+"Being clicked", Toast.LENGTH_SHORT).show(); }});/ / multiple
        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,"Text is clicked",Toast.LENGTH_SHORT).show();
            }else {
                Toast.makeText(MainActivity.this, "The first"+index+"Being clicked", Toast.LENGTH_SHORT).show(); }});Copy the code

Kotlin implementation

        val tagTextView = AppCompatTextView(this).apply {
            text = "Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
        }
        // Specify a single string
        tagTextView.setSpecificTextColor(Color.GREEN, "Glory V40 Light Luxury edition".true.object : OnTagClickListener {
            override fun onTagClick(tagIndex: Int) {
                if (tagIndex == -1) {
                    Toast.makeText(this@MainActivity3, "Text is clicked", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(this@MainActivity3, "${tagIndex} was clicked", Toast.LENGTH_SHORT).show()
                }
            }

        })
        // Specify a single index
        tagTextView.setSpecificTextColor(Color.GREEN, 0.10.true.object : OnTagClickListener {
            override fun onTagClick(tagIndex: Int) {
                if (tagIndex == -1) {
                    Toast.makeText(this@MainActivity3, "Text is clicked", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(this@MainActivity3, "${tagIndex} was clicked", Toast.LENGTH_SHORT).show()
                }
            }
        })
        / / multiple
        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, "Text is clicked", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(this@MainActivity3, "${tagIndex} was clicked", Toast.LENGTH_SHORT).show()
                }
            }

        })
Copy the code

hyperlinked

Java implementation

        AppCompatTextView tagTextView = new AppCompatTextView(this);
        tagTextView.setText("Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone");
        // Single hyperlink implementation
        TextViewExKt.setURLSpan(tagTextView, 0.10, TEL.INSTANCE, "1234", Color.RED, true);
        // Multiple hyperlink implementations
        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);
Copy the code

Kotlin implementation

        val tagTextView = AppCompatTextView(this).apply {
            text = "Glory V40 light luxury 5G super fast charge 64 million ultra clear four photo 8GB+128GB titanium Sky Silver Mobile Unicom Telecom 5G dual card dual waiting mobile phone"
        }
        // Single hyperlink implementation
        tagTextView.setURLSpan(0.10, SpanType.TEL, "1234", Color.RED, true)
        // Multiple hyperlink implementations
        tagTextView.setURLSpan(mutableListOf(URLSpanConfig(0.11,SpanType.TEL,"12345"),URLSpanConfig(12.15,SpanType.HTTP,"http://www.baidu.com",Color.GREEN,true)))

Copy the code

If there are questions welcome to leave a message source address

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Add a text (or image) tag before (or after) the TextView

preface

rendering

How to use

The API is introduced

TagTextView function

Extended functionality (XML configuration style not supported)

The sample is introduced

Add a text (or image) tag before (or after) the TextView

preface

rendering

How to use

The API is introduced

TagTextView function

Extended functionality (XML configuration style not supported)

The sample is introduced

Related Posts

Android complete componentization – UI jump upgrade

Android water ripple effect exploration

Android music beat effect