Android点击WebView中的图片实现缩放及滑动浏览

最近做的项目有一个要求,就是在WebView中显示的html,需要在点击其中的图片时进行放大,并进行缩放和滑动
浏览,我第一想到的是这是和js进行交互的事情,但是怎么获取html中图片的url,并保存起来进行显示,我就不知道
了,所以去查了下资料,最后找到了解决的办法:
博客地址:http://blog.csdn.net/ji_xu_qiang/article/details/47375721
首先说一下处理这个要求的思路,首先我们要获取到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>

最后效果: