//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.JavascriptInterfacepublic 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() { @Overridepublic void run() { //拿到圖片url集合去顯示我們的viewpagernew 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>