Android彩色文字的超链接实现的封装(Kotlin扩展函数的应用)


theme: vue-pro

highlight: darcula

一、前言

最近设计界面的时候碰到这样一个问题,我们经常可以看到这样的一个界面,告知用户的隐私条款和用户协议这样的这个底部彩色文字,而且这些彩色文字都是直接指向相应的链接

1.jpg

当时最初的想法是设置多个 TextView 来实现,然而这样会有一个问题这样一个简单的功能用了5个控件,太丢人了,而且文字对齐还需要自己调整,不自然,搜索了一下,实现方式并不困难,只是没有进行一个比较好的封装,故今天带大家用kotlin的扩展函数封装一个colorText的方法,这里不得不夸一下kotlin的扩展函数,真的好用。

二、设计点击事件

首先需要创建一个SpannableStringBuilder用于应用点击事件等等的容器

  1. val style = SpannableStringBuilder()
  2. val parent = "我已阅读并同意用户协议和隐私政策"
  3. val colorText = "用户协议"
  4. //寻找第一个colorText的下标
  5. val index = indexOf(colorText,0)
  6. style.append(parent)

然后我们来设置点击事件

  1. //相当于重写了一个匿名类里面的一个点击事件的方法
  2. val clickableSpan = object : ClickableSpan(){
  3. override fun onClick(widget: View) {
  4. //具体事件
  5. }
  6. }
  7. //第一个参数是设置点击事件的选项,第二个是colorText在parent中的位置,第二个是最后一个文字的位置,第三个是一个固定的参数
  8. style.setSpan(clickableSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

至此,当前的colorText已经具备事件的点击了

三、设置无下划线

这部分也挺重要的,没有设置你的文字就加了一个莫名其妙的下划线

首先需要创建一个类来进行无下划线

  1. class NoUnderlineSpan: UnderlineSpan(){
  2. override fun updateDrawState(ds: TextPaint) {
  3. super.updateDrawState(ds)
  4. ds.color = ds.linkColor
  5. ds.isUnderlineText = false
  6. }
  7. }

最后设置一下即可

  1. //这里的参数和上一个差不多,第一个是设置无下划线,2,3,同上,第四个可选项更换了一下
  2. val noUnderlineSpan = NoUnderlineSpan()
  3. style.setSpan(noUnderlineSpan,index , index+colorText.length, Spanned.SPAN_MARK_MARK)

四、设置颜色

设置链接的颜色,这部分跟上面的也差不多,设置一下前景颜色,其他参数差不多

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

最后需要应用一下即可实现彩色链接的点击事件

  1. MyTextView.movementMethod = LinkMovementMethod.getInstance()
  2. MyTextView.text = style

五、封装

分部分讲完了,接下来就是最精彩的封装了,用到了 Kotlin 的扩展函数

  • 首先分析需要扩展的类为 TextView 类,这样的话,只要是继承 TextView 类的控件都能用到这个扩展函数的功能
  • 其次分析需要的参数,本来应该是需要完整的text、colorText、colorString、点击事件的函数型参数,后来想想不对啊,在TextView中已经拥有它的上下文,直接获取完整的text即可,所以最后需要三个参数,colorText、colorString、函数型参数

以下便是最终的封装,看上去好像挺长的,不过使用起来就非常的方便

  1. //这里可能会出现找不到文字的情况,发生错误记得检查一下文字是否正确
  2. class NoUnderlineSpan: UnderlineSpan(){
  3. override fun updateDrawState(ds: TextPaint) {
  4. super.updateDrawState(ds)
  5. ds.color = ds.linkColor
  6. ds.isUnderlineText = false
  7. }
  8. }
  9. fun TextView.colorText(colorText:String, color:String, click:()->Unit){
  10. val style = SpannableStringBuilder()
  11. val index = text.indexOf(colorText,0)
  12. style.append(text)
  13. val clickableSpan = object : ClickableSpan(){
  14. override fun onClick(widget: View) {
  15. click()
  16. }
  17. }
  18. style.setSpan(clickableSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
  19. val noUnderlineSpan = NoUnderlineSpan()
  20. style.setSpan(noUnderlineSpan,index , index+colorText.length, Spanned.SPAN_MARK_MARK)
  21. val foregroundColorSpan = ForegroundColorSpan(Color.parseColor(color))
  22. style.setSpan(foregroundColorSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
  23. movementMethod = LinkMovementMethod.getInstance()
  24. text = style
  25. }

它的使用

  1. myTextView.colorText("用户协议","#118EEA"){
  2. //自己的点击事件
  3. }

六、总结

这次封装总体上还不错,做到了简化代码的效果,也应用了Kotlin的知识,欢迎留言交流哦


文章标签:

原文连接:https://juejin.cn/post/7072734658936438792

相关推荐

Android多版本flavor配置之资源文件和清单文件合并介绍

Android 面试题:说一下 PendingIntent 和 Intent 的区别

Intent 跳转 传递list集合

Google Play 开发者账户被封 如何改代码快速上架

百度APP Android包体积优化实践(二)Dex行号优化

使用ComposeDesktop开发一款桌面端多功能APK工具

一年时间过去了,LiveData真的被Flow代替了吗? LiveData会被废弃吗?

Flutter 绘制探索 | 箭头端点的设计

Android Notes | 开发手记 ing...

Flutter 小技巧之优化使用的 BuildContext

Android原生自定义车牌输入法 附带两种实现思路以及源码 EasyVehicleKeyBoard

Dart(五)—泛型、库使用、async和await关键字

Android启动优化深入解析,全面掌握!

Android技术知识点:如何使用数据绑定来消除findViewById()

ExoPlayer客户端解密m3u8音频\u002F视频

第四届青训营阅读打卡活动来啦,奖品、规则全面升级,快来学习吧

视频直播小窗口(悬浮窗)展示方案

Flutter 2 商城App实战指南(支持Null safety)

LaunchedEffect到底为我们处理了什么问题?

Android View | Canvas详解