//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].οnclick=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>
WebView页面上的图片点击的时候加载到Viewpager显示并且可以放大缩小
最新推荐文章于 2021-05-26 03:31:02 发布