android 點選圖檔縮放效果,Android點選WebView實作圖檔縮放及滑動浏覽效果

最近做的項目有一個要求,就是在WebView中顯示的html,需要在點選其中的圖檔時進行放大,并進行縮放和滑動

浏覽,我第一想到的是這是和js進行互動的事情,但是怎麼擷取html中圖檔的url,并儲存起來進行顯示,我就不知道

了,是以去查了下資料,最後找到了解決的辦法:

部落格位址：Android WebView中圖檔浏覽及縮放效果

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

"{" +

"window.imagelistner.readImageUrl(objs[i].src); " +

" objs[i].οnclick=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中

images.add(img);

}

@android.webkit.JavascriptInterface //對于targetSdkVersion>=17的，要加這個聲明

public void openImage(String clickimg)//點選圖檔所調用到的函數

{

int index = 0;

ArrayList 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 addImages() {

ArrayList 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 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:

android:layout_width="match_parent"

android:layout_height="match_parent"

>

android:id="@+id/photoview"

android:layout_width="match_parent"

android:layout_height="match_parent" />

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" />

用到了一個@string/viewpager_indicator為

%1$d/%2$d

最後效果：

以上就是本文的全部内容，希望對大家的學習有所幫助，也希望大家多多支援腳本之家。