Android WebView中圖片瀏覽及縮放效果
本文實(shí)例為大家分享了Android WebView圖片瀏覽及縮放效果展示的具體代碼,供大家參考,具體內(nèi)容如下

此工程用到了兩個(gè)開源庫:
PhotoView支持圖片的縮放
Android-Universal-Image-Loader圖片的異步加載
(android studio)將兩個(gè)源工程中的library文件夾導(dǎo)入到Demo Module所在的Project中,修改各自的build.gradle文件,讓里面的版本號(hào)、所用的android包等與Demo Module相同即可。大致如圖:

源代碼:
主Activity.java
public class MainActivity extends Activity {
private WebView webview;
private WebSettings wv;
private ArrayList<String> listimg;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webview = (WebView)findViewById(R.id.webview);
listimg = new ArrayList<>();
wv = webview.getSettings();
wv.setJavaScriptEnabled(true);
webview.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");//綁定javasrcipt接口,imagelistner為接口的別名
webview.loadUrl("http://portal.smu.edu.cn/e/action/ShowInfo2.php?classid=1415&id=63663&tlpid=98");
webview.setWebViewClient(new WebViewClient(){
public boolean shouldOverrideUrlLoading(WebView view, String url)
{
//點(diǎn)擊webView中的鍵接,依然在此webview中顯示,而不跳轉(zhuǎn)到別的瀏覽器
webview.loadUrl(url);
return super.shouldOverrideUrlLoading(view, url);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
addImageListner(); //當(dāng)頁面加載完成,就調(diào)用我們的addImageListener()函數(shù)
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
});
}
private void addImageListner() {
//遍歷頁面中所有img的節(jié)點(diǎn),因?yàn)楣?jié)點(diǎn)里面的圖片的url即objs[i].src,保存所有圖片的src.
//為每個(gè)圖片設(shè)置點(diǎn)擊事件,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); " +
" } " +
"}" +
"})()");
}
class JavascriptInterface {
private Context context;
public JavascriptInterface(Context context) {
this.context = context;
}
@android.webkit.JavascriptInterface
public void readImageUrl(String img) { //把所有圖片的url保存在ArrayList<String>中
listimg.add(img);
}
@android.webkit.JavascriptInterface //對(duì)于targetSdkVersion>=17的,要加這個(gè)聲明
public void openImage(String clickimg)//點(diǎn)擊圖片所調(diào)用到的函數(shù)
{
int index = 0;
for(String url:listimg)
if(url.equals(clickimg)) index = listimg.indexOf(clickimg);//獲取點(diǎn)擊圖片在整個(gè)頁面圖片中的位置
Intent intent = new Intent();
Bundle bundle = new Bundle();
bundle.putStringArrayList("list_image",listimg);
bundle.putInt("index", index);
intent.putExtra("bundle", bundle);//將所有圖片的url以及點(diǎn)擊圖片的位置作為參數(shù)傳給啟動(dòng)的activity
intent.setClass(context, ViewPagerActivity.class);
context.startActivity(intent);//啟動(dòng)ViewPagerActivity,用于顯示圖片
}
}
}
ViewPagerActivity.java
public class ViewPagerActivity extends Activity {
private ViewPager mViewPager;
private View rootView;
private PhotoView image;
private TextView indicator;
private Bundle bundle;
ArrayList<String> listimg;
private int index;
private int count;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager);
mViewPager = (HackyViewPager) findViewById(R.id.view_pager);
setContentView(mViewPager);
bundle = getIntent().getBundleExtra("bundle");
listimg = bundle.getStringArrayList("list_image");
index = bundle.getInt("index");
count = listimg.size();
mViewPager.setAdapter(new SamplePagerAdapter());
mViewPager.setCurrentItem(index);
}
class SamplePagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return count;
}
@Override
//此處用到PhotoView、ImageLoader均為第三方類庫的類
public View instantiateItem(ViewGroup container, int position) {
rootView = View.inflate(ViewPagerActivity.this, R.layout.viewpager_item, null);
image = (PhotoView) rootView.findViewById(R.id.photoview);
indicator = (TextView) rootView.findViewById(R.id.indicator);
ImageLoader imageloader=ImageLoader.getInstance();
imageloader.init(ImageLoaderConfiguration.createDefault(ViewPagerActivity.this));
imageloader.displayImage(listimg.get(position), image);
CharSequence text = getString(R.string.viewpager_indicator, position+1, count);
indicator.setText(text);
container.addView(rootView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
return rootView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}
}
HackViewPager.java
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);
}
}
相關(guān)的布局文件:
MainActivity布局中只有一個(gè)簡單的webView;
ViewPagerActivity布局中也只是一個(gè)HackViewPager;
HackViewPager中每一個(gè)View的布局:
viewpager_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/white" android:text="@string/viewpager_indicator" android:background="@android:color/transparent" /> </RelativeLayout>
用到了一個(gè)@string/viewpager_indicator為
<string name="viewpager_indicator">%1$d/%2$d</string>
總結(jié):主要難點(diǎn)還是在獲取頁面中圖片的url,用到的是java函數(shù)與javascript的通信。
相關(guān)文章
Android自定義View實(shí)現(xiàn)彈性小球效果
前段時(shí)間看到一個(gè)功能,是一個(gè)小球沿著固定軌跡彈動(dòng)的效果,那么這篇文章小編給大家分享在Android中如何自定義View來實(shí)現(xiàn)彈性小球的效果,有需要的可以參考借鑒。2016-09-09
利用Flutter實(shí)現(xiàn)“孔雀開屏”的動(dòng)畫效果
這篇文章主要給大家介紹了關(guān)于如何利用Flutter實(shí)現(xiàn)“孔雀開屏”的動(dòng)畫效果,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Android 靜默安裝和智能安裝的實(shí)現(xiàn)方法
靜默安裝就是無聲無息的在后臺(tái)安裝apk,沒有任何界面提示。智能安裝就是有安裝界面,但全部是自動(dòng)的,不需要用戶去點(diǎn)擊。下面腳本之家小編給大家介紹下Android 靜默安裝和智能安裝的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2018-01-01
Android實(shí)現(xiàn)微信側(cè)滑關(guān)閉頁面效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)微信側(cè)滑關(guān)閉頁面效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12
Android獲取所在時(shí)區(qū)時(shí)間的兩種方式
Android獲取所在時(shí)區(qū)正確時(shí)間的方式有兩種,通過wifi獲取時(shí)間和通過通過GPS獲取時(shí)間這兩種方式,文中通過代碼示例給大家的介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Android RecyclerView 上拉加載更多及下拉刷新功能的實(shí)現(xiàn)方法
這篇文章主要介紹了Android RecyclerView 上拉加載更多及下拉刷新的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
Android 對(duì)話框(Dialog)大全示例(建立你自己的對(duì)話框)
android開發(fā)中,對(duì)話框的使用還是很平凡的,本篇文章介紹了Android 對(duì)話框的實(shí)例,詳細(xì)的介紹了多種對(duì)話框的方法,有興趣的可以了解一下。2016-11-11
Android如何判斷手機(jī)是否有錄音權(quán)限的工具類
這篇文章主要為大家詳細(xì)介紹了Android判斷手機(jī)是否有錄音的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06

