TextView自定义下划线、点击弹框

人之所以能,是相信能。

github地址:https://github.com/shuaijia/NoteText

01

前言

最近公司有意需求,就是类似于电子书,选择一段文字然后做笔记,需要给做过的文字加下划线,下划线最后加一图标按钮,点击弹框显示笔记内容。

立马会想到使用TextView的fromHtml方法,给添加笔记的文本手动加标签,或者使用SpanString类的相关方法设置标签。

但是!

经过反复测试,无论使用何种下划线标签或者SpanString设置下划线,画出的下划线颜色始终和文本内容颜色一样,还不能随便定义颜色。更何况:我们需要在下划线最后加图标,并且能够点击。看来这种方法不可行…

于是,便开始了我的自定义之路~~~~

先看效果图:

这是纯文本的TextView

这是富文本的TextView

02

分析

要实现以上需求,应该从这几个方面入手:

文本展示,普通文本调用TextView的setText方法既可,如果是富文本,就使用TextView的fromHtml方法,至于图片如何展示,我在上一篇文章用TextView实现富文本展示,点击断句和语音播报介绍过了,有兴趣的可以跳转阅读,核心是拦截到图片url然后自己实现加载图片。

给TextView设置要划线的起始位置和结束位置,需要计算出在哪些行进行绘制,每行又是从哪里开始,到哪里结束,注意第一行和最后一行。

然后就是在onDraw方法中对计算出的行进行逐行绘制,在最后一行的结束位置绘制笔记图标(小圆圈)。

在TextView的onTouchEvent判断按下位置是否是笔记图标(小圆圈)的附近,是的话则弹框(PopupWindow)显示。

03

文本显示

这里就不再重复累赘了,文本展示很简单:

调用setText或fromHtml方法既可。

04

颜色等属性设置

我们需要定义画笔、画笔颜色、线条粗细;开始位置的结束位置的索引。

还有就是下划线的位置,因为我们是按行来画,每画完一行就会重新计算,尤其是横向的结束位置,所以我将x的结束位置定义出来,每次都更新。

最后要将计算出的小图标的x和y值保留,在onTouchEvent中会用到。

并初始化:

05

计算划线位置

我们先定义一个实体类,这个类中存放每行的索引,和对应每行上的一个开始位置索引,结束位置索引。

定义两个集合,分别存放所有行的信息和需要绘制的行的信息。

接下来开始计算:

思路是这样的:

  1. 循环所有行;
  2. 如果要绘制的开始位置在这行中,并且结束位置也在这行中,直接向要绘制的集合中添加一个对象,终止循环;
  3. 如果开始位置在这行中,但结束位置不在这行中,则添加一个结束位置是本行结束位置的对象到要绘制的集中中,继续下次循环;
  4. 如果结束位置在此行,则添加开始位置为本行开始位置,结束位置为自己结束位置的对象到集合中;
  5. 否则,将整行填入集合。

06

绘制下划线

核心使用的是canvas的drwaLine方法进行绘制。

循环所有要绘制的集合,得到这一行的外包矩形,根据当前行的开始和结束位置,算出横向x的开始和结束位置;baseline是字符底部y的值,这样就可以绘制划线了!

07

绘制笔记图标

如果是最后一行的,在本行的结束位置开始绘制笔记图标。

使用canvas.drawCircle绘制圆圈,而圆的圆形坐标可以下划线最后的位置进行绘制。

再用另一条画笔绘制三个白点,这个白点可以使用canvas.drawPoints绘制,传入一个float类型数组,下标是奇数,表示点的x值,下表为偶数,表示点的y值,也就是说float数组的个数必须是偶数个,或者说是点数的两倍。

08

图标点击

在上一步绘制小图标时,就将图标的x和y值保存,在onTouchEvent中,判断按下的位置是否在小图标位置的“附近”,是的话就弹框显示笔记内容。

这里的弹框用的是我之前封装的JsPopupWindow,有兴趣的话可以点击阅读https://github.com/shuaijia/JsPopupWindow。

这里需要注意,如果TextView外层被ScrollView包裹,在弹框是就需要纵轴方向上减去ScrollView的偏移量。也就是TextView需要知道ScrollView的纵向偏移量,这里我设置了方法,将ScrollView的偏移量传入。

这样就实现了我们如上图展示的,给TextView绘制下划线和图标点击,弹框的效果。

原文发布于微信公众号 - Android机动车(JsAndroidClub)

原文发表时间:2017-11-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(一)CSS3概述,选择器

CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

1163
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

1360
来自专栏前端笔记

【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用...

3307
来自专栏AndroidTv

前端入门3-CSS基础声明正文-CSS基础

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

852
来自专栏Golang语言社区

Golang的iota问题

通常人们认为iota就是0,其实并非如此。 确切的说,当iota在紧跟着关键字const的第一行出现时,iota为0,在第二行出现时,iota为1,以此类推;当...

39111
来自专栏全沾开发(huā)

总结CSS3新特性(Transiton篇)

总结CSS3新特性(Transiton篇) CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS ...

4086
来自专栏闻道于事

CSS样式表基础

层叠样式表:Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态...

2635
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

1252
来自专栏Golang语言社区

[Go 语言社区]服务器读取配置文件只-json数据

package main // 导入需要的库 import ( "encoding/json" "fmt" ) // 结构体定义 type ...

4076
来自专栏大数据钻研

HTML5新增及移除的元素

HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程。为了更好的处理现在的互联网应用,HTML5新增了图形绘制、多媒体播放、页面结构、应用程序存储、...

2888

扫码关注云+社区

领取腾讯云代金券