如何在Android/iOS的TextView中渲染HTML标注文本的边框效果？

前置协商建议（可配合前端调整返回格式） #

建议将原返回的inline style格式HTML调整为结构化自定义标记，例如把：
<div style="border:2px solid red;padding: 5px;border-radius: 25px;">the ground.</div>
修改为约定好的自定义标签格式：
<border color="#FF0000" borderWidth="2" padding="5" radius="25">the ground.</border>
双端不需要解析复杂CSS规则，直接读取标签属性即可，开发和维护成本会大幅降低。

Android端实现方案 #

• 用SpannableString搭配自定义ReplacementSpan/LineBackgroundSpan实现边框绘制：在自定义Span的draw方法中，先根据设置的padding、圆角参数绘制边框，再绘制对应范围的文本即可。
• 若要兼容原HTML格式，可自定义实现Html.TagHandler，拦截div标签的解析，读取style中的边框、圆角、padding参数，自动为对应文本范围添加自定义Span。
• RecyclerView场景下，每次绑定item数据时需重新生成Spannable对象，避免item复用导致的样式错乱。

iOS端实现方案 #

• 用NSAttributedString搭配NSTextBlock实现：NSTextBlock原生支持设置边框宽度、边框颜色、圆角、内边距属性，将需要添加边框的文本范围绑定对应配置的NSTextBlock即可，UILabel、UITextView都可正常渲染。
• 若要解析HTML格式，可在系统原生HTML解析能力的基础上拓展，读取自定义标签或div的style属性，生成对应参数的NSTextBlock附加到富文本指定范围即可。
• 列表复用场景下，每次绑定cell数据时需重置富文本属性，避免样式复用异常。

注意事项 #

• 不建议双端自行实现完整的CSS解析逻辑，和前端约定好固定的边框参数传递规则，仅支持业务需要的边框样式即可，可大幅降低开发和维护成本。
• 多行文本整段加边框的场景，Android自定义Span需要单独处理多行动态计算绘制范围的逻辑，iOSNSTextBlock原生支持多行整段包裹，可直接使用。

内容的提问来源于stack exchange，提问作者Nasar