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

1 取词放大控件

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

2 代码演示样例

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

3 实现原理

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

1 WordView

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

public void trySelectWord(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

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