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

这篇文章主要介绍“Android点击WebView怎么实现图片缩放及滑动浏览效果”，在日常操作中，相信很多人在Android点击WebView怎么实现图片缩放及滑动浏览效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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>

最后效果：

到此，关于“Android点击WebView怎么实现图片缩放及滑动浏览效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！