仿英语流利说取词放大控件的实现

1 取词放大控件

英语流利说是一款非常帮的口语学习app，在app的修炼页面长按屏幕，会弹出一个放大镜，当手指移到某个单词的附近，可以看到该英文单词会被选中，效果如下图所示：

2 代码示例

该控件挺有意思，于是我写了个简单的demo，点击下载,程序运行后的效果如下：

3 实现原理

该控件的实现原理比较简单，下面介绍几个比较重要的类

1 WordView

在实习该控件的过程中，我发现看似普通的TextView，其功能异常的强大，TextView的源码值得研究。WordView的主要功能是根据touch的位置，选择其附近的单词，然后更改选中单词的颜色，，关键代码如下：

(MotionEvent event) {Layout layout = getLayout();if (layout == null) {return;}int line = layout.getLineForVertical(getScrollY() + (int) event.getY());final int index = layout.getOffsetForHorizontal(line, (int) event.getX());Word selectedWord = getWord(index);if (selectedWord != null) {mSpannableString.setSpan(mForegroundColorSpan,selectedWord.getStart(), selectedWord.getEnd(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);setText(mSpannableString);mSelectedWord = getText().subSequence(selectedWord.getStart(), selectedWord.getEnd()).toString();mOnWordSelectListener.onWordSelect();}}2 ExercisePanel

该控件主要用来显示放大镜，原理比较简单，就不介绍了。

穷则思变，差则思勤！没有比人更高的山没有比脚更长的路。