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自定义长按选择实现收藏/分享选中文本功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-07-28 20:38:38

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

android webview file事件响应 选择图片过程中退出的话 按钮点不了

问题描述 android webview file事件响应 选择图片过程中退出的话 按钮点不了 public void onActivityResult(int requestCode int resultCode Intent data) { if(requestCode==REQUEST_UPLOAD_FILE_CODE) { if (null == mUploadFile) return; Uri result = data == null || resultCode != -1 ? nu

android阅读器长按选择文字功能实现代码

前言: 有时候我们需要实现长按选择文字功能,比如阅读器一般都有这个功能,有时候某个自定义控件上可能就有这种需求,如何实现呢?正好最近还算闲,想完善一下自己写的那个轻量级的txt文件阅读器(比如这个长按选择文字的功能就想加进去).于是花了两三天时间,实现了这个功能,效果还是不错的. 首先先看看效果图吧: 授人以鱼不如授人以渔,下面具体实现原理的教程. 1.实现原理 原理其实也不难,简单总结就是:绘制文字时把显示的文字的坐标记录下来(记录文字的左上右上左下右下四个点坐标),作用就是为了计算滑动范围.

Android Tools Download - 百度网盘下载/收藏/分享

Android Studio 版本号 Windows Mac OSX Linux 0.8.9 下载 下载 下载 0.8.8 下载 下载 下载 0.8.7 下载 下载 下载 0.8.6 下载 下载 下载 0.8.5 下载 下载 下载 0.8.4 下载 下载 下载 0.8.3 下载 下载 下载 0.8.2 下载 下载 下载 0.8.2 下载 下载 下载 0.8.1 下载 下载 下载 0.8.0 下载 下载 下载 0.6.1 下载 下载 下载 0.6.0 下载 下载 下载 0.5.9 下载 下载 下载

Android中自定义一个View的方法详解_Android

本文实例讲述了Android中自定义一个View的方法.分享给大家供大家参考,具体如下: Android中自定义View的实现比较简单,无非就是继承父类,然后重载方法,即便如此,在实际编码中难免会遇到一些坑,我把自己遇到的一些问题和解决方法总结一下,希望对广大码友们有所帮助. 注意点① 用xml定义Layout时,Root element 最好使用merge 当我们需要继承一个布局比较复杂的ViewGroup(比较多的是LinearLayout.RelativeLayout)时,通常会用xml来

Android中自定义一个View的方法详解

本文实例讲述了Android中自定义一个View的方法.分享给大家供大家参考,具体如下: Android中自定义View的实现比较简单,无非就是继承父类,然后重载方法,即便如此,在实际编码中难免会遇到一些坑,我把自己遇到的一些问题和解决方法总结一下,希望对广大码友们有所帮助. 注意点① 用xml定义Layout时,Root element 最好使用merge 当我们需要继承一个布局比较复杂的ViewGroup(比较多的是LinearLayout.RelativeLayout)时,通常会用xml来

android webview中图片 长按点击保存本地 部分手机不能实现。

问题描述 android webview中图片 长按点击保存本地 部分手机不能实现. 代码如下 private String imgurl = """"; /*** * 功能:长按图片保存到手机 */@Overridepublic void onCreateContextMenu(ContextMenu menu View v ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu v menuInfo)

【Android】自定义带进度条的WebView,修复不弹出软键盘的BUG

记录下最近开发中研究的带进度条的WebView 自定义类吧. 其实网上有不少这样的帖子,但是都没有一个完整的好用的例子,最关键的是,用网上的例子后有一个很明显的bug,就是遇到输入框的话没法弹出软键盘.研究了好久总算搞定了.特此记录下. 直接上源代码,关于代码的解释,个人感觉注释中已经添加的足够清楚了. ProgressWebView import android.content.Context; import android.content.res.Resources; import andr

Android自定义dialog可选择展示年月日时间选择栏

自定义dialog package com.poptest; import android.app.DatePickerDialog; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.DatePicker; //dialog类 public class YearPickerDialog extends DatePickerD

Android textview 实现长按自由选择复制功能的方法

这里有一个大坑,我的viewGroup中有一个这个属性android:descendantFocusability="blocksDescendants" 开始没有注意到,试了好多方法都不行,后来才看到这个属性,顺便科普一下,这个属性有三个值~ beforeDescendants:viewgroup会优先其子类控件而获取到焦点 afterDescendants:viewgroup只有当其子类控件不需要获取焦点时才获取焦点 blocksDescendants:viewgroup会覆盖子类