Android WebView中图片浏览及缩放效果

本文实例为大家分享了Android WebView图片浏览及缩放效果展示的具体代码,供大家参考,具体内容如下

此工程用到了两个开源库:

PhotoView支持图片的缩放
Android-Universal-Image-Loader图片的异步加载

(android studio)将两个源工程中的library文件夹导入到Demo Module所在的Project中,修改各自的build.gradle文件,让里面的版本号、所用的android包等与Demo Module相同即可。大致如图:

源代码:

主Activity.java

public class MainActivity extends Activity {
 private WebView webview;
 private WebSettings wv;
 private ArrayList<String> listimg;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 webview = (WebView)findViewById(R.id.webview);
 listimg = new ArrayList<>();
  wv = webview.getSettings();
  wv.setJavaScriptEnabled(true);
  webview.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");//绑定javasrcipt接口,imagelistner为接口的别名
  webview.loadUrl("http://portal.smu.edu.cn/e/action/ShowInfo2.php?classid=1415&id=63663&tlpid=98");
  webview.setWebViewClient(new WebViewClient(){
  public boolean shouldOverrideUrlLoading(WebView view, String url)
  {
   //点击webView中的键接,依然在此webview中显示,而不跳转到别的浏览器
   webview.loadUrl(url);
   return super.shouldOverrideUrlLoading(view, url);
  }

 @Override
 public void onPageFinished(WebView view, String url) {
  super.onPageFinished(view, url);
  addImageListner();  //当页面加载完成,就调用我们的addImageListener()函数
  }
 @Override
 public void onPageStarted(WebView view, String url, Bitmap favicon) {
  super.onPageStarted(view, url, favicon);
  }
 });
 }
 private void addImageListner() {

 //遍历页面中所有img的节点,因为节点里面的图片的url即objs[i].src,保存所有图片的src.
 //为每个图片设置点击事件,objs[i].onclick
 webview.loadUrl("javascript:(function(){" +
 "var objs = document.getElementsByTagName(\"img\"); " +
 "for(var i=0;i<objs.length;i++) " +
 "{" +
  "window.imagelistner.readImageUrl(objs[i].src); " +
  " objs[i].onclick=function() " +
  " { "+
   " window.imagelistner.openImage(this.src); " +
  " } " +
 "}" +
 "})()");
 }

 class JavascriptInterface {
 private Context context;
 public JavascriptInterface(Context context) {
  this.context = context;
 }
 @android.webkit.JavascriptInterface
 public void readImageUrl(String img) { //把所有图片的url保存在ArrayList<String>中
  listimg.add(img);
 }
 @android.webkit.JavascriptInterface //对于targetSdkVersion>=17的,要加这个声明
 public void openImage(String clickimg)//点击图片所调用到的函数
 {
 int index = 0;
 for(String url:listimg)
 if(url.equals(clickimg)) index = listimg.indexOf(clickimg);//获取点击图片在整个页面图片中的位置
 Intent intent = new Intent();
 Bundle bundle = new Bundle();
 bundle.putStringArrayList("list_image",listimg);
 bundle.putInt("index", index);
 intent.putExtra("bundle", bundle);//将所有图片的url以及点击图片的位置作为参数传给启动的activity
 intent.setClass(context, ViewPagerActivity.class);
 context.startActivity(intent);//启动ViewPagerActivity,用于显示图片
 }
 }
}

ViewPagerActivity.java

public class ViewPagerActivity extends Activity {
 private ViewPager mViewPager;
 private View rootView;
 private PhotoView image;
 private TextView indicator;
 private Bundle bundle;
 ArrayList<String> listimg;
 private int index;
 private int count;

 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_view_pager);
 mViewPager = (HackyViewPager) findViewById(R.id.view_pager);
 setContentView(mViewPager);
 bundle = getIntent().getBundleExtra("bundle");
 listimg = bundle.getStringArrayList("list_image");
 index = bundle.getInt("index");
 count = listimg.size();
 mViewPager.setAdapter(new SamplePagerAdapter());
 mViewPager.setCurrentItem(index);
 }

 class SamplePagerAdapter extends PagerAdapter {
 @Override
 public int getCount() {
  return count;
 }
 @Override
 //此处用到PhotoView、ImageLoader均为第三方类库的类
 public View instantiateItem(ViewGroup container, int position) {
  rootView = View.inflate(ViewPagerActivity.this, R.layout.viewpager_item, null);
  image = (PhotoView) rootView.findViewById(R.id.photoview);
  indicator = (TextView) rootView.findViewById(R.id.indicator);
  ImageLoader imageloader=ImageLoader.getInstance();
  imageloader.init(ImageLoaderConfiguration.createDefault(ViewPagerActivity.this));
  imageloader.displayImage(listimg.get(position), image);
  CharSequence text = getString(R.string.viewpager_indicator, position+1, count);
  indicator.setText(text);
  container.addView(rootView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
  return rootView;
 }
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  container.removeView((View) object);
 }
 @Override
 public boolean isViewFromObject(View view, Object object) {
  return view == object;
 }
 }
}

