Html.fromHtml

老方法也许永不过时：

Html.fromHtml("Text, <b>Bold</b>, <i>italic</i>")

但这个方法也存在不少缺点：拼接变量比较麻烦，虽然使用kotlin的原始字符串可以方便地拼接字符串，但还是有诸如支持的标签比较少，img标签处理比较麻烦，扩展标签和自定义span也很麻烦等问题。

Kotlin

受kotlinx.html的启发，我们可以利用kotlin支持dsl，运算符重载，扩展函数等特性实现下面类似html + css的span写法：

textView.text = createSpanned {
    style {
        h3 { 
            color = 0xFF8D07F6.toInt() 
        }
        "serif" { 
            fontFamily = Typeface.SERIF 
        }
    }
    
    h3 { +"::before" }
    p { 
        b { +"KtSpans" }
        +" is inspired by "
        a("https://github.com/Kotlin/kotlinx.html") {
            +"kotlinx.html"
        }
    }
    br {}
    h3 { +"#now" }
    p {
        +"Make spans on android easy to use."
    }
    br {}
    h3 { +"::after" }
    p {
        className = "serif"
        +"More possibilities is comming"
    }
}

然后得到这样的结果：

screenshot_01_clipped.png

实现

只是简略的说明主要思路，可以直接跳到下面的Github链接和使用部分。

1. createSpanned {}

首先从最外层开始，createSpanned 块可以简单地利用带接收者的lambda定义：

inline fun createSpanned(body: RootTag.() -> Unit): Spanned {
    val root = RootTag()
    root.body()
    return root.span()
}

2. style {}

style是样式属性块，定义为：

inline fun RootTag.style(body: StyleSheet.() -> Unit) {
    this.style = StyleSheet().also(body)
}

StyleSheet类包含了用于存储标签属性的map：

// StyleSheet.kt
val tagAttrs: MutableMap<String, Attributes> = HashMap()

为了在style块中能定义各个标签的属性，还需要定义这样的函数：

// StyleSheet.kt
inline fun a(body: Attributes.() -> Unit) {
    val attrs = tagAttrs[A] ?: Attributes().also {
        tagAttrs[A] = it
    }
    attrs.body()
}

Attributes定义了一些共有的属性:

open class Attributes(
    var fontSize: Size? = null,
    var fontFamily: Typeface? = null,
    var fontStyle: Int = Typeface.NORMAL,
    var lineHeight: Size? = null,
    var align: Layout.Alignment? = null,
    var backgroundColor: Int = 0,
    var color: Int = 0,
    var decoration: Decoration? = null
)

3. 标签内容的dsl

标签类Tag内部定义了一个SpannableStringBuilder的变量，用于添加文本和子标签：

// Tag.kt
private val spanBuilder = SpannableStringBuilder()

open fun span(): Spanned {
    return spanBuilder
}

open fun spanBuilder(): SpannableStringBuilder {
    return spanBuilder
}

在Tag中重写String的一元运算符+：

// Tag.kt
 operator fun String.unaryPlus() {
    spanBuilder.append(this)
}

这样就可以通过+"Text"的方式（kotlinx.html的方式）添加内容了。

最后还需要在定义Tag的扩展函数来实现dsl和span的逻辑：

inline fun Tag.a(url: String, crossinline body: Tag.() -> Unit) {
    checkRoot(this)
    val tag = Tag(A, root)
    tag.body()
    root!!.defaultStyle.a {}
    insertTag(tag, arrayOf(URLSpan(url)))
}

insertTag()函数包含了样式属性和span等内容的处理，同时把生成好的SpannableStringBuilder添加到父标签中。实现和更多细节可点击下面的Github链接查看项目。

Github和使用

项目地址

欢迎各位大佬的New Issue，Star，Fork
https://github.com/dokar3/KtSpans

基本使用

1. 添加gradle依赖：

implementation 'io.github.dokar3:ktspans:1.0.2'

2. 使用createSpanned创建span并使用一些常用标签：

textView.text = createSpanned {
    // 定义样式 
    style { ... }
    
    // 标题标签
    h1 { ... }
    // 水平分割线标签
    hr {}
    // 段落标签
    p { ... }
    // 图片标签
    img(drawable) { ... }
    // 链接标签
    a(url) { ... }
    // 点击事件标签
    clickable(onClick) { ... }
    ...
}

完整的内置标签：README

3. 标签内属性:

p {
    attrs {
        fontStyle = Typeface.BOLD
    }
    +"Some text"
}

完整的共有属性见上面的Atrributes类或浏览README

4. 一些特殊标签的完整属性:

quote {
    fullAttrs {
        stripeColor = accent
        stripeWidth = 4.dp
        gapWidth = 8.dp
    }
    +"A quote here"
}

5. 使用外部的样式:

val appTextStyle = createStyle {
    h1 { ... }
    p { ... }
    quote { ... }
    bullet { ... }
    hr { ... }
}

然后在 createSpanned 中:

createSpanned {
    style(appTextStyle)
    ...
}

6. 包含/重用span:

fun header(): Spanned {
    val banner = ContextCompat.getDrawable(this, R.mipmap.ic_banner)!!
    return createSpanned {
        img(banner) {}
        h1 { +"Title" }
        p { ... }
    }
}

然后在 createSpanned 中:

createSpanned {
    +header()

    p { ... }
    ...
}

自定义标签：

查看README