Android WebView实现长按保存图片及长按识别二维码功能
作者:大头呆
先来简单说一下本文所要实现的功能:用户在浏览网页的时候,长按某一区域,识别如果是图片,则弹出弹框,出现保存图片的功能。同时识别图片是否是二维码,如果是则在弹框中追加识别二维码功能。
细节上:保存图片的弹框要显示在手指长按的位置;选择图片保存后,可以让用户直接去相册查看;选择识别二维码,判断是是不是网址,是的话可以让用户选择复制或访问,否则可以让用户选择复制或搜索。
然后再来看一下效果图:
保存图片
save.gif
识别包含普通文字的二维码:
text.gif
识别包含网址的二维码:
code.gif
上述功能所用到的类和库:
- 获得长按内容: WebView.HitTestResult
- 弹框列表: DialogFragment
- 图片下载: Glide
- 二维码识别: Zxing
实现要点
记录长按位置
继承 WebView 记录触摸位置:
@Override public boolean onInterceptTouchEvent(MotionEvent event) { touchX = (int) event.getRawX(); touchY = (int) event.getRawY(); return super.onInterceptTouchEvent(event); }
弹框我选择 DialogFragment 而不是 poupwindow 的原因是 poupwindow 的显示通常需要依托另一个View,而且在7.0以上有兼容问题。
判断长按位置的内容类型是否是图片:
获取图片信息
setOnLongClickListener(new View.OnLongClickListener() { public boolean onLongClick(View v) { WebView.HitTestResult result = getHitTestResult(); if (null == result) return false; int type = result.getType(); switch (type) { case WebView.HitTestResult.EDIT_TEXT_TYPE: // 选中的文字类型 break; case WebView.HitTestResult.PHONE_TYPE: // 处理拨号 break; case WebView.HitTestResult.EMAIL_TYPE: // 处理Email break; case WebView.HitTestResult.GEO_TYPE: // 地图类型 break; case WebView.HitTestResult.SRC_ANCHOR_TYPE: // 超链接 break; case WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE: // 带有链接的图片类型 case WebView.HitTestResult.IMAGE_TYPE: // 处理长按图片的菜单项 String url = result.getExtra(); if (mOnSelectItemListener != null && url != null && URLUtil.isValidUrl(url)) mOnSelectItemListener.onSelected(touchX, touchY, result.getType(), url); } return true; case WebView.HitTestResult.UNKNOWN_TYPE: //未知 break; } return false; } });
在手指长按位置处弹出弹框
HitTestResult 是一个实体类,只记录两个信息:当选选择内容的类型和内容的具体值。可以看到通过 WebView.HitTestResult ,我们可以获得除了图片外的很多内容类型。当然这里我们只需要判断是否是图片就好了,然后将长按位置和url一起回调给外层。在手指长按处显示弹框,主要就是 DialogFragment 显示位置的设定了:
public void onStart() { super.onStart(); Dialog dialog = getDialog(); if (dialog != null) { Window window = dialog.getWindow(); if (window != null) { WindowManager.LayoutParams lp = window.getAttributes(); window.setGravity(Gravity.LEFT | Gravity.TOP); lp.x = LocationX;//横坐标位置 lp.y = LocationY;//纵坐标位置 lp.width = UIHelper.dip2px(100); lp.dimAmount = 0.0f;//外层背景透明,默认变暗 lp.width = ViewGroup.LayoutParams.WRAP_CONTENT; lp.height = ViewGroup.LayoutParams.WRAP_CONTENT; window.setAttributes(lp); window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));//内部背景透明 } } }
保存到相册
利用 Glide 下载图片, Glide 自带预加载和图片缓存功能,不需要每次都从网络中下载:
GlideApp.with(appContext).asFile().load(url).submit().get();
可以在长按识别出图片的时候就行预加载:
GlideApp.with(appContext).asBitmap().load(url).preload();
将图片保存在相册:
public static void displayToGallery(Context context, File photoFile) { if (photoFile == null || !photoFile.exists()) { return; } String photoPath = photoFile.getAbsolutePath(); String photoName = photoFile.getName(); // 把文件插入到系统图库 try { ContentResolver contentResolver = context.getContentResolver(); MediaStore.Images.Media.insertImage(contentResolver, photoPath, photoName, null); } catch (FileNotFoundException e) { e.printStackTrace(); } // 最后通知图库更新 context.sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, Uri.parse("file://" + photoPath))); }
识别图片中的二维码
显示弹框的同时还要判断图片是否包含二维码,这部分就是 Zxing 自带的功能,所以代码就不贴了。注意不应该等是 Zxing 判断是不是二维码后再显示弹框,因为这部分操作耗时可能比较长(见图二)。应当在识别二维码内容后再去更新弹框列表的内容。
总结
总体来说这个功能实现注意的地方还是挺多的,好在都不复杂。当然本例还存在待优化的地方,以及实现更高级的功能,比如以图搜图,查看大图功能,也可以利用 WebView.HitTestResult 对获取到其他类型的内容进行处理,限于篇幅就不再展开了。
最后贴下本项目github地址,对 WebView 感兴趣的可以了解下:
总结
以上所述是小编给大家介绍的Android WebView实现长按保存图片及长按识别二维码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!