One, foreword

Recently, when designing the interface, we often see an interface that informs users of their privacy terms and user agreements with colored text at the bottom, and the colored text points directly to the corresponding links

The original idea was to set up multiple TextViews, but there was a problem with such a simple function using 5 controls. It was embarrassing, and the text alignment had to be adjusted by itself, which was not natural. After searching, the implementation was not difficult, but there was no good encapsulation. So today we use kotlin extension function package a colorText method, here have to kua Kotlin extension function, really easy to use.

Design click events

The first thing you need to do is create a SpannableStringBuilder container for applying click events and so on

val style = SpannableStringBuilder()
val parent = "I have read and agree to the User Agreement and Privacy Policy."
val colorText = User Agreement
// Find the subscript of the first colorText
val index = indexOf(colorText,0)
style.append(parent)
Copy the code

Then let’s set up the click event

// override a click event method in an anonymous class
val clickableSpan = object : ClickableSpan(){
    override fun onClick(widget: View) {
        // Specific events}}// The first argument is the option to set the click event, the second is the position of colorText in the parent, the second is the position of the last text, and the third is a fixed argument
style.setSpan(clickableSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
Copy the code

At this point, the current colorText has the event click

3. Set no underline

This part is also very important, you don’t set your text to add a puzzling underline

First, you need to create a class to be underunderlined

class NoUnderlineSpan: UnderlineSpan() {override fun updateDrawState(ds: TextPaint) {
        super.updateDrawState(ds)
        ds.color = ds.linkColor
        ds.isUnderlineText = false}}Copy the code

Just set it up at the end

// the first parameter is set to no underline, 2,3, as above, and the fourth option is changed
val noUnderlineSpan = NoUnderlineSpan()
style.setSpan(noUnderlineSpan,index , index+colorText.length, Spanned.SPAN_MARK_MARK)
Copy the code

4. Set the color

Set the color of the link, this part is similar to the previous part, set the foreground color, the other parameters are similar

val foregroundColorSpan = ForegroundColorSpan(Color.parseColor("#118EEA"))
style.setSpan(foregroundColorSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
Copy the code

Finally, you need to apply the color link click event

MyTextView.movementMethod = LinkMovementMethod.getInstance()
MyTextView.text = style
Copy the code

Five, the encapsulation

That’s part of it, and then the most wonderful encapsulation, using Kotlin’s extension functions

  • The first analysis needs to extend the class is TextView class, so that as long as the control inherited TextView class can use the function of this extension function
  • Secondly, we need to analyze the required parameters, which should be functional parameters of complete text, colorText, colorString and click events. Later, I think it is wrong, because TextView already has its context, we can directly obtain the complete text, so we need three parameters finally. ColorText, colorString, function parameter

Here is the final package, which may seem long, but is very easy to use

// You can't find the text here
class NoUnderlineSpan: UnderlineSpan() {override fun updateDrawState(ds: TextPaint) {
        super.updateDrawState(ds)
        ds.color = ds.linkColor
        ds.isUnderlineText = false}}fun TextView.colorText(colorText:String, color:String, click:()->Unit){
    val style = SpannableStringBuilder()
    val index = text.indexOf(colorText,0)
    style.append(text)
    val clickableSpan = object : ClickableSpan(){
        override fun onClick(widget: View) {
            click()
        }
    }
    style.setSpan(clickableSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
    val noUnderlineSpan = NoUnderlineSpan()
    style.setSpan(noUnderlineSpan,index , index+colorText.length, Spanned.SPAN_MARK_MARK)
    val foregroundColorSpan = ForegroundColorSpan(Color.parseColor(color))
    style.setSpan(foregroundColorSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
    movementMethod = LinkMovementMethod.getInstance()
    text = style
}
Copy the code

The use of it

myTextView.colorText(User Agreement."#118EEA") {// Own the click event
}
Copy the code

Six, summarized

This encapsulation is generally good, simplifying the code and using Kotlin’s knowledge. Welcome to leave a comment