Android Webview 搜索文本 findAllAsync findNext setFindListener

---

需求：用户使用Webview浏览文章时，可搜索文章中的“关键字”。

1.用户输入“关键字”字符时，自动搜索；

2.显示搜索“关键字”的 当前位置+总数；

3.支持【上一个】和【下一个】搜索，并定位位置；

---

分析：该功能主要的技术点是：Webview如何支持搜索？如何获得关键字的总数量和当前位置？

通过分析官方Api，找到了相关的方法：

1. public void findAllAsync(String find)；

2. public void findNext(boolean forward)；

3. public void setFindListener(WebView.FindListener listener)；

方法1：findAllAsync
异步查找网页中所有的关键字内容，传参为find（关键字），也就是我们通过webview查询的入口；

方法2：findNext
字面意思是：查询下一个，传参为forword（即是否向前），可以推断出，如果forward为true，是查下一个，那么forward为false，也就是查前一个数据。
这刚好与我们的【上一个】和【下一个】按钮对应了。

方法3：setFindListener
@Override
public void onFindResultReceived(int position, int all, boolean b) {
是为webview设置查询监听，监听器的方法中返回了我们关注的数据： 当前位置 + 总数。

---

分析了Webview的相关源码，我们找到了所需要使用的方法，下面我们开始实现吧！！！

首先，先看下Demo的效果图：

image

如上图所示，页面分为两部分，上面蓝色区域是我们的搜索面板，下面是Webview控件。

在搜索区域中，可以看到需求中的所有控件都包括了，功能也对应实现了，我们输入了关键字“1”，自动进行了搜索，Webview中所有是“1”的文本，均黄色高亮显示，而当前选中位置的“1”为橙色突出显示。

当我们点击【下一个】或【上一个】按钮时，Webview跟随文本位置自动定位，搜索区域中的“位置”文本也会相应切换。

---

Demo实现：

1. 配置权限

因为webview需要使用网络，需要在AndroidMinifest文件中配置网络权限：

2.布局

3.代码

package com.qxc.webviewsearch;

import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends Activity {
    EditText et_key;
    TextView tv_position;
    Button btn_pre;
    Button btn_next;
    WebView webview;
    String url = "https://www.jianshu.com/p/ada94d3a3e86";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initEvent();
        loadWebview();
    }

    /**
     * 初始化控件
     */
    private void initView(){
        et_key = (EditText) findViewById(R.id.et_key);
        tv_position = (TextView) findViewById(R.id.tv_position);
        btn_pre = (Button) findViewById(R.id.btn_pre);
        btn_next = (Button) findViewById(R.id.btn_next);
        webview = (WebView) findViewById(R.id.webview);
    }

    /**
     * 初始化事件
     */
    private void initEvent(){
        //上一个
        btn_pre.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                webview.findNext(false);
            }
        });
        //下一个
        btn_next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                webview.findNext(true);
            }
        });
        //输入文本自动查询
        et_key.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

            @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
            @Override
            public void afterTextChanged(Editable key) {
                //搜索点击
                webview.findAllAsync(key.toString());
                webview.setFindListener(new WebView.FindListener() {
                    @Override
                    public void onFindResultReceived(int position, int all, boolean b) {
                        tv_position.setText("(位置："+(position+1)+"/"+all+")");
                    }
                });
            }
        });
    }

    /**
     * 加载webview
     */
    private void loadWebview(){
        webview.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        webview.loadUrl(url);
    }
}

---

代码结构很简单，仅1个Activity。
代码具体的实现细节，是参照上面分析的信息做出来的，如果还有疑问，欢迎留言。

附上Demo源码：https://pan.baidu.com/s/1qZ0dh1a