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

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

首先说一下处理这个要求的思路,首先我们要获取到html中的所有图片的url,并保存到集合中,当点击图片时,跳转
一个Activity用ViewPager进行显示,这样就实现了滑动浏览的效果,至于图片的缩放我们则需要用到第三的开源 库PhotoView.

首先是WebView的设置:

webView = (WebView) findViewById(R.id.webview);
 webView.loadUrl(url);
 WebSettings settings = webView.getSettings();

//设置屏幕适应
 settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
 settings.setUseWideViewPort(true);
 settings.setLoadWithOverviewMode(true);

//防止中文乱码
 settings.setDefaultTextEncodingName("UTF -8");
 settings.setJavaScriptEnabled(true);
 //载入js
 webView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

webView.setWebViewClient(new WebViewClient() {
  // 网页跳转
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
   view.loadUrl(url);
   return super.shouldOverrideUrlLoading(view, url);
  }

// 网页加载结束
  @Override
  public void onPageFinished(WebView view, String url) {
   super.onPageFinished(view, url);

// html加载完成之后，添加监听图片的点击js函数
   addImageClickListner();
  }
 });

然后是获取html中的图片url,保存并打开(最主要的就是注入js函数监听，拿到所有图片的url)，这里我在添加图片时发现图片添加了两次,所以我就把list集合中的元素进行去重了：

// 注入js函数监听
private void addImageClickListner() {
 //遍历页面中所有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); " +
   " } " +
   "}" +
   "})()");
}

// js通信接口
public class JavascriptInterface {

private Context context;

public JavascriptInterface(Context context) {
  this.context = context;
 }

@android.webkit.JavascriptInterface
 public void readImageUrl(String img) {  //把所有图片的url保存在ArrayList<String>中
  images.add(img);
 }

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

//去重复
private ArrayList<String> addImages() {
 ArrayList<String> list = new ArrayList<>();
 Set set = new HashSet();
 for (String cd:images) {
  if(set.add(cd)){
   list.add(cd);
  }
 }
 return list;
}

接下来展示ShowWebImageActivity中的代码,因为ShowWebImageActivity需要进行图片的滑动浏览,所以需
要用ViewPager,所以自定义了一个ViewPager,在里面处理了触摸事件,接下来就贴下代码:

public class ShowWebImageActivity extends AppCompatActivity{

private ArrayList<String> images;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_show_webimage);
 HackyViewPager hackyViewPager = (HackyViewPager) findViewById(R.id.view_pager);

Bundle bundle = getIntent().getBundleExtra("bundle");
 images = bundle.getStringArrayList("list_image");
 int index = bundle.getInt("index");
 hackyViewPager.setAdapter(new ViewPagerAdapter());
 hackyViewPager.setCurrentItem(index);

}

class ViewPagerAdapter extends PagerAdapter{

@Override
 public int getCount() {
  return images.size();
 }

@Override
 public boolean isViewFromObject(View view, Object object) {
  return view == object;
 }

@Override
 public Object instantiateItem(ViewGroup container, int position) {
  View view = View.inflate(ShowWebImageActivity.this,R.layout.view_pager_item,null);
  PhotoView photoView = (PhotoView) view.findViewById(R.id.photoview);
  TextView indicator = (TextView) view.findViewById(R.id.indicator);
  //用Glide加载图片
  Glide.with(ShowWebImageActivity.this).load(images.get(position)).into(photoView);
  CharSequence text = getString(R.string.viewpager_indicator, position+1, images.size());
  //设置indicator
  indicator.setText(text);
  container.addView(view, ViewPager.LayoutParams.MATCH_PARENT, ViewPager.LayoutParams.MATCH_PARENT);
  return view;
 }

@Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  container.removeView((View) object);
 }
}
}

自定义ViewPager:

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的布局：
view_pager_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/black"
 android:text="@string/viewpager_indicator"
 android:background="@android:color/transparent" />

</RelativeLayout>

用到了一个@string/viewpager_indicator为

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

最后效果：

来源：http://blog.csdn.net/HAndroidevelopcker/article/details/70242414