专栏名称: 鸿洋
你好,欢迎关注鸿洋的公众号,每天为您推送高质量文章,让你每天都能涨知识。点击历史消息,查看所有已推送的文章,喜欢可以置顶本公众号。此外,本公众号支持投稿,如果你有原创的文章,希望通过本公众号发布,欢迎投稿。
目录
相关文章推荐
鸿洋  ·  Android | ... ·  3 天前  
stormzhang  ·  被裁员就是员工的错了? ·  4 天前  
鸿洋  ·  Perfetto 快速上手指南 ·  5 天前  
鸿洋  ·  Android 复杂项目崩溃率收敛至0.01%实践 ·  6 天前  
stormzhang  ·  特斯拉画的饼,圆上了? ·  6 天前  
51好读  ›  专栏  ›  鸿洋

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

鸿洋  · 公众号  · android  · 2017-06-27 07:29

正文

每日推荐


优雅地刷新Recyclerview(可配合大多数Adapter ; 一行代码刷新相应viewType ; 支持facebook的shimmer加载效果 ; 支持粘性头 ;支持异步刷新,可扩展(如配合RxJava);


支持loadingView,dataView,errorView,emptyView自如切换),刷新模式自由切换;支持注解生成;支持刷新生命周期回调


https://github.com/crazysunj/MultiTypeRecyclerViewAdapter


本文作者


本文由恋猫月亮授权发布。

恋猫月亮的博客地址

http://www.jianshu.com/u/6e613846e1ea


Hello,大家吼,吾就是那个挖坑不止的郭小喵,不管有没有想我(˶‾᷄ ⁻̫ ‾᷅˵)的,这次就分享快速实现一个自定义WebView的小控件吧,效果如下图,废话不多说,我们直接开撸吧。


(PS : ╮(╯▽╰)╭如果你翻一翻我过去的文章,你会发现90%的开场白,前几个问候语都是一样的。)



1

前言


** 戳这里可以去DEMO,来吧 **

https://github.com/CarGuo/CustomActionWebView


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


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


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


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


2

自定义长按弹出菜单


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


这两个方法会在用户长按选择web文本时,在弹出菜单前被调用。它们之间的区别在于,第一个方法的菜单弹出方式,指定了默认的type。


我们并不关系弹出的item类型是什么,我们只需要拦截下来ActionMode,然后返回我们自己的自定义ActionMode即可。



这里我们所做的事是:


  • 1、把原本的actionMode对象保存到mActionMode中。

  • 2、清空原本actionMode中的MenuItem

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

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

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

  • 6、通过上面保存的 mActionMode,释放弹出菜单(不释放会内存泄漏)。

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




3

获取选中文本


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


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


然后将这个接口,在CustomActionWebView中add进去(一般是在初始化和页面加载完成时都add一次),并指定js端调用的接口名称为“ JSInterface”。

(ps:别忘了开始webview的js允许哦。)



最后在点击时,通过执行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方法的接口也不一样。




4

最后


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


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


https://github.com/CarGuo/CustomActionWebView


如果你有想学习的文章直接留言,我会整理征稿。如果你有好的文章想和大家分享欢迎投稿,直接向我投递文章链接即可。


欢迎长按下图->识别图中二维码或者扫一扫关注我的公众号: