使用JS交互WebView可点击图片

前言:  本来昨天查看CSDN查看此方面的知识发现每一个作者写的都是跟乱，可读性非常差 甚至让你跟着步骤进行C  V 大法都不一定能够实现其中的点击图片进行显示的效果，，所以我写了此博客来给各位读者进行阅读。

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

   开源框架的依赖 在我们项目module build.gradle中配置

  

 implementation'com.github.chrisbanes:PhotoView:2.0.0'

 首先是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函数

                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        addImageClickListner();
                    }
            },2000);


            }

        });

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

 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>中
            listds.add(img);  //此处写一个成员集合泛型是String

        }

        @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 : listds) {
            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布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

   <com.example.jing.myapplication.yikaoquanxingqing.HackyViewPager
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/view_pager"></com.example.jing.myapplication.yikaoquanxingqing.HackyViewPager>

</RelativeLayout>

HackViewPager布局

         

<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      放到你的values中的strings.xml

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

                OK了

转载说明出处 https://blog.csdn.net/qq_42046338/article/details/81583519