有时候,有这样的需求,当我点击网页中的图片时,跳转到新的activity的,查看大图。并能给图片进行放大和缩小这样的功能。
实现这样的功能涉及两个技能要点:
点击网页中的图片时,跳转到新的activity:
js与android相互调用来实现
java调用js:给网页中每个图片添加点击事件
js调用java:点击网页中图片,调用android中方法,打开activity。
查看大图:
可以使用开源框架photoView来实现
photoView:
它是开源的框架,该控件对图片显示进行扩展,能够很方便的实现缩放的效果。
实现步骤:
第一步:网页加载完成,手动给图片添加点击事件
由于网页本身并没有对图片设置点击事件,因此,这里我们要动态给每个img标签添加点击事件
//初始化
WebViewwebView.setWebViewClient(newWebViewClient(){//页面加载完成
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);//给网页里面的img标签去添加点击事件addPictureClick();
}
});
给每个img标签添加点击事件
Android 调用js代码,给每个img标签添加点击事件
private void addPictureClick() {//android调用js代码
webView.loadUrl("javascript:(function(){"+"var objs = document.getElementsByTagName(\"img\"); "+"for(var i=0;i+"{"+" objs[i].onclick=function() "+" "+" { "+" window.imagelistner.openImage(this.src); "+" } "+"}"+"})()");
}
第二步:js调用android本地方法,打开新的Activity查看大图
当点击图片时,调用android本地方法,打开新的activity
//传递对象给webview
webView.addJavascriptInterface(newJsCallJava({
@JavascriptInterface
@Override
public voidopenImage(String src) {
Intentintent=newIntent(getApplicationContext(),ShowActivity.class);
intent.putExtra("url",src);startActivity(intent);
}
},"imagelistner");
//创建接口对象
public interface JsCallJava{
public voidopenImage(String src);
}
第三步:查看大图实现
初始化ShowActivity的布局文件
布局结构实现:
xml version="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><uk.co.senab.photoview.PhotoViewandroid:id="@+id/photoView"android:layout_width="match_parent"android:layout_height="match_parent"/>LinearLayout>
注意:布局中加载图片的控件是photoView,该控件对图片显示进行扩展
能够很方便的实现缩放的效果。
要使用该控件,需要在moudle中添加相关依赖:phoneView.jar的依赖
ShowActivity的实现
public class ShowActivity extends Activity {
@BindView(R.id.photoView)
PhotoViewphotoView;
@Override
protected void onCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_show);
ButterKnife.bind(this);
String url = getIntent().getStringExtra("url");
Picasso.with(this).load(url).into(photoView);
}
}