WebView页面上的图片点击的时候加载到Viewpager显示并且可以放大缩小

//photoView的依赖    compile 'com.github.chrisbanes.photoview:library:+'
public class MainActivity extends AppCompatActivity {    private WebView webview;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        webview = (WebView) findViewById(R.id.webview);        webview.getSettings().setJavaScriptEnabled(true);        webview.addJavascriptInterface(new JavascriptInterface(), "imageListener");        webview.setWebViewClient(new WebViewClient() {            @Override            public void onPageFinished(WebView view, String url) {                webview.loadUrl("javascript:(function(){" +                        "var objs = document.getElementsByTagName(\"img\"); " +                        "var imgUrl = \"\";" +                        "var filter = [\"img//EventHead.png\",\"img//kong.png\",\"hdtz//button" +                        ".png\"];" +                        "var isShow = true;" +                        "for(var i=0;i<objs.length;i++){" +                        "for(var j=0;j<filter.length;j++){" +                        "if(objs[i].src.indexOf(filter[j])>=0) {" +                        "isShow = false; break;}}" +                        "if(isShow && objs[i].width>100){" +                        "imgUrl += objs[i].src + ',';isShow = true;" +                        "    objs[i].onclick=function()  " +                        "    {  "                        + "        window.imageListener.openImage(imgUrl);" +                        "    }" +                        "}" +                        "}" +                        "})()"                );            }        });        webview.loadUrl("http://news.sina.com.cn/o/2017-08-20/doc-ifykcirz3302042.shtml");//        得到屏幕的宽和高        getWindowWidthAndHeight();    }    //        得到屏幕的宽和高    private void getWindowWidthAndHeight() {        DisplayMetrics metrics = new DisplayMetrics();        WindowManager manager = getWindowManager();        manager.getDefaultDisplay().getMetrics(metrics);        //暂时定义一个类,保存屏幕的宽高,在后面加载的图片让他全屏显示        Config.WINDOW_WIDTH = metrics.widthPixels;        Config.WINDOW_HEIGHT = metrics.heightPixels;
//下面方法也可以得到屏幕的宽和高DisplayMetrics displayMetrics1 = getActivity().getResources().getDisplayMetrics();Config.WINDOW_WIDTH = displayMetrics1.widthPixels;Config.WINDOW_HEIGHT = displayMetrics1.heightPixels;
    }    //和js交互的方法    public class JavascriptInterface {        //js将所有图片url用逗号分隔拼接成字符串,通过 openImage(String imageUrl)这个方法的参数传给我们        @android.webkit.JavascriptInterface        public void openImage(String imageUrl) {            String[] imgs = imageUrl.split(",");            //将字符串解析成图片url的集合            final ArrayList<String> imgUrlList = new ArrayList<>();            for (String s : imgs) {                imgUrlList.add(s);            }            //从js回调回来的方法默认是在js的一个线程中是子线程,所以要做更新UI的操作的话需要放到主线程            runOnUiThread(new Runnable() {                @Override                public void run() {                    //拿到图片url集合去显示我们的viewpager                    new MyViewPagerDialog(MainActivity.this, imgUrlList).show();                }            });        }    }}
//自定义类保存屏幕的宽高
public class Config {    public static int WINDOW_WIDTH;    public static int WINDOW_HEIGHT;}
//点击图片的时候弹出dialog,里面存放的是viewpager,
class MyViewPagerDialog extends Dialog {    private ArrayList<String> imgUrlList;    private TextView page;    private ViewPager viewpager;    private View view;    private List<View> list;    public MyViewPagerDialog(@NonNull Context context, ArrayList<String> imgUrlList) {        //注意在这里给dialog设置一个style,透明背景        super(context, R.style.transparentBgDialog);        this.imgUrlList = imgUrlList;
//控件必须在这里初始化,不能再oncreate初始化        initView(context);        intiData(context);    }    private void intiData(Context context) {        list = new ArrayList<>();        //默认显示页面从1页开始        page.setText("1/" + imgUrlList.size());        //遍历把图片的地址加载出来,添加到photoView上面        for (int i = 0; i < imgUrlList.size(); i++) {            PhotoView photoView = new PhotoView(context);            //点击图片关闭viewpager            photoView.setOnViewTapListener(new OnViewTapListener() {                @Override                public void onViewTap(View view, float x, float y) {                    dismiss();                }            });            //设置photoView的图片铺满全屏            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup                    .LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);            photoView.setLayoutParams(layoutParams);            //把图片加载出来,显示在PhohoView上面            DisplayImageOptions build = new DisplayImageOptions.Builder()                    .cacheInMemory(true)                    .cacheOnDisk(true)                    .showImageOnFail(R.mipmap.ic_launcher_round)//加载错误显示的图片                    .build();            ImageLoader.getInstance().displayImage(imgUrlList.get(i), photoView, build);            //然后把加载出来的photoView添加到集合,然后传到ViewPager适配器            list.add(photoView);        }        //然后给设置适配器        viewpager.setAdapter(new MyViewPagerAdapter());        viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int                    positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                page.setText(position + 1 + "/" + imgUrlList.size());            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    private void initView(Context context) {        view = LayoutInflater.from(context).inflate(R.layout.dialog_viewpager, null);        page = (TextView) view.findViewById(R.id.page);        viewpager = (ViewPager) view.findViewById(R.id.viewpager);        //因为默认的dialog是窗口模式,不是全屏,所以重新设置一下屏幕是全屏        Window window = getWindow();        WindowManager.LayoutParams layoutParams = window.getAttributes();        layoutParams.x = 0;        layoutParams.y = 0;        layoutParams.width = Config.WINDOW_WIDTH;        layoutParams.height = Config.WINDOW_HEIGHT;        window.setAttributes(layoutParams);    }    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(view);    }    class MyViewPagerAdapter extends PagerAdapter {        @Override        public int getCount() {            return list != null ? list.size() : 0;        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            container.addView(list.get(position));            return list.get(position);        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }    }}
//弹出的dialog的布局
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"             android:layout_width="match_parent"             android:layout_height="match_parent">    <TextView        android:id="@+id/page"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center_horizontal"/>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></FrameLayout>

//给dialog设置一个透明的style背景
<!--全屏背景半透明 dialog--><style name="transparentBgDialog" parent="@android:style/Theme.Dialog">    <item name="android:windowIsTranslucent">true</item>    //自己在color里面定义一个透明的颜色#00000000    <item name="android:background">@color/transparent</item>    <item name="android:windowBackground">@color/transparent</item>    <item name="android:backgroundDimEnabled">true</item>    <item name="android:windowNoTitle">true</item></style>