需求:用户使用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的效果图:
如上图所示,页面分为两部分,上面蓝色区域是我们的搜索面板,下面是Webview控件。
在搜索区域中,可以看到需求中的所有控件都包括了,功能也对应实现了,我们输入了关键字“1”,自动进行了搜索,Webview中所有是“1”的文本,均黄色高亮显示,而当前选中位置的“1”为橙色突出显示。
当我们点击【下一个】或【上一个】按钮时,Webview跟随文本位置自动定位,搜索区域中的“位置”文本也会相应切换。
Demo实现:
1. 配置权限
因为webview需要使用网络,需要在AndroidMinifest文件中配置网络权限:
<uses-permission android:name="android.permission.INTERNET">
2.布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="@+id/ll_top"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="#2fc0d6">
<EditText
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text=""
android:hint="请输入关键字"
android:id="@+id/et_key" />
<TextView
android:id="@+id/tv_position"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="(位置:0/0)"
android:textSize="15sp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:textColor="#000000"/>
<Button
android:text="上一个"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_pre"
android:layout_weight="1" />
<Button
android:text="下一个"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_next"
android:layout_weight="1" />
</LinearLayout>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/ll_top"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
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