Android點擊WebView實現(xiàn)圖片縮放及滑動瀏覽效果
更新時間：2017年12月15日 09:47:34 作者：HAndroidevelopcker
這篇文章主要為大家詳細介紹了Android點擊WebView實現(xiàn)圖片縮放及滑動瀏覽效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近做的項目有一個要求,就是在WebView中顯示的html,需要在點擊其中的圖片時進行放大,并進行縮放和滑動
瀏覽,我第一想到的是這是和js進行交互的事情,但是怎么獲取html中圖片的url,并保存起來進行顯示,我就不知道
了,所以去查了下資料,最后找到了解決的辦法:
博客地址：Android WebView中圖片瀏覽及縮放效果
首先說一下處理這個要求的思路,首先我們要獲取到html中的所有圖片的url,并保存到集合中,當點擊圖片時,跳轉
一個Activity用ViewPager進行顯示,這樣就實現(xiàn)了滑動瀏覽的效果,至于圖片的縮放我們則需要用到第三的開源 庫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() {
// 網(wǎng)頁跳轉
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return super.shouldOverrideUrlLoading(view, url);
}
// 網(wǎng)頁加載結束
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// html加載完成之后，添加監(jiān)聽圖片的點擊js函數(shù)
addImageClickListner();
}
});
然后是獲取html中的圖片url,保存并打開(最主要的就是注入js函數(shù)監(jiān)聽，拿到所有圖片的url)，這里我在添加圖片時發(fā)現(xiàn)圖片添加了兩次,所以我就把list集合中的元素進行去重了：
// 注入js函數(shù)監(jiān)聽
private void addImageClickListner() {
//遍歷頁面中所有img的節(jié)點，因為節(jié)點里面的圖片的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)//點擊圖片所調用到的函數(shù)
{
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以及點擊圖片的位置作為參數(shù)傳給啟動的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中BroadcastReceiver(異步接收廣播Intent)的使用
Broadcast Receiver是Android的五大組件之一，使用頻率也很高,用于異步接收廣播Intent,本文將詳細介紹，需要的朋友可以參考下2012-12-12
Android?Flutter實現(xiàn)自由落體彈跳動畫效果
粒子運動是將對象按照一定物理公式進行的自定義軌跡運動，與普通動畫不同的是，它沒有強制性的動畫開始到結束的時間概念。本文將利用Flutter實現(xiàn)自由落體彈跳動畫效果，感興趣的小伙伴可以學習一下2022-10-10
Android GridView不改變背景色實現(xiàn)網(wǎng)格線效果
這篇文章主要介紹了Android GridView不改變背景色實現(xiàn)網(wǎng)格線效果,需要的朋友可以參考下2016-03-03
在本篇內容里小編給大家分享的是關于android ftp上傳功能實現(xiàn)步驟內容，需要的朋友們可以學習下。2018-12-12
這篇文章主要為大家詳細介紹了android實現(xiàn)簡單圓弧效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細介紹了Android多功能時鐘開發(fā)案例的基礎知識，為開發(fā)Android時鐘打下基礎，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
Android UI控件ExpandableListView基本用法詳解
這篇文章主要為大家詳細介紹了Android UI控件ExpandableListView基本用法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
android判斷手機是否安裝地圖應用實現(xiàn)跳轉到該地圖應用
這篇文章主要給大家介紹了android如何判斷手機是否安裝地圖應用，并實現(xiàn)跳轉到該地圖應用的方法，需要的朋友可以參考借鑒，下面來一起學習學習吧。2017-01-01
這篇文章主要介紹了Android 使用volley過程中遇到的問題解決辦法的相關資料,需要的朋友可以參考下2017-06-06
Android自定義view利用PathEffect實現(xiàn)動態(tài)效果
這篇文章主要為大家詳細介紹了Android自定義view利用PathEffect實現(xiàn)動態(tài)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05