WebView实现页内文字查找功能

最近闲来无事一直在学习WebView的知识，最近几篇博客也都和这个有关。看了好久WebView的Api，终于找到了一个拿的出手给大家分享（水）的功能了。看标题，就知道是搜索匹配当前网页内的关键词的功能啦，惯例先放下成品图（UI参照了桌面版的Chrome）：

text.gif

效果和桌面版Chrome的页内搜索也是差不多的。下面就介绍下相关相关Api和具体实现流程吧。

Api

void findAllAsync(String find)

找到网页内所有关键词，看方法名字知道是异步查找的。所有找到的匹配项都会用颜色标记（上图是黄色）。

void findNext(boolean forward)

切换所找到关键词列表的匹配项。forward是切换方向，true切换到下一个，false切换到前一个。当前选中的匹配项会用另外一个颜色标记（橙色）。注意切换的操作是循环的，比如已经在最后一项了，再往前切换就会回到第一个匹配项。

void setFindListener(FindListener listener)

设置接口监听器，回调查找的结果，其中FindListener就一个方法：

 public void onFindResultReceived(int activeMatchOrdinal//当前匹配列表项的序号（从0开始）
 ,int numberOfMatches//所有匹配关键词的个数
 ,boolean isDoneCounting);//有没有查找完成

void clearMatches()

清除所有找到的关键词的颜色标记。用来做复原操作。

以下是一些过时（废弃）的方法：

boolean showFindDialog(String text, boolean showIme)

找到关键词，并显示弹框。原来WebView有内置的查找文字的弹框，可惜在所有android版本的系统上这个方法都不一定有用。

int findAll(String find)

findAllAsync的同步版本，返回的是查找的结果的个数。猜测如果网页内文字太多，同步查找可能引起UI线程阻塞，所以系统建议我们采用异步的查找方式。

好了主要方法就是以上这些，下面讲下具体的实现流程。

实现流程

整个查找的流程（包括显示细节）都仿照了了Chrome的查找方式。

弹框最初我选择了DialogFrgment，但是dialog会阻塞Webview获取焦点。因为我们预期的结果是查找到所有匹配项后仍能够自己滑动WebView查看。所有只能直接写在WebView的布局里面。为了优化布局加载速度，可以采用如下引用方式：

<ViewStub 
android:id="@+id/stub_import"
android:inflatedId="@+id/panel_import"
android:layout="@layout/search_dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content" 
/>

这样就能实现布局的延迟加载。当然最好的方法还是选择dialog或者poupwindow。可惜没有解决焦点的问题。
注册查找回调的接口，注意下标索引是从0开始的，所以要加1：

 mWebView.setFindListener(new IX5WebViewBase.FindListener() {
            @Override
            public void onFindResultReceived(int activeMatchOrdinal, int numberOfMatches,
                                             boolean isDoneCounting) {
                if (isDoneCounting) {
                    if (numberOfMatches != 0) {
                        searchInfo.setText(String.format("%d/%d", (activeMatchOrdinal + 1), numberOfMatches));
                    } else {
                        searchInfo.setText("0/0");
                    }
                }
            }
        });

通过监听输入框的内容变化进行动态的文字查找。

mEditText.addTextChangedListener(new SimpleTextWatcher() {
            @Override
            public void afterTextChanged(Editable s) {
                if (TextUtils.isEmpty(mEditText.getText().toString())) {
                    searchInfo.setVisibility(View.INVISIBLE);
                } else {
                    searchInfo.setVisibility(View.VISIBLE);
                }
                String content = s.toString();
                if (!TextUtils.isEmpty(content)) {
                    mWebView.findAllAsync(content);
                }
            }
        });

在弹框查找框同时要弹出输入框。并且需要判断有没有存在内容，有的话直接查找，但是这只是为了显示找到匹配项的个数，所以清除颜色标记。

String content=mEditText.getText().toString();
        if (TextUtils.isEmpty(content)) {
            searchInfo.setVisibility(View.INVISIBLE);
        } else {
            mWebView.findAllAsync(content);
            mWebView.clearMatches();
            searchInfo.setVisibility(View.VISIBLE);
        }
        KeyboardUtils.showSoftInput(getContext(), mEditText);

在隐藏查找框的时候隐藏输入框和清楚匹配项的颜色标记：

searchLayout.setVisibility(View.GONE);
KeyboardUtils.hideSoftInput(getActivity(), mEditText);
mWebView.clearMatches();

查找框的进入消失动画可以用Transition实现
TransitionManager.beginDelayedTransition(mViewGroup, new Slide(Gravity.TOP));

以上差不多就是所有的实现要点了。