Android?WebView開發(fā)之自定義WebView工具框

更新時間：2021年12月16日 14:30:35 作者：紅日666

在WebView頁面長按時會彈出一個復(fù)制框，有的時候里面的item不是我們想要，這個時候我們就可以自定義一個工具框。本文就將介紹如何通過WebView自定義工具框，需要的朋友可以參考一下

附GitHub源碼：WebViewExplore

先看圖：

在WebView頁面長按時會彈出一個復(fù)制框，但如果里面的item不是我們想要的或者想自定義，那么可以通過覆蓋WebView的 startActionMode 方法來實現(xiàn)：

    /**
     * 長按彈出ActionMode菜單樣式
     * @param callback
     * @param type
     * @return
     */
    @Override
    public ActionMode startActionMode(Callback callback, int type) {
        Logger.d(TAG, "startActionMode--callback:" + callback + " type:" + type);
        ActionMode actionMode = super.startActionMode(callback, type);
        return resolveActionMode(actionMode);
    }

    private ActionMode resolveActionMode(ActionMode actionMode) {
        if (actionMode != null) {
            final Menu menu = actionMode.getMenu();
            mActionMode = actionMode;
            //清除系統(tǒng)自定item選項
            menu.clear();
 
            /**
             * 為菜單item重新賦值
             */
            for (int i = 0; i < mActionList.size(); i++) {
                menu.add(mActionList.get(i));
                //可以為每個item添加icon
                //menu.getItem(i).setIcon(R.drawable.ic_launcher);
            }
 
            for (int i = 0; i < menu.size(); i++) {
                MenuItem menuItem = menu.getItem(i);
                /**
                 * 新添item的點擊事件【可根據(jù)不同個item點擊事件，來進(jìn)行相關(guān)的業(yè)務(wù)處理】
                 */
                menuItem.setOnMenuItemClickListener(new OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        Logger.d(TAG, item.getTitle().toString());
                        getSelectedData((String) item.getTitle());
                        releaseAction();
                        return true;
                    }
                });
            }
        }
 
        mActionMode = actionMode;
        return actionMode;
    }

上面的mActionList是早已經(jīng)在該控件的構(gòu)造方法調(diào)用時添加了所需的item：

    private void initData() {
        mActionList = new ArrayList<>();
        //擴選
        mActionList.add(GlobalConstant.ENLARGE);
        //復(fù)制
        mActionList.add(GlobalConstant.COPY);
        //分享
        mActionList.add(GlobalConstant.SHARE);
    }

這里拿"復(fù)制"事件舉例，通過如下native調(diào)用該Js的代碼的方式可以獲取當(dāng)前所文本框所選中的文本：

    /**
     * Android調(diào)用JS的代碼方式有2種：
     * 1、通過WebView的loadUrl()
     * 2、通過WebView的evaluateJavaScript()
     * <p>
     * 點擊的時候，獲取網(wǎng)頁中選擇的文本，回掉到原生中的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, new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    //此處為js返回結(jié)果
                    Logger.d(TAG, "value:" + value);
                }
            });
        } else {
            loadUrl("javascript:" + js);
        }
    }

點擊復(fù)制按鈕就可以將我們選中的文本賦值到上述js腳本中的 'txt' 變量中，但是如何傳遞到native呢，這就用到了 WebView與Native的交互章節(jié)介紹的JS調(diào)用Native的方法1，這里再說明一下：

在該控件的構(gòu)造方法中早已映射了原生方法接口：

    private void linkJSInterface() {
        //Js調(diào)用native的方式一
        addJavascriptInterface(new ActionSelectInterface(this), "JSInterface");
    }

JSInterface 對應(yīng)的映射接口 ActionSelectInterface 實現(xiàn)如下：

    /**
     * JS調(diào)用android原生方法1：
     * 通過WebView的addJavascriptInterface()進(jìn)行對象映射
     */
    public class ActionSelectInterface {
 
        private ActionWebView mActionWebView;
 
        public ActionSelectInterface(ActionWebView actionWebView) {
            mActionWebView = actionWebView;
        }
 
        @JavascriptInterface
        public void callback(final String value, final String title) {
            Logger.d(TAG, "currentThread:" + Thread.currentThread());
            post(new Runnable() {
                @Override
                public void run() {
                    if (mActionSelectListener != null) {
                        mActionSelectListener.onClick(title, value);
                    }
                }
            });
        }
    }

所以最終就可以根據(jù)上述js腳本中的 'JSInterface.callback(txt,title);‘方法的調(diào)用，來最終響應(yīng) 至native類ActionSelectInterface中callback中，會收到title及復(fù)制文本value的值。

這樣根據(jù)之前的監(jiān)聽，便可進(jìn)行后續(xù)的一系列業(yè)務(wù)操作。?

到此這篇關(guān)于Android WebView開發(fā)之自定義WebView工具框的文章就介紹到這了,更多相關(guān)Android WebView 自定義工具框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: