WebView實(shí)現(xiàn)頁(yè)內(nèi)文字查找功能

最近閑來(lái)無(wú)事一直在學(xué)習(xí)WebView的知識(shí)丁鹉,最近幾篇博客也都和這個(gè)有關(guān)喂江≌傩猓看了好久WebView的Api,終于找到了一個(gè)拿的出手給大家分享(水)的功能了获询≌撬辏看標(biāo)題,就知道是搜索匹配當(dāng)前網(wǎng)頁(yè)內(nèi)的關(guān)鍵詞的功能啦吉嚣,慣例先放下成品圖(UI參照了桌面版的Chrome):

text.gif

效果和桌面版Chrome的頁(yè)內(nèi)搜索也是差不多的梢薪。下面就介紹下相關(guān)相關(guān)Api和具體實(shí)現(xiàn)流程吧。

Api

void findAllAsync(String find)

找到網(wǎng)頁(yè)內(nèi)所有關(guān)鍵詞尝哆,看方法名字知道是異步查找的秉撇。所有找到的匹配項(xiàng)都會(huì)用顏色標(biāo)記(上圖是黃色)。

void findNext(boolean forward)

切換所找到關(guān)鍵詞列表的匹配項(xiàng)秋泄。forward是切換方向琐馆,true切換到下一個(gè),false切換到前一個(gè)恒序。當(dāng)前選中的匹配項(xiàng)會(huì)用另外一個(gè)顏色標(biāo)記(橙色)瘦麸。注意切換的操作是循環(huán)的,比如已經(jīng)在最后一項(xiàng)了奸焙,再往前切換就會(huì)回到第一個(gè)匹配項(xiàng)瞎暑。

void setFindListener(FindListener listener)

設(shè)置接口監(jiān)聽器,回調(diào)查找的結(jié)果与帆,其中FindListener就一個(gè)方法:

 public void onFindResultReceived(int activeMatchOrdinal//當(dāng)前匹配列表項(xiàng)的序號(hào)(從0開始)
 ,int numberOfMatches//所有匹配關(guān)鍵詞的個(gè)數(shù)
 ,boolean isDoneCounting);//有沒有查找完成

void clearMatches()

清除所有找到的關(guān)鍵詞的顏色標(biāo)記了赌。用來(lái)做復(fù)原操作。

以下是一些過時(shí)(廢棄)的方法:

boolean showFindDialog(String text, boolean showIme)

找到關(guān)鍵詞玄糟,并顯示彈框勿她。原來(lái)WebView有內(nèi)置的查找文字的彈框,可惜在所有android版本的系統(tǒng)上這個(gè)方法都不一定有用阵翎。

int findAll(String find)

findAllAsync的同步版本逢并,返回的是查找的結(jié)果的個(gè)數(shù)。猜測(cè)如果網(wǎng)頁(yè)內(nèi)文字太多郭卫,同步查找可能引起UI線程阻塞砍聊,所以系統(tǒng)建議我們采用異步的查找方式。

好了主要方法就是以上這些贰军,下面講下具體的實(shí)現(xiàn)流程玻蝌。

實(shí)現(xiàn)流程

整個(gè)查找的流程(包括顯示細(xì)節(jié))都仿照了了Chrome的查找方式。

彈框最初我選擇了DialogFrgment,但是dialog會(huì)阻塞Webview獲取焦點(diǎn)俯树。因?yàn)槲覀冾A(yù)期的結(jié)果是查找到所有匹配項(xiàng)后仍能夠自己滑動(dòng)WebView查看帘腹。所有只能直接寫在WebView的布局里面。為了優(yōu)化布局加載速度许饿,可以采用如下引用方式:

<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" 
/>

這樣就能實(shí)現(xiàn)布局的延遲加載阳欲。當(dāng)然最好的方法還是選擇dialog或者poupwindow÷剩可惜沒有解決焦點(diǎn)的問題球化。
注冊(cè)查找回調(diào)的接口,注意下標(biāo)索引是從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");
                    }
                }
            }
        });

通過監(jiān)聽輸入框的內(nèi)容變化進(jìn)行動(dòng)態(tài)的文字查找赊窥。

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

在彈框查找框同時(shí)要彈出輸入框。并且需要判斷有沒有存在內(nèi)容狸页,有的話直接查找,但是這只是為了顯示找到匹配項(xiàng)的個(gè)數(shù)扯再,所以清除顏色標(biāo)記芍耘。

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

在隱藏查找框的時(shí)候隱藏輸入框和清楚匹配項(xiàng)的顏色標(biāo)記:

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

查找框的進(jìn)入消失動(dòng)畫可以用Transition實(shí)現(xiàn)
TransitionManager.beginDelayedTransition(mViewGroup, new Slide(Gravity.TOP));

以上差不多就是所有的實(shí)現(xiàn)要點(diǎn)了。

小結(jié)

貼下本文代碼的地址

Github

關(guān)于WebView之前已經(jīng)寫過幾篇博客了熄阻。對(duì)這方面感興趣的同學(xué)可以看下我的其他相關(guān)博客(Github地址同上):

擼一款全手勢(shì)操作瀏覽器

WebView實(shí)現(xiàn)長(zhǎng)按保存圖片 長(zhǎng)按識(shí)別二維碼

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末斋竞,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子秃殉,更是在濱河造成了極大的恐慌坝初,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钾军,死亡現(xiàn)場(chǎng)離奇詭異鳄袍,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)吏恭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門拗小,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人樱哼,你說(shuō)我怎么就攤上這事哀九。” “怎么了搅幅?”我有些...
    開封第一講書人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵阅束,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我茄唐,道長(zhǎng)息裸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮界牡,結(jié)果婚禮上簿寂,老公的妹妹穿的比我還像新娘。我一直安慰自己宿亡,他們只是感情好常遂,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挽荠,像睡著了一般克胳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上圈匆,一...
    開封第一講書人閱讀 52,696評(píng)論 1 312
  • 那天漠另,我揣著相機(jī)與錄音,去河邊找鬼跃赚。 笑死笆搓,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的纬傲。 我是一名探鬼主播满败,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼叹括!你這毒婦竟也來(lái)了算墨?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤汁雷,失蹤者是張志新(化名)和其女友劉穎净嘀,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體侠讯,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡挖藏,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了继低。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片熬苍。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖袁翁,靈堂內(nèi)的尸體忽然破棺而出柴底,到底是詐尸還是另有隱情,我是刑警寧澤粱胜,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布柄驻,位于F島的核電站,受9級(jí)特大地震影響焙压,放射性物質(zhì)發(fā)生泄漏鸿脓。R本人自食惡果不足惜抑钟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望野哭。 院中可真熱鬧在塔,春花似錦、人聲如沸拨黔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)篱蝇。三九已至贺待,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間零截,已是汗流浹背麸塞。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留涧衙,地道東北人哪工。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像弧哎,于是被迫代替她去往敵國(guó)和親正勒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,325評(píng)論 25 707
  • ¥開啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程傻铣,因...
    小菜c閱讀 6,450評(píng)論 0 17
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)祥绞,斷路器非洲,智...
    卡卡羅2017閱讀 134,716評(píng)論 18 139
  • 播霸榜2017年7月映客直播排行數(shù)據(jù) 冉大人繼續(xù)領(lǐng)跑映客大軍,播霸榜指數(shù)突破1200蜕径,映客前十主播男女對(duì)半两踏,再也不...
    播霸榜_3d0b閱讀 182評(píng)論 0 0