Android WebView自定義長(zhǎng)按選擇實(shí)現(xiàn)收藏/分享選中文本功能

更新時(shí)間：2017年06月19日 11:26:36 作者：戀貓?jiān)铝?

這篇文章主要介紹了Android WebView自定義長(zhǎng)按選擇實(shí)現(xiàn)收藏/分享選中文本功能,需要的朋友可以參考下

效果圖（1.3M）

一、前言

** 戳這里可以去DEMO，來吧 **

相信剛接觸android不久的同志們，在面對(duì)產(chǎn)品提出的：

“自定義WebView頁(yè)面中，長(zhǎng)按文本的彈出選項(xiàng)、點(diǎn)擊選擇后，分享、轉(zhuǎn)發(fā)、收藏選擇文本”

這樣的需求時(shí)，第一反應(yīng)大部分是：這是系統(tǒng)行為，如果實(shí)現(xiàn)需要在web端實(shí)現(xiàn)。

但是web端實(shí)現(xiàn)的局限性太大，曾經(jīng)也有過監(jiān)聽系統(tǒng)粘貼板，在用戶點(diǎn)擊復(fù)制的時(shí)候?qū)崿F(xiàn)其他的邏輯，但是這樣用戶體驗(yàn)不好，所以自定義WebView中長(zhǎng)按的彈出菜單，并在點(diǎn)擊時(shí)返回選中文本的小控件閃亮登場(chǎng)┏ (^ω^)=。

二、自定義長(zhǎng)按彈出菜單

這一步實(shí)現(xiàn)其實(shí)很簡(jiǎn)單，首先創(chuàng)建一個(gè)CustomActionWebView繼承系統(tǒng)WebView，然后重寫下面兩個(gè)方法。

這兩個(gè)方法會(huì)在用戶長(zhǎng)按選擇web文本時(shí)，在彈出菜單前被調(diào)用。它們之間的區(qū)別在于，第一個(gè)方法的菜單彈出方式，指定了默認(rèn)的type。我們并不關(guān)心彈出的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對(duì)象保存到mActionMode中。

2、清空原本actionMode中的MenuItem。

3、添加我們自定義的item到actionMode中。

4、重定義每個(gè)menuItem的點(diǎn)擊事件。

5、在點(diǎn)擊事件中通過執(zhí)行js，獲取選中文本。

6、通過上面保存的 mActionMode，釋放彈出菜單（不釋放會(huì)內(nèi)存泄漏）。

7、返回新填充的actionMode給系統(tǒng)。

/**
 * 處理item，處理點(diǎn)擊
 * @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;
}

實(shí)現(xiàn)效果

三、獲取選中文本

光自定義菜單，拿不到選中文本也沒意義，那么如何獲取選中文本呢？這里如果不轉(zhuǎn)個(gè)彎，還真會(huì)在南墻在撞死(￣^￣)ゞ，所以，我們偉大的js就出現(xiàn)了。

首先，我們自定義一個(gè)接口，用于監(jiān)聽js方法，其中@JavascriptInterface是關(guān)鍵的所在，在callback中獲取js端返回的數(shù)據(jù)。

然后將這個(gè)接口，在CustomActionWebView中add進(jìn)去（一般是在初始化和頁(yè)面加載完成時(shí)都add一次），并指定js端調(diào)用的接口名稱為“ JSInterface”。（ps：別忘了開始webview的js允許哦。）

public void linkJSInterface() {
  addJavascriptInterface(new ActionSelectInterface(this), "JSInterface");
}
···
/**
 * js選中的回調(diào)接口
 */
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);
    }
  }
}

最后在點(diǎn)擊時(shí)，通過執(zhí)行js來獲取web中選中的文本。在上面自定義菜單中第5項(xiàng)，點(diǎn)擊menu時(shí)，執(zhí)行下方j(luò)s代碼，便可以把選中的item和文本，回調(diào)到上面的接口中的callback。

熟悉js的小伙伴已經(jīng)看出來吧：

其實(shí)就是定義了一個(gè)js的function，然后在webview中執(zhí)行這個(gè)方法。

定義的這個(gè)名為function getSelectedText()的js方法，有兩個(gè)變量：txt和title。

title是從原生中傳入的item名字，txt是通過window去獲取web中選中的文本。

最后回到上面我們注冊(cè)的js方法名JSInterface，通過它的callback方法，將文本和name返回到原生代碼callback中。
根據(jù)版本不同，執(zhí)行js方法的接口也不一樣。

/**
 * 點(diǎn)擊的時(shí)候，獲取網(wǎng)頁(yè)中選擇的文本，回掉到原生中的js接口
 * @param title 傳入點(diǎn)擊的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實(shí)現(xiàn)了，點(diǎn)擊和選擇文本返回也實(shí)現(xiàn)了，在callback中，你就可以愉悅的收藏，或者分享你所選中的文本啦(◐‿◑)，操作一氣呵成，有沒有被驚艷到呢？

如果感興趣的，可以下載demo看下，同時(shí)CustomActionWebView也封裝好了遠(yuǎn)程依賴，歡迎使用。

https://github.com/CarGuo/CustomActionWebView

以上所述是小編給大家介紹的Android WebView自定義長(zhǎng)按選擇實(shí)現(xiàn)收藏/分享選中文本功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: