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

Android點選WebView實現圖片縮放及滑動瀏覽效果
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

最近做的專案有一個要求,就是在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<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 開發 最新文章