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));

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

小结

贴下本文代码的地址

Github

关于WebView之前已经写过几篇博客了。对这方面感兴趣的同学可以看下我的其他相关博客(Github地址同上):

撸一款全手势操作浏览器

WebView实现长按保存图片 长按识别二维码

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,563评论 25 707
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,195评论 0 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,099评论 18 139
  • 播霸榜2017年7月映客直播排行数据 冉大人继续领跑映客大军,播霸榜指数突破1200,映客前十主播男女对半,再也不...
    播霸榜_3d0b阅读 177评论 0 0