Android WebView自定义长按选择实现收藏/分享选中文本功能

效果图（1.3m）

一、前言

** 戳这里可以去demo，来吧 **

相信刚接触android不久的同志们，在面对产品提出的 ：

 “自定义webview页面中，长按文本的弹出选项、点击选择后，分享、转发、收藏选择文本”

这样的需求时，第一反应大部分是：这是系统行为，如果实现需要在web端实现。

但是web端实现的局限性太大，曾经也有过监听系统粘贴板，在用户点击复制的时候实现其他的逻辑，但是这样用户体验不好，所以自定义webview中长按的弹出菜单，并在点击时返回选中文本的小控件闪亮登场┏ (^ω^)=。

二、自定义长按弹出菜单

这一步实现其实很简单，首先创建一个customactionwebview继承系统webview，然后重写下面两个方法。

这两个方法会在用户长按选择web文本时，在弹出菜单前被调用。它们之间的区别在于，第一个方法的菜单弹出方式，指定了默认的type。我们并不关心弹出的item类型是什么，我们只需要拦截下来actionmode，然后返回我们自己的自定义actionmode即可。

@override
public actionmode startactionmode(actionmode.callback callback) {
  actionmode actionmode = super.startactionmode(callback);
  return resolveactionmode(actionmode);
}
@override
public actionmode startactionmode(actionmode.callback callback, int type) 
  actionmode actionmode = super.startactionmode(callback, type);
  return resolveactionmode(actionmode);
}

这里我们所做的事是：

1、把原本的actionmode对象保存到mactionmode中。

2、清空原本actionmode中的menuitem。

3、添加我们自定义的item到actionmode中。

4、重定义每个menuitem的点击事件。

5、在点击事件中通过执行js，获取选中文本。

6、通过上面保存的 mactionmode，释放弹出菜单（不释放会内存泄漏）。

7、返回新填充的actionmode给系统。

/**
 * 处理item，处理点击
 * @param actionmode
 */
private actionmode resolveactionmode(actionmode actionmode) {
  if (actionmode != null) {
    final menu menu = actionmode.getmenu();
    mactionmode = actionmode;
    menu.clear();
    for (int i = 0; i < mactionlist.size(); i++) {
      menu.add(mactionlist.get(i));
    }
    for (int i = 0; i < menu.size(); i++) {
      menuitem menuitem = menu.getitem(i);
      menuitem.setonmenuitemclicklistener(new item.onmenuitemclicklistener() {
        @override
        public boolean onmenuitemclick(menuitem item) {
          getselecteddata((string) item.gettitle());
          releaseaction();
          return true;
        }
      });
    }
  }
  mactionmode = actionmode;
  return actionmode;
}

实现效果

三、获取选中文本

光自定义菜单，拿不到选中文本也没意义，那么如何获取选中文本呢？这里如果不转个弯，还真会在南墙在撞死(￣^￣)ゞ，所以，我们伟大的js就出现了。

首先，我们自定义一个接口，用于监听js方法，其中@javascriptinterface是关键的所在， 在callback中获取js端返回的数据。

然后将这个接口，在customactionwebview中add进去（一般是在初始化和页面加载完成时都add一次），并指定js端调用的接口名称为“ jsinterface”。（ps：别忘了开始webview的js允许哦。）

public void linkjsinterface() {
  addjavascriptinterface(new actionselectinterface(this), "jsinterface");
}
···
/**
 * js选中的回调接口
 */
private class actionselectinterface {
  customactionwebview mcontext;
  actionselectinterface(customactionwebview c) {
    mcontext = c;
  }
  @javascriptinterface
  public void callback(final string value, final string title) {
    if(mactionselectlistener != null) {
      mactionselectlistener.onclick(title, value);
    }
  }
}

最后在点击时，通过执行js来获取web中选中的文本。在上面自定义菜单中第5项，点击menu时，执行下方js代码，便可以把选中的item和文本，回调到上面的接口中的callback。

熟悉js的小伙伴已经看出来吧：

其实就是定义了一个js的function，然后在webview中执行这个方法。

定义的这个名为function getselectedtext()的js方法，有两个变量：txt和title。

title是从原生中传入的item名字，txt是通过window去获取web中选中的文本。

最后回到上面我们注册的js方法名jsinterface，通过它的callback方法，将文本和name返回到原生代码callback中。
根据版本不同，执行js方法的接口也不一样。

/**
 * 点击的时候，获取网页中选择的文本，回掉到原生中的js接口
 * @param title 传入点击的item文本，一起通过js返回给原生接口
 */
private void getselecteddata(string title) {
  string js = "(function getselectedtext() {" +
      "var txt;" +
      "var title = \"" + title + "\";" +
      "if (window.getselection) {" +
      "txt = window.getselection().tostring();" +
      "} else if (window.document.getselection) {" +
      "txt = window.document.getselection().tostring();" +
      "} else if (window.document.selection) {" +
      "txt = window.document.selection.createrange().text;" +
      "}" +
      "jsinterface.callback(txt,title);" +
      "})()";
  if (build.version.sdk_int >= build.version_codes.kitkat) {
    evaluatejavascript("javascript:" + js, null);
  } else {
    loadurl("javascript:" + js);
  }
}

四、最后

既然自定义item实现了，点击和选择文本返回也实现了，在callback中，你就可以愉悦的收藏，或者分享你所选中的文本啦(◐‿◑)，操作一气呵成，有没有被惊艳到呢？

如果感兴趣的，可以下载demo看下，同时customactionwebview也封装好了远程依赖，欢迎使用。

https://github.com/carguo/customactionwebview

以上所述是小编给大家介绍的android webview自定义长按选择实现收藏/分享选中文本功能，希望对大家有所帮助