Android點(diǎn)擊WebView實(shí)現(xiàn)圖片縮放及滑動(dòng)瀏覽效果
更新時(shí)間：2017年12月15日 09:47:34 作者：HAndroidevelopcker
這篇文章主要為大家詳細(xì)介紹了Android點(diǎn)擊WebView實(shí)現(xiàn)圖片縮放及滑動(dòng)瀏覽效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近做的項(xiàng)目有一個(gè)要求,就是在WebView中顯示的html,需要在點(diǎn)擊其中的圖片時(shí)進(jìn)行放大,并進(jìn)行縮放和滑動(dòng)
瀏覽,我第一想到的是這是和js進(jìn)行交互的事情,但是怎么獲取html中圖片的url,并保存起來(lái)進(jìn)行顯示,我就不知道
了,所以去查了下資料,最后找到了解決的辦法:
博客地址：Android WebView中圖片瀏覽及縮放效果
首先說(shuō)一下處理這個(gè)要求的思路,首先我們要獲取到html中的所有圖片的url,并保存到集合中,當(dāng)點(diǎn)擊圖片時(shí),跳轉(zhuǎn)
一個(gè)Activity用ViewPager進(jìn)行顯示,這樣就實(shí)現(xiàn)了滑動(dòng)瀏覽的效果,至于圖片的縮放我們則需要用到第三的開(kāi)源 庫(kù)PhotoView.
首先是WebView的設(shè)置:
webView = (WebView) findViewById(R.id.webview);
webView.loadUrl(url);
WebSettings settings = webView.getSettings();
//設(shè)置屏幕適應(yīng)
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)頁(yè)跳轉(zhuǎn)
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return super.shouldOverrideUrlLoading(view, url);
}
// 網(wǎng)頁(yè)加載結(jié)束
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// html加載完成之后，添加監(jiān)聽(tīng)圖片的點(diǎn)擊js函數(shù)
addImageClickListner();
}
});
然后是獲取html中的圖片url,保存并打開(kāi)(最主要的就是注入js函數(shù)監(jiān)聽(tīng)，拿到所有圖片的url)，這里我在添加圖片時(shí)發(fā)現(xiàn)圖片添加了兩次,所以我就把list集合中的元素進(jìn)行去重了：
// 注入js函數(shù)監(jiān)聽(tīng)
private void addImageClickListner() {
//遍歷頁(yè)面中所有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); " +
" } " +
"}" +
"})()");
}
// 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 //對(duì)于targetSdkVersion>=17的，要加這個(gè)聲明
public void openImage(String clickimg)//點(diǎn)擊圖片所調(diào)用到的函數(shù)
{
int index = 0;
ArrayList<String> list = addImages();
for (String url : list)
if (url.equals(clickimg)) index = list.indexOf(clickimg);//獲取點(diǎn)擊圖片在整個(gè)頁(yè)面圖片中的位置
Intent intent = new Intent();
Bundle bundle = new Bundle();
bundle.putStringArrayList("list_image", list);
bundle.putInt("index", index);
intent.putExtra("bundle", bundle);//將所有圖片的url以及點(diǎn)擊圖片的位置作為參數(shù)傳給啟動(dòng)的activity
intent.setClass(context, ShowWebImageActivity.class);
context.startActivity(intent);//啟動(dòng)ViewPagerActivity,用于顯示圖片
}
}
//去重復(fù)
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;
}
接下來(lái)展示ShowWebImageActivity中的代碼,因?yàn)镾howWebImageActivity需要進(jìn)行圖片的滑動(dòng)瀏覽,所以需
要用ViewPager,所以自定義了一個(gè)ViewPager,在里面處理了觸摸事件,接下來(lái)就貼下代碼:
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());
//設(shè)置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);
}
}
相關(guān)布局文件:
MainActivity布局中只有一個(gè)簡(jiǎn)單的webView;
ViewPagerActivity布局中也只是一個(gè)HackViewPager;
HackViewPager中每一個(gè)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>
用到了一個(gè)@string/viewpager_indicator為
<string name="viewpager_indicator">%1$d/%2$d</string>
最后效果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
android二級(jí)listview列表實(shí)現(xiàn)代碼
今天來(lái)實(shí)現(xiàn)以下大眾點(diǎn)評(píng)客戶端的橫向listview二級(jí)列表,感興趣的朋友可以研究下2013-01-01
這篇文章主要介紹了Android 中Manifest.xml文件詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
新浪微博第三方登錄界面上下拉伸圖片之第三方開(kāi)源PullToZoomListViewEx（一）
PullZoomView要實(shí)現(xiàn)兩類(lèi)，一類(lèi)是典型的Android ListView，另外一類(lèi)是Android 的scroll view。本文先介紹PullZoomView在ListView上的實(shí)現(xiàn)：PullToZoomListViewEx2015-12-12
Android?Jetpack組件ViewModel基本用法詳解
這篇文章主要為大家介紹了Android?Jetpack組件ViewModel基本用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Android實(shí)現(xiàn)長(zhǎng)按back鍵退出應(yīng)用程序的方法
這篇文章主要介紹了Android實(shí)現(xiàn)長(zhǎng)按back鍵退出應(yīng)用程序的方法,實(shí)例分析了Android按鈕事件的操作技巧,需要的朋友可以參考下2015-05-05
解決Android Studio sdk emulator directory is missing問(wèn)題
這篇文章主要介紹了解決Android Studio sdk emulator directory is missing問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了Android中判斷屏幕是否亮屏和是否解鎖功能,需要的朋友可以參考下2017-02-02
Android自定義View實(shí)現(xiàn)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要給大家介紹了關(guān)于Kotlin如何直接使用控件ID原理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了Android Studio安裝配置方法圖文教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04