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

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

更多精彩内容，请关注我的微信公众号——安卓干货营

前言

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

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

但是！

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

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

先看效果图：

这是纯文本的TextView

这是富文本的TextView

分析

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

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

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

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

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

文本显示

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

调用setText或fromHtml方法既可。

颜色等属性设置

private Rect mRect;
private Paint mPaint;
private int mColor = 0xFFFFA200;
private float density;
private float mStrokeWidth;

// 笔记白点
private Paint mPointPaint;

// 开始各结束位置索引,startIndex必须大于等于endIndex
private int startIndex = 0;
private int endIndex = 0;

// 下划线的位置（每次更新）
private float x_start, x_stop, x_diff;
private int baseline;
// 小圆圈的位置
private float notePointX, notePointY;

private int scrollY =