有时候，有这样的需求，当我点击网页中的图片时，跳转到新的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);
}
}
网友评论