Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Android彩色文字的超链接实现的封装

Android彩色文字的超链接实现的封装

原创
作者头像
wresource
发布于 2022-07-27 15:43:53
发布于 2022-07-27 15:43:53
1.1K0
举报
文章被收录于专栏:云服务器开发云服务器开发

一、前言

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

1.jpg
1.jpg

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

二、设计点击事件

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

代码语言:text
AI代码解释
复制
val style = SpannableStringBuilder()
val parent = "我已阅读并同意用户协议和隐私政策"
val colorText = "用户协议"
//寻找第一个colorText的下标
val index = indexOf(colorText,0)
style.append(parent)

然后我们来设置点击事件

代码语言:text
AI代码解释
复制
//相当于重写了一个匿名类里面的一个点击事件的方法
val clickableSpan = object : ClickableSpan(){
    override fun onClick(widget: View) {
        //具体事件
    }
}
//第一个参数是设置点击事件的选项,第二个是colorText在parent中的位置,第二个是最后一个文字的位置,第三个是一个固定的参数
style.setSpan(clickableSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

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

三、设置无下划线

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

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

代码语言:text
AI代码解释
复制
class NoUnderlineSpan: UnderlineSpan(){
    override fun updateDrawState(ds: TextPaint) {
        super.updateDrawState(ds)
        ds.color = ds.linkColor
        ds.isUnderlineText = false
    }
}

最后设置一下即可

代码语言:text
AI代码解释
复制
//这里的参数和上一个差不多,第一个是设置无下划线,2,3,同上,第四个可选项更换了一下
val noUnderlineSpan = NoUnderlineSpan()
style.setSpan(noUnderlineSpan,index , index+colorText.length, Spanned.SPAN_MARK_MARK)

四、设置颜色

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

代码语言:text
AI代码解释
复制
val foregroundColorSpan = ForegroundColorSpan(Color.parseColor("#118EEA"))
style.setSpan(foregroundColorSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

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

代码语言:text
AI代码解释
复制
MyTextView.movementMethod = LinkMovementMethod.getInstance()
MyTextView.text = style

五、封装

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

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

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

代码语言:text
AI代码解释
复制
//这里可能会出现找不到文字的情况,发生错误记得检查一下文字是否正确
class NoUnderlineSpan: UnderlineSpan(){
    override fun updateDrawState(ds: TextPaint) {
        super.updateDrawState(ds)
        ds.color = ds.linkColor
        ds.isUnderlineText = false
    }
}
fun TextView.colorText(colorText:String, color:String, click:()->Unit){
    val style = SpannableStringBuilder()
    val index = text.indexOf(colorText,0)
    style.append(text)
    val clickableSpan = object : ClickableSpan(){
        override fun onClick(widget: View) {
            click()
        }
    }
    style.setSpan(clickableSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
    val noUnderlineSpan = NoUnderlineSpan()
    style.setSpan(noUnderlineSpan,index , index+colorText.length, Spanned.SPAN_MARK_MARK)
    val foregroundColorSpan = ForegroundColorSpan(Color.parseColor(color))
    style.setSpan(foregroundColorSpan, index, index+colorText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
    movementMethod = LinkMovementMethod.getInstance()
    text = style
}

它的使用

代码语言:text
AI代码解释
复制
myTextView.colorText("用户协议","#118EEA"){
   //自己的点击事件
}

六、总结

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
会变色的TextView
近几年来,网络直播可以说是非常火热。网红也是遍地花开,其中不少主播在 PC 端做直播,也有很多主播用手机来直播。主播和观众经常需要互动交流,所以文字交流必不可少。在公司的 APP 中有类似如下图的聊天文字效果。一条聊天信息中,发送者名字的颜色是会随机改变,而内容信息是固定一个颜色。
猴哥yuri
2018/08/16
7880
【Android】强大的SpannableStringBuilder
前言 工作找完了,已经干了两个星期。虽然经常加班,不过相比之前的工作,现在过得更加充实、更有意义。 现在有点空闲时间,继续我的分享之旅~~ 效果 什么都不说,先看个炫酷的效果。 效果 ‘什么,这也算
Gavin-ZYX
2018/05/18
2.5K0
Android经典实战之Textview文字设置不同颜色、下划线、加粗、超链接等效果
SpannableString 在 Android 开发中是一个非常强大的工具,它允许你在单个字符串范围内应用多种样式。使用 SpannableString,你可以为文本中的不同部分设置不同颜色,字体大小,字体风格,甚至可以在文本的不同部分添加点击事件。
AntDream
2024/09/06
4110
Android经典实战之Textview文字设置不同颜色、下划线、加粗、超链接等效果
Android自定义用户协议的解决方案
在开发Android App时,经常会遇到各种协议,并且有些文字是灰色的,有些蓝色的,可以点击跳转,对于这种情况,其实我们是可以对它进行一些封装的,因为这些功能都是通用的,效果如下。
xiangzhihong
2022/11/30
9390
Android实现点击链接跳转功能
Android实现点击链接跳转功能 实现效果图 代码实现 activity_login.xml LoginActivity.java 实现效果图 点击用户协议到人工智能教程 PS:前些天发现了一个
是阿超
2022/08/07
1.9K0
Android实现点击链接跳转功能
真·富文本编辑器的演进之路-Span开胃菜
https://developer.android.com/guide/topics/text/spans
用户1907613
2021/03/16
2.6K0
真·富文本编辑器的演进之路-Span开胃菜
Android TextView 添加下划线的几种方式
本文介绍了在Android TextView中添加下划线的几种方式:1.在字符串资源文件中设置下划线;2.使用TextView的autoLink属性;3.使用Html类的fromHtml()方法;4.使用TextView的Paint属性;5.使用Spannable或实现它的类。这些方法都可以实现TextView中添加下划线功能,具体使用哪个方法取决于具体的需求和实现。同时,还介绍了如何自定义超链接的样式,包括设置前景色、设置下划线样式等。
用户1155943
2018/01/04
5.6K0
浅谈ClickableSpan , 实现TextView文本某一部分文字的点击响应
超文本:http://www.baidu.com  这么一个效果:一行文本当中 前面显示黑色颜色的“超文本:”,后面显示红色颜色的“http://www.baidu.com” 并且要求红色字体的部分可
听着music睡
2018/05/18
2.2K0
Android控件TextView实现静态图与动态GIF图文混排
最近做项目功能时,需要在TextView中展示图文,刚开始做的时候以为很简单,只需要用个ImageView跟TextView来展示就行了,可是发现这样做,不能实现我们需要的效果,这就需要涉及到富文本TextView来展示图文,下面介绍静态图片的图文和动态GIF的图文两种展示方式:
SoullessCoder
2019/08/27
2.2K0
Android控件TextView实现静态图与动态GIF图文混排
Android Span在项目中的几种使用方式
1.字符串中 改变字体颜色和大小 2.字符串中 改变文字颜色 并 添加点击事件 3.字符串中 增加外框和改变文字颜色及字体大小 1.改变文字颜色 ForegroundColorSpan /\*\* \* 自定义颜色 \* \* @param content 全部文本 \* @param keyWord 需要变色的关键字 \* @param color 颜色 \*/ public static SpannableStringBuilder getSpan(String conte
Jingbin
2019/03/21
1.2K0
Android项目实战(十六):QQ空间实现(一)—— 展示说说中的评论内容并有相应点击事件
大家都玩QQ空间客户端,对于每一个说说,我们都可以评论,那么,对于某一条评论: 白雪公主 回复 小矮人 : 你们好啊~ 我们来分析一下: 1、QQ空间允许我们 点击 回复人和被回复人的名字就可以进入对
听着music睡
2018/05/18
2.7K0
Android 千变万化 TextView:神奇的 SpannableString
TextView 可以说是 Android 中最简单、最常见的文字控件了,几乎每个页面都有 TextView 的身影,绝大多数情况我们用 TextView 只是单纯地显示一个文本,但是 TextView 的功能远远不止如此哦,简单的 TextView 也能千变万化显示出各种效果,这一切都要归功于 SpannableString。
大公爵
2020/03/20
4.4K0
Android 服务协议隐私政策高亮可点击写法
实现效果: 亦或者是在弹窗中显示,都是一样的。 代码比较简单,涉及到SpannableStringBuilder知识点 用到两个Span: ClickableSpan 处理点击事件 ForegroundColorSpan 设置修饰 代码: private fun setText() { //拼接字符串 val spanBuilder = SpannableStringBuilder("同意") /** * 服务协议
yechaoa
2022/06/10
1.1K0
Android 服务协议隐私政策高亮可点击写法
Android中Textview文字设置不同颜色、下划线、加粗、超链接
在项目中会遇到在一行文字,部分需要不同的文字颜色、下划线以及超链接来展示,下面介绍两种方式实现:
全栈程序员站长
2021/12/23
6.2K0
Android中Textview文字设置不同颜色、下划线、加粗、超链接
Android之捕获TextView超链接
应该是好久没有写有关技术类的文章了,今天分享一篇捕获TextView超链接的文章,希望对大家有所帮助,我终于在歪路上回归正途了。这个捕获TextView超链接应该算是比较常用吧,如果你会了,就不用看了
非著名程序员
2018/02/02
7460
Android之捕获TextView超链接
基于Android的编译原理课程设计:C语言的预处理程序
设计一个 C 语言的预处理程序,将C语言中所有的宏常量进行计算,并生成另外一个文件,将宏常量展开和计算的结果全部显示出来,最后将定义的宏在源程序中全部进行替换。
Cyril-KI
2022/09/19
1.1K0
基于Android的编译原理课程设计:C语言的预处理程序
推荐阅读
相关推荐
会变色的TextView
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档