HackViewPager.java

public class HackyViewPager extends ViewPager {
 private boolean isLocked;
 public HackyViewPager(Context context) {
 super(context);
 isLocked = false;
 }
 public HackyViewPager(Context context, AttributeSet attrs) {
 super(context, attrs);
 isLocked = false;
 }
 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {//用于处理Touch事件
 if (!isLocked) {
  try {
  return super.onInterceptTouchEvent(ev);
  } catch (IllegalArgumentException e) {
  e.printStackTrace();
  return false;
  }
 }
 return false;
 }
 @Override
 public boolean onTouchEvent(MotionEvent event) {
 return !isLocked && super.onTouchEvent(event);
 }
}

相关的布局文件:
MainActivity布局中只有一个简单的webView;
ViewPagerActivity布局中也只是一个HackViewPager;
HackViewPager中每一个View的布局:

viewpager_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 >
 <uk.co.senab.photoview.PhotoView
 android:id="@+id/photoview"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 />
 <TextView
 android:id="@+id/indicator"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:gravity="center"
 android:textSize="18sp"
 android:textColor="@android:color/white"
 android:text="@string/viewpager_indicator"
 android:background="@android:color/transparent" />
</RelativeLayout>

用到了一个@string/viewpager_indicator为

<string name="viewpager_indicator">%1$d/%2$d</string>

总结:主要难点还是在获取页面中图片的url,用到的是java函数与javascript的通信。

您可能感兴趣的文章:

  • Android webview转PDF的方法示例
  • Android WebView实现长按保存图片及长按识别二维码功能
  • Android 保存WebView中的图片示例
  • Android 中WebView 截图的实现方式
  • Android点击WebView实现图片缩放及滑动浏览效果
  • android中webview定位问题示例详解
  • 实例详解Android Webview拦截ajax请求
  • Android自定义webView头部进度加载效果
  • Android中WebView的基本配置与填坑记录大全
  • Android用webView包装WebAPP方法
(0)

