Kuikly富文本如何实现嵌入View

97 阅读2分钟

最近业务越来越多场景使用Kuikly开发。使用Kuikly的好处,从我们项目实际经验看,不仅能实现安卓、iOS、鸿蒙三端的代码共享,同时Kuikly在性能体验上基本和原生一致。所以在一些页面尝试获得不错效果后,我们也在逐步扩大使用范围。

需求

最近产品提了一个需求,希望在feeds上展示更丰富的富文本标签,这个标签效果有点像是在文本中嵌入一个View,比如类似下面 在这里插入图片描述

Kuikly的富文本组件RichText,最常用是Span和ImageSpan,一般富文本信息展示,通过这两个标签设置不同的样式就能实现很好的效果。 对于我们这次需求,如果是将嵌入的view做个切图,使用ImageSpan自然是可以解决问题。但产品总是动态的,千人千面,切图方案直接放弃。

这里不得不说,Kuikly还是想的周到,它在RichText组件中,还提供了一个PlaceholderSpan。看API注释,可以在这个占位PlaceHolder上,叠加一个View,通过监听PlaceHolder位置变化,来更新View的位置。目测我这个需求有着落了。

API传送

在这里插入图片描述

解决方案

用RichText中的PlaceholderSpan(空白占位符)搭配上绝对布局的VIew来做: 在这里插入图片描述 PlaceholderSpan的宽高设为要插入的View的宽高,当PlaceholderSpan的布局计算完成后,将对应的位置以绝对布局的格式设置给要插入的View。

小结

由于是新技术,由于当前对框架还不是很熟,在使用Kuikly过程中,偶尔会遇到框架本身已经提供的能力,但由于不熟悉,需要化时间探索才能找到解决方案的实践类技术问题。因此,准备把日常遇到的问题和实践方案也记录下来。也希望大家看到的,使用Kuikly的同学也一起多多分享,互相学习。