189 8069 5689
这篇文章主要介绍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中
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:
