国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 系統 > Android > 正文

Android點擊WebView實現圖片縮放及滑動瀏覽效果

2019-10-22 18:20:15
字體:
來源:轉載
供稿:網友

最近做的項目有一個要求,就是在WebView中顯示的html,需要在點擊其中的圖片時進行放大,并進行縮放和滑動
瀏覽,我第一想到的是這是和js進行交互的事情,但是怎么獲取html中圖片的url,并保存起來進行顯示,我就不知道
了,所以去查了下資料,最后找到了解決的辦法:

首先說一下處理這個要求的思路,首先我們要獲取到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>

最后效果:

Android,圖片縮放,圖片滑動

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


注:相關教程知識閱讀請移步到Android開發頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 六枝特区| 嵊州市| 神木县| 梨树县| 鸡泽县| 墨竹工卡县| 云霄县| 夏邑县| 洛隆县| 托克逊县| 迭部县| 英吉沙县| 泗水县| 太仆寺旗| 博湖县| 柘城县| 武胜县| 桦南县| 呼伦贝尔市| 堆龙德庆县| 上犹县| 衡阳市| 上思县| 康保县| 闻喜县| 三河市| 玉屏| 都匀市| 钦州市| 肃宁县| 沅江市| 金山区| 彰化县| 东方市| 黎城县| 黎平县| 易门县| 沽源县| 丰原市| 临夏市| 威宁|