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

 更新时间:2017年12月15日 09:31:54   作者:Ji_xiao_qiang  
这篇文章主要为大家详细介绍了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动画入门教程之kotlin

    Android动画入门教程之kotlin

    最近在学习kotlin,所以下面这篇文章主要给大家介绍了关于Android动画入门教程之kotlin的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-12-12
  • Android自定义View实现弹性小球效果

    Android自定义View实现弹性小球效果

    前段时间看到一个功能,是一个小球沿着固定轨迹弹动的效果,那么这篇文章小编给大家分享在Android中如何自定义View来实现弹性小球的效果,有需要的可以参考借鉴。
    2016-09-09
  • 利用Flutter实现“孔雀开屏”的动画效果

    利用Flutter实现“孔雀开屏”的动画效果

    这篇文章主要给大家介绍了关于如何利用Flutter实现“孔雀开屏”的动画效果,文中通过示例代码介绍的非常详细,对大家学习或者使用Flutter具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-05-05
  • Android 静默安装和智能安装的实现方法

    Android 静默安装和智能安装的实现方法

    静默安装就是无声无息的在后台安装apk,没有任何界面提示。智能安装就是有安装界面,但全部是自动的,不需要用户去点击。下面脚本之家小编给大家介绍下Android 静默安装和智能安装的实现方法,感兴趣的朋友一起看看吧
    2018-01-01
  • Android实现微信侧滑关闭页面效果

    Android实现微信侧滑关闭页面效果

    这篇文章主要为大家详细介绍了Android实现微信侧滑关闭页面效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android获取所在时区时间的两种方式

    Android获取所在时区时间的两种方式

    Android获取所在时区正确时间的方式有两种,通过wifi获取时间和通过通过GPS获取时间这两种方式,文中通过代码示例给大家的介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法

    Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法

    这篇文章主要介绍了Android RecyclerView 上拉加载更多及下拉刷新的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • Android 对话框(Dialog)大全示例(建立你自己的对话框)

    Android 对话框(Dialog)大全示例(建立你自己的对话框)

    android开发中,对话框的使用还是很平凡的,本篇文章介绍了Android 对话框的实例,详细的介绍了多种对话框的方法,有兴趣的可以了解一下。
    2016-11-11
  • Android如何判断手机是否有录音权限的工具类

    Android如何判断手机是否有录音权限的工具类

    这篇文章主要为大家详细介绍了Android判断手机是否有录音的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Android精灵动画用法实例

    Android精灵动画用法实例

    这篇文章主要介绍了Android精灵动画用法,实例分析了Android动画的相关使用技巧,需要的朋友可以参考下
    2015-06-06

最新评论