相关推荐

  • Android webview转PDF的方法示例

    1.网上找了好多没有显示出来效果不错,后来看到调用手机打印预览,看了效果还不错,就打算使用系统打印服务预览下载 2.'webView.createPrintDocumentAdapter()'得到打印的PrintDocumentAdapter有了该类就可以使用onWrite方法写入制定的文件,但是这个方法需要传入回调这个悲剧的是这个回调方法是hiden的我们没办法调用 3,字怎么解决呢,有连个方法 3.1 使用此开源库替换自己的sdk 中的android.jar文件,就可以使用了 https:/

  • Android WebView实现长按保存图片及长按识别二维码功能

    先来简单说一下本文所要实现的功能:用户在浏览网页的时候,长按某一区域,识别如果是图片,则弹出弹框,出现保存图片的功能.同时识别图片是否是二维码,如果是则在弹框中追加识别二维码功能. 细节上:保存图片的弹框要显示在手指长按的位置:选择图片保存后,可以让用户直接去相册查看:选择识别二维码,判断是是不是网址,是的话可以让用户选择复制或访问,否则可以让用户选择复制或搜索. 然后再来看一下效果图: 保存图片 save.gif 识别包含普通文字的二维码: text.gif 识别包含网址的二维码: code.

  • Android用webView包装WebAPP方法

    前言 Android webView 兼容体验真的差到了极点!! 前一阵子,老板要将 WebAPP 放到 Android 和 iOS 里面,而我因为以前做过安卓,所以这方面就由我来打包,原理是很简单的,就是打开 APP 的时候用 webView 加载网站的网址,这样服务器一次更新,就能更新微信版, iOS 版和 Android 版; 首先我要说一句,如果你的 WebAPP 里面有文件上传,并且想要完全兼容,那么就别用原生的 WebAPP, 后面我会写一个关于 crossWalk 的博客,不过在此

  • Android 中WebView 截图的实现方式

    Hybrid App 中网页部分的分享方式越来越趋向于多元化,比较常见的用户操作方式有:复制网页链接式,直接选择目标应用自动分享式等.其中,截图行为,越来越成为丰富用户操作.备受用户喜爱的互动方式之一,我们在很多内容社区类应用中都能看到这种功能.这篇文章总结一下 Android 应用中 WebView 截图的实现方式. WebView 作为一种特殊的控件,自然不能像其他系统 View 或者截屏的方式来获取截图(多为截取长图).如: public static Bitmap getScreenSh

  • 实例详解Android Webview拦截ajax请求

    Android Webview虽然提供了页面加载及资源请求的钩子,但是对于h5的ajax请求并没有提供干涉的接口,这意味着我们不能在webview中干涉javascript发起的http请求,而有时候我们确实需要能够截获ajax请求并实现一些功能如:统一的网络请求管理.cookie同步.证书校验.访问控制等. 思路 虽然在 Webview中无法直接拦截 ajax请求(其实在shouldInterceptRequest 中是可以收到ajax请求的,但是遗憾的是取不到请求参数,这样也是没有意义的),

  • Android自定义webView头部进度加载效果

    不多说先来看下效果图: 1. 颜色渐变加载进度条(夜神模拟器) 绿色加载进度条(魅蓝note2) 看图说话: 上图是不是加载网页的时候会有一个进度条在横向加载,比以前网速不好的时候是一片空白给人的感觉友好多了是不,然后效果还不错. 实现思路 就是自己画一条进度线(大家应该都会吧)然后加载到WebView的上面,开始进度条是隐藏的,进度线初始值为1,然后为了效果好一点,初始少于10的进度都让它加载到10的位置,等进度到100的时候0.2秒后隐藏. 请记得添加网络权限: <uses-permissi

  • Android中WebView的基本配置与填坑记录大全

    前言 在应用程序开发过程中,经常会采用webview来展现某些界面,这样就可以不受发布版本控制,实时更新,遇到问题可以快速修复. 但是在Android开发中,由于Android版本分化严重,每一个版本针对webview都有部分更改,因此在开发过程中会遇到各种各样的坑,下面这篇就来给大家介绍关于Android中WebView的基本配置与填坑记录,话不多说了,来一起看看详细的介绍吧. 基本配置 // 硬件加速 getActivity().getWindow().setFlags( WindowMan

  • Android 保存WebView中的图片示例

    前言 项目中有需求在APP的Webview中长按图片可以保存.后来就去研究一下该怎么实现,顺便整理了一下. WebView基本配置 mWvContent.getSettings().setJavaScriptEnabled(true); mWvContent.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); mWvContent.getSettings().setDomStorageEnabled(false); mWvC

  • android中webview定位问题示例详解

    前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝.京东.聚划算等等 京东首页 那么这种该如何实现呢?其实这是Android里一个叫WebView的组件实现的. 最近在做安卓的网页开发.有一个页面需要用到定位,但是一直定位获取失败.很难过.网上教程也很多,但是无一例外全部失败.最后老夫花了3天时间,呕心沥血,终于研制出了解决方案. 三步走战略: 一.获取权限 android 6.0 以后,需要动态的获取位置或者存储权限,按照各自的爱好放置位置.我是应用开启

  • Android点击WebView实现图片缩放及滑动浏览效果

    最近做的项目有一个要求,就是在WebView中显示的html,需要在点击其中的图片时进行放大,并进行缩放和滑动 浏览,我第一想到的是这是和js进行交互的事情,但是怎么获取html中图片的url,并保存起来进行显示,我就不知道 了,所以去查了下资料,最后找到了解决的办法: 博客地址:Android WebView中图片浏览及缩放效果 首先说一下处理这个要求的思路,首先我们要获取到html中的所有图片的url,并保存到集合中,当点击图片时,跳转 一个Activity用ViewPager进行显示,这样

随机推荐