Android UI开发之多样式富文本的简洁实现

多样式富文本的简洁实现

appendableStyleScope 允许你快速构建多种样式文字。

特性

• 支持对于同一个字符串设置多种样式。
• 支持文字和图片。
• 提供默认样式。
• 采用 DSL 确保更清晰的样式作用范围

快速开始

下面的示例为你展示了如何创建一条链接文本。

appendableStyleScope(getBinding().tv) {
    withStyle(AppendableStyle(url = "https://www.baidu.com/")) {
        append("这是一个链接")
    }
}

下面的示例为你展示了如何创建一条图片文本。

appendableStyleScope(getBinding().tv) {
    withImage(ImageSpan(this, R.mipmap.ic_launcher))
}

拼接字符串

下面的示例为你展示如何创建一条复杂的富文本字符串。

appendableStyleScope(getBinding().tv) {
    withStyle(AppendableStyle(QuoteSpan(ColorUtils.colorHex2Int("#27ae60"), 10, 30))) {
        withStyle(AppendableStyle(fontSize = 20F.SP.toInt())) {
            appendLine("什么是 Android?")
        }
        append("一个颠覆移动设备功能的平台，你可以访问")
        withStyle(AppendableStyle("https://www.android.com/intl/zh-CN_cn/what-is-android/")) {
            append("链接")
        }
        appendLine("来了解更多。")
        append(
            "从只能让设备运行，到让生活更轻松，都是Android在背后提供强力支持。" +
                    "有了Android, 才能让GPS避开拥堵，用手表发短信，让Google助理回答问题。" +
                    "目前有 25 亿部活跃设备搭载了 Android 操作系统。Android 能够为各种设备" +
                    "提供强力支持，从 5G 手机到炫酷的平板电脑，不胜枚举。"
        )
        withStyle(AppendableStyle(ScriptMode.SUPERSCRIPT)) { append("[1]") }
        append("\n")
        withImage(ImageSpan(this@DateActivity, R.drawable.android_logo))
    }
}

通用样式

通过指定 AppendableStyle 内的 backColor 属性，可以为字符串设置背景色。目前 AppendableStyle 允许你指定以下属性：

• foreColor ： 文字颜色。
• backColor ： 文字背景色。
• fontStyle ： 文字风格，目前支持粗体、斜体或者正常。
• fontFamily ： 文字字体。
• fontSize ： 文字大小。
• fontAlign ： 文字对齐方式。
• proportion ： 文字放大比例，例如如果放大 50% ，则该属性设置为 1.5f 。
• xProportion ： 值 > 1.0 会将文本拉伸得更宽。值 < 1.0 会将文本拉伸得更窄。

appendableStyleScope(getBinding().tv) {
    withStyle(AppendableStyle(url = "https://www.baidu.com/", backColor = R.color.lightslategray)
    ) {
        append("这是一个链接")
    }
}

特殊样式

除了通用样式，你也可以为文字指定以下唯一的特殊样式，目前支持：

链接文字

appendableStyleScope(getBinding().tv) {
    withStyle(AppendableStyle(url = "https://www.baidu.com/")) {
        append("这是一个链接")
    }
}

首行缩进

appendableStyleScope(getBinding().tv) {
    withStyle(AppendableStyle(linesIndent = LeadingMarginSpan.Standard(100, 0))) {
        append("这是一段带首行缩进的文本哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈。")
    }
}

携带子弹点

appendableStyleScope(getBinding().tv) {
    withStyle(
        AppendableStyle(bulletSpan = BulletSpan(10, ColorUtils.colorHex2Int("#d63031"), 10))
    ) {
        append("这是一段带子弹点的文字。")
    }
}

引用文字

appendableStyleScope(getBinding().tv) {
    withStyle(
        AppendableStyle(quoteSpan = QuoteSpan(ColorUtils.colorHex2Int("#f0932b"), 10, 10))
    ) {
        append("这是一段引用文字。")
    }
}

删除线或者下划线

appendableStyleScope(getBinding().tv) {
    withStyle(
        AppendableStyle(strikeMode = StrikeMode.STRIKETHROUGH)
    ) {
        append("这是一段带删除线的文字。")
    }
    withStyle(
        AppendableStyle(strikeMode = StrikeMode.UNDERLINE)
    ) {
        append("这是一段带下划线的文字。")
    }
}

上标或者下标

appendableStyleScope(getBinding().tv) {
    withStyle { append("这是一段带上标的文字。") }
    withStyle(AppendableStyle(scriptMode = ScriptMode.SUPERSCRIPT)) {
        append("[1]")
    }
}

范围模糊

appendableStyleScope(getBinding().tv) {
    withStyle(
        AppendableStyle(blurRadius = 5f, blur = BlurMaskFilter.Blur.NORMAL)
    ) {
        append("这是一段带模糊的文字。")
    }
}

可点击文字

该项不提供示例。

源代码

你可以点击 AppendableStyleString 来查看源码，这个仓库也包含了我封装的其他工具，如果你喜欢的话，还希望能够star，fork和提出issue。😀😀